Serving Phoenix LiveView App from another web app

First, I recognize that there will probably be some CORS issues - and maybe the best solution is to put both apps behind a proxy and have them under the same IP. Currently, both are served from Heroku - and I’m not entirely sure how to stick a proxy like NGINX in front of them - I’m open to that whatever solutions.

But back to the problem at hand, the overarching goal is - I have a webapp written in Django as a rest server, with React/Typescript (App D) - that I’d like to start writing in LiveView (App E) and Phoenix.

Can I somehow make requests from my React code - and serve up the html + socket from LiveView in my already created React app?

Can I do this super incrementally? What issues can I expect?

1 Like

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 https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-dom-patching-and-temporary-assigns

You could use also just use Phoenix to provide a “real-time API” using Channels - https://hexdocs.pm/phoenix/channels.html#content - 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?

1 Like

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.

1 Like

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

1 Like

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 :slight_smile:

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

5 Likes

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 :slight_smile:

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.

1 Like

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.

1 Like

So say we all!

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

3 Likes