Morotai

Morotai

Working with Elixir Websockets from React App

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!

Most Liked

tonydang

tonydang

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:

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

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

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

RicoTrevisan

RicoTrevisan

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.

Where Next?

Popular in Questions Top

gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
LegitStack
I’m hoping you guys can give me some general advice and perhaps code examples if you’re feeling up to it. I’m very interested in Elixir,...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
idi527
I’ve been re-reading swift book again and noticed that multiline strings there don’t have a trailing line break, unlike in elixir iex(2)...
New

Other popular topics Top

JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
lk-geimfari
What is most correct way to open, read and parse JSON file with poison? For example if we have example.json file in root of some projec...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New

We're in Beta

About us Mission Statement