Canonical way to use LiveView in a micro-frontend architecture

Phoenix Forum Questions / Help
,
1

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:

Micro-Frontend-Diagram
Micro-Frontend-Diagram606×364 17.7 KB

The PoC is found here: GitHub - hiramegl/suite
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.

Thank your for your help beforehand!

Best regards,

/Hiram

2

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

2 Likes
3

You might want to check out this: LiveViewPortal - embed LiveViews in other websites

2 Likes
4

You also might want to check LiveState which I developed after first attempting to drop LiveView into a web component. It’s not LiveView, but it designed to be as close I could get DX wise. Used in production for several years at this point, FWIW.

3 Likes
5

Hi Derek,

Thank you for the tip. Yes, I think that was the first approach I used but was not aware that one can overcome the sizing problems this way. I’d probably take a look at it.

Thank you!

/Hiram

6

Hi Dblack,

I was not aware of this library and I will definitely take a look at it. Seems to solve some problems that I’ve been struggling with.

Thank you!

/Hiram

7

Thank you Chris,

I think I’ve checked LiveState but would like to keep the development on Elixir mostly. I’ve been working with the frontend-backend approach and working only in the backend has became a more appealing approach. But will consider the pros and cons and check if LiveState can be a better solution to my problem.

Thank you!

/Hiram

8

I’m doing the liveviews-in-iframes approach while migrating my frontend from a 100% Vue SPA to mostly Liveview. New views are Liveview only, and Vue is still rendering the outer page. Indeed this sizing problem can be overcome, and of course parent-child communication adds a bit of plumbing, but it stays quite straightforward.

I have not run into issues related to this embedding of Liveview in iframes in an SPA in production.

1 Like
9

Thank you for your answer Lucas!

I will give it a try. I had a bit of bad memories when I did this for many years ago so that’s why ive tried to avoid it but hopefully is less hassle nowadays.

Regards,

/Hiram