hiramegl
Canonical way to use LiveView in a micro-frontend architecture
Hi,
I would like to know what is the recommended way to embed LiveView web applications in a page with a micro-frontend architecture.
I have modified both Phoenix LiveView and Phoenix Live Reload in order to use them in LiveView applications that are encapsulated in a web-component and embedded in a “main container” LiveView application.
The main problem I found is that LiveView references to the global object document, because is meant to be used as a monolithic SPA.
I made changes so that is possible to provide the element that should act as the root document.
Furthermore, I needed the LiveView application to have its own shadow-root node.
An schematical image would look like this:
The PoC is found here: GitHub - hiramegl/suite · GitHub
The database references are not needed and could be removed.
I’ve probably overcomplicated things but have not found a better approach.
Another constraint is that I do not want to use React or Vue to build the frontend and just use Phoenix/Elixir for the backend. I Found this related thread LiveView independent micro-frontend idea: somewhat stuck + repo - #8 by garrison but it is not what I’d like to use.
I’d like to use only LiveView.
Also saw the PR for a patch that solves more or less the problem that I have, but it seems to have conflicts and is not solved yet.
https://github.com/phoenixframework/phoenix_live_view/pull/3564
Thank your for your help beforehand!
Best regards,
/Hiram
Most Liked
superchris
derek-zhou
The only way to embed liveview that works out of the box is to use an iframe. Then you will have the obvious sizing problem, which can be overcame if:
- You control everything and everything is served from the same domain
- Your iframe embedding scheme is static and not too complicated
This blog post discussed a simple way to coordinate sizing between parent and child
dblack
You might want to check out this: LiveViewPortal - embed LiveViews in other websites
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Courses that'll move you from confusion to "Aha, now I get it!"
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"