kreynolds
Connecting to React Front End
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?
Most Liked
isaac-rstor
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)
outlog
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
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #code-sync
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








