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

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
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
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
pgiesin
This should be a simple problem but I just can’t seem to figure it out. I have a standalone Elixir app that won’t find the database. Dep...
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
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
Codball
Mix format works fine if run from the cmd. I’ve followed this to facilitate the implementation into VSC which involves downloading an ext...
New
jc00ke
Expanding on this topic: https://forum.elixirforum.net/t/map-typespec-question/19217 Let’s say I have a map with required and optional k...
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
977 41022 311
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
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
Tee
can someone please explain to me how Enum.reduce works with maps
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
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
sergio
I couldn’t find any guides that worked well with Phoenix 1.6.0 and esbuild. I hope this helps people test the waters and eases you into t...
New
sacepums
Hey guys. I'm new to elixir and im really stocked about it. But I ran into a bit of problem - I need to convert a date sting, for examp...
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

We're in Beta

About us Mission Statement