Progressively migrating to LiveView from a React SPA

Does anyone have an experience or know of any resources around progressively migrating from a React SPA to a LiveView app?

We’ve got a rather large frontend built fully in React with a Phoenix + Absinthe backend, but we’d love to start progressively building new features in LiveView. Just rewriting everything in one shot would be a hard sell, but coming off of ElixirConf we couldn’t help but feeling a bit envious of all the amazing stuff happening in the LiveView world. Open to hearing any ideas for how to start the process…

1 Like

I recently came off a project with Ember, React, and LiveView all working simultaneously. Part of my job was to help the effort to finish converting the Ember stuff into LiveView so Ember could be dropped entirely. We did it like you said, in small chunks.

It is doable. I did not configure the parallel setup, so hard to give any firm recommendations. I recall we configured the React router to be the first opportunity to match a URL request/path, and then if none could be found we would then let the Phoenix router attempt to handle it.

One other idea/note is: you might want to (at least at first) build your LiveView to use the same GraphQL endpoint as the React experience used to make sure to maintain the domain/data layer as close as possible. In time you might replace that internal use with more traditional Phoenix business domain contexts.

Good luck.

1 Like

Can’t help, but I’d love to do the same to an Angular app. And have no idea how to tackle this.

Interesting idea I hadn’t considered, thanks!

You can also go the other way round with GitHub - poteto/terraform: A simple plug for incrementally transforming an API into Phoenix. Check out the blog post:

This tries to match a route in phoenix and otherwise falls back to a separate router, which you can use to call into whatever else you need.

I am in the middle of doing this. First step is to get your spa off of your hosting service and be served from Phoenix itself. You’ll also migrate all of your auth in the process. We are using auth0 and let me just say non-spa auth0 is way, way saner than spa auth0. (As an aside, especially for this, I recommend not using auth frameworks e.g. ueberauth – do it yourself with plugs so that you have a comprehensive understanding of what’s up)

For us this is a dashboard and there was a concerted effort to move to webcomponents a few months ago that was backburnered, so lv is an excuse to deploy that technology, and we’ll be hosting the lv at a /beta route that will present the same information as / and one day we just flip it over