React phoenix integration - add it to my phoenix project or keep react in a separate server?

i am building a website using react but should i just add react to my phoenix project or keep react in a seperate server as i think it can only communicate using an api so which is better?


I have been doing both, with pros and cons.

All in one


  • all in one, easier deployment
  • no need for cors


  • bind to backend, what if You want to reuse?



  • easier to switch and reuse
  • –no-html --no-webpack


  • not really a cons, but maybe You need to configure cors.
  • need to add phoenix.js as dependency
  • need two servers, more complex to deploy

I prefer to separate, but use only one server… and build into priv/static of the Phoenix server.

BTW You can do server side react rendering.

No, You can also use websocket.

1 Like

how did you merge react with Phoenix and used all in one?

Is there any example on GitHub for this?

It’s the output parameter of the front end webpack.config.js, You can specify the path to point to public/static.

Probably something like

1 Like

but how the react components will be used? within Phoenix’s controller’s template?

No, it is served by plug static as simple static html + js + css

is this like,

Setting up PageController’s index template to as a placeholder to serve JS files?

If You use --no-html --no-webpack on backend side, You don’t have templates, page_controller…

But You can still use plug static.

On the frontend, You can use webpack, webpack dev server, html webpack plugin, mini css extract plugin.

=> You build a static index.html (with just a div to mount react), but powered by app.js (which contains all frontend stuff) and styled by app.css
=> frontend communicate with json api with fetch, or axios, and with websocket with phoenix.js

1 Like

Hi, May I know how to use Plug.Static for serve react static file?

I have this inside my priv/static:


In my endpoint.ex

  plug Plug.Static,
    at: "/",
    from: :shiritori,
    gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)
1 Like

You need to add “assets” and index.html to that list :wink:
only: ~w(assets index.html)