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

Phoenix Forum Questions / Help
, ,
1

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?

Thanks

2

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.

1 Like
3

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

Is there any example on GitHub for this?

4

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
1 Like
5

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

6

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

7

is this like,

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

8

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
9

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)
1 Like
10

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

2 Likes