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

I have been doing both, with pros and cons.

All in one

pros:

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

cons:

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

Separate

pros:

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

cons:

• 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.

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

../phoenix_app/priv/static

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

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

I have this inside my priv/static:

/assets
index.html

In my endpoint.ex

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

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