kreynolds

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

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

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

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Other popular topics Top

ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New

We're in Beta

About us Mission Statement