greatisgreat
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?
Thanks
Marked As Solved
kokolegorille
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.
Also Liked
mindreframer
You need to add “assets” and index.html to that list ![]()
like:
only: ~w(assets index.html)
kokolegorille
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
kokolegorille
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
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
- #code-sync
- #javascript
- #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









