Serving Phoenix LiveView App from another web app

Is not LiveView tied to Phoenix ? Not sure.

The main issue you will face is both React and LiveView fighting for control over the DOM. If you can get clear demarcation you may have a chance, but if you want React to pull in bits of LiveView I think you will really struggle (without resorting to something ugly like iframes). The pages hosting LiveView will need to be fully “Phoenixed”. I don’t have any React specific experience, but I don’t think that will stop you from hosting a React component on a LiveView page provided you mark which bits of the DOM React is allowed to mess with using phx-update="ignore" as per Phoenix.LiveView — Phoenix LiveView v1.2.5

You could use also just use Phoenix to provide a “real-time API” using Channels - Channels — Phoenix v1.8.8 - this is the same backend comms tech that LiveView is built on but doesn’t do any DOM mutation for you so you would do that in React.

Is there any way you can break out one page at a time from the React app or is it all one big SPA?

LiveView is actually for a server rendered app. In your case (I think) it’s better to replace the backend (restful API) with a Phoenix one and leave the front-end unchanged. Converting it to LiveView will require a lot of work.

I guess more than an old good full rewrite from scratch, dropping React in favour of LV (not a React fan, so I’m clearly biased here).

Liveview is autonomous, You receive a full html page, that is remote controlled. It receives incremental changes, applied by morphdom. There would be no need to serve it with React.

Also, React does not like Dom modification…

But if You have already React, You don’t need Liveview. You already have a reactive UI, that could update itself.

What You could do is link your React to Phoenix channels, and that’s easy to do with Phoenix.js. You could build the same system as Liveview do.

Probably most of the people here are backend related, but there are some advantage to have a separate frontend, and You have one. You could switch them, and transform your Django backend into a Phoenix backend

While porting a Liveview frontend to anything other than Phoenix would be nearly impossible.

Definitely something I’ve done a spike on, it’s kind of neat - I found this terraform (not the hashicorp thing) that will server whatever endpoints we have in phoenix, but pass the rest to a predefined backend (my case my django one).
It’s an old package but simple, and it still works with elixir 1.9 and phoenix 1.5

As for not needing liveView the issue is that React with forms and keeping validation in sync, sucks. LiveView provides the best solution for this I’ve ever seen because - there is no demarcation from backend to front end validation logic.

I’ve found a package that allows me to drop in react components into liveView I assume it tells LiveView not to send updates to that piece of code. But I was wondering if I could do the opposite, have the page managed by the react component and have a modal managed by liveView. Seems like people are saying that you can’t.

You aren’t allowed to be too biased, LiveView components seem to be based off of React components. They borrow lots of good stuff from their way of doing things.

The problem is JavaScript - which is why I use typescript! I actually love it’s typesystem (for the most part) more than I like elixir’s type system. But I digress, Elixir is awesome.

So say we all!

Anyway I promise to check this TypeScript stuff out , but only after I’ll have enough of Rust which is also awesome (and mind blowing). I guess it will take some time.