All,
I am building a app with an Elixir backend and React front-end. Wondering if that is pretty standard config and if there are any recommendations/good practices to work with websockets from React client/non-Elixir clients.
Much appreciated!
All,
I am building a app with an Elixir backend and React front-end. Wondering if that is pretty standard config and if there are any recommendations/good practices to work with websockets from React client/non-Elixir clients.
Much appreciated!
Not an answer to your question but hopefully helpful: Tony put together a video demo, a repo using Svelte and Y.docs, he’s probably exploring websockets quite well.
I’d say having an Elixir backend with a JavaScript frontend (like React) is pretty common. However, there are many ways to approach it, and I don’t think there’s a single standard method.
Off the top of my head, here are a few different approaches:
Separate Backend and Frontend
This is probably the most common setup since it’s tried and true. You have an Elixir Phoenix backend API and a completely separate frontend (Next.js, Remix, Express, Vite, or whatever React rendering framework you prefer). WebSocket support on the backend is handled using Phoenix Channels, while on the frontend, you’d use the Phoenix.js client library to communicate with the Phoenix backend.
Inertia.js
Inertia.js, via the inertia-phoenix adapter, allows you to maintain a monolithic Phoenix app while using React on the frontend. This simplifies things a lot if you only need to support web clients. In this setup, you’d still use the same Phoenix Channels setup as in the separate backend and frontend approach.
LiveView + React
This is the most cutting-edge approach and the least battle-tested. By using a library like LiveReact or writing your own JS hook, you can integrate React with Phoenix LiveView. This simplifies WebSockets since you don’t have to manually set them up with Phoenix Channels—LiveView handles that for you.
To circle back to your question: Yes, using Elixir with React is common, but there are several ways to do it, depending on your use case.