I’ve been exploring elixir and phoenix the last couple of weeks and built an API with phoenix but am having trouble connecting it to a react frontend. I tried this approach which more or less worked. Navigating to the root serves up the static files and react router takes over from there but if I navigate directly to a url phx router cant find a defined route and I get a “no route found for GET /login” page.
Is there a current guide or some pointers you guys can give me for best practices when connecting to more than a single page app?
I’ve only done product demos, but I’ve had a lot of success with react frontend statically served using a static plug with API endpoints defined in plug, dispensing with most of Phoenix (plug underlies most Phoenix routes)
You’ll want a “catchall” in your router…
what urls are you using in the react app?
say you are using /admin and the controller is PageController index
scope "/admin", MyApp.Web do
get("/*path", PageController, :index)
then hitting /admin/login will fire up the react app…
if you haven’t “scoped” you react with /admin or /app or similar I think you’ll need to be explicit eg.
scope "/", MyApp.Web do
get("/", PageController, :index)
get("/login", PageController, :index)
I’m sorry if I’m asking obvious questions I’m pretty new to both backend and phoenix, most of my previous experience with backend work was C# and even that was limited.
@isaac-rstor Could you expand on this a little? Right now I’m using plug_static_index_html
plug(Plug.Static.IndexHtml, at: "/")
only: ~w(index.html favicon.ico static service-worker.js)
to display my generated react scripts at the root, is there a way to route everything to this static directory and then redirect just the /api requests to my api controllers? I tried using a wildcard in the
at: argument but couldn’t come up with anything.
@outlog Yeah that makes sense to me, I tried something similar but right now I’m not using a controller to display the react app, I experimented with setting up a view that generated an index.html I could hook into with react but couldn’t figure out a good way to integrate my generated js without bundling it all into an app.js I guess.