Connecting to React Front End

Phoenix Forum Questions / Help
, ,
1

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?

2

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)

1 Like
3

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
    pipe_through(:browser)
    get("/*path", PageController, :index)
  end

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
    pipe_through(:browser)

    get("/", PageController, :index)
    get("/login", PageController, :index)
   #etc
  end
1 Like
4

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: "/")
  plug(
    Plug.Static,
    at: "/",
    from: "priv/pms-fe/build/",
    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.