LiveViewPortal is a small library that allows third-party sites to embed LiveView apps.
The library is distributed as an NPM package. Only a small part of the LiveView JS code is modified.
What problem does this solve?
From the LiveView repo:
Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.
This matches Doofinder’s use case for our ecommerce products except for one point: rendering LiveViews from third party pages. We needed to embed LiveView for everybody that wanted to give their users rich and real-time experiences.
We have been using a modified version of LiveView with this purpose for a long time. We wanted to extend this to other projects and decided to make it open source. Our goal is to make this feature a part of LiveView, and we are working on merging this to LiveView. In the mean time, you can use this library to try it out.
If you want to know more about the technical details, you can check out the repo and our blog post. Also, if you have any questions, I’ll be more than happy to answer here!
Great job! I wanted to do this for sometime but never managed to do it myself! I had a similar one done for a comment server alternative for Disqus that I did for an organisation using LiveView but with a lot of hacks. However something like what you have with LVPortal would make it easier to implement without the ugly hacks. Congrats on making this available for everyone!
Thanks!! This has some minimal hacks, as it modifies javascript LiveView code. Hopefully we can find a way to make this available in LiveView.
The comment solution is definitely a great idea, I’m sure you must have been happy once you managed to implement that with all the workarounds that you mention .
Not yet, but I’ll post the PR in this thread so you and others can follow the progress.
I have not explored this yet, but it is definitely something to experiment with. It can be tricky to modify the URL as the host page would probably also do things with the URL. Also you would probably want to reuse the same websocket instead of navigating to a new LiveView and having to mount again. I think live_session could be of use here.
Hey @rhcarvalho, thanks. As @sonic182 said, you can embed a LiveViewPortal inside a LiveView hosted in a different Phoenix app.
Also, you can serve, from the same Phoenix app, both regular LiveViews and LiveViewPortals. For that, you can define separate socket endpoints and router pipelines.
Since we touched the topic of navigation, I’d like to ask how is LiveViewPortal different from LiveView when it comes to state management options? IIUC URL params are not available, are they?
How is the redeployment/reconnection experience? In particularly, with regards to state preservation, e.g. form inputs.
Wow, amazing, that’s exactly what we could use right now. We have an e-commerce webpage and are use Liveview for a kind of designer for placing logo’s on the product, but are using the iframe technology. If this really works on our webpage with LiveviewPortal, that would be super fantastic, thank’s a lot, really a lot…
I’d like to ask how is LiveViewPortal different from LiveView when it comes to state management options? IIUC URL params are not available, are they?
Params are not available by default. However, in one of our LiveView apps embedded in third-party sites, we do have URL params — thanks to a custom implementation. That app still uses our old modified LiveView setup, without Portal. When we migrate it to LiveViewPortal, we’ll evaluate whether to keep it as a custom solution per app or extract something reusable for all portal-based apps.
We are waiting for feedback on this before opening a PR in the LiveView repo. Have you tried the library? Do you have any suggestions or have you encountered any shortcomings?
.
