I found a lot of example how to embed a vaadin app component using a web exporter. But unfortunately all these examples show how to do that using Webservlet, static page, ts,
I try to do that into a vaadin page (route) running into a spring boot app.
Is someone know hot to do that ? Thx a lot
It sounds like you would like to embed a Flow component inside another Flow component? Is there some reason for why that would be done using WebComponentExporter rather than just adding one Flow component as the child of another Flow component?
Was about to ask exactly the same as mr Leaf, but luckily saw him “typing…” thanks to this new forum :-)
I think that approach would only make sense if your have two separate Vaadin Flow apps? IIRC my ex-colleague @alejandro.du made an example of that some years ago, but I couldn’t find that right away.
To answer the actual question, you need to do two things:
- Load the script. This needs to be done dynamically rather than inlining it into the frontend bundle. One way of doing that is by calling
Page::addJavaScript. - Create a Flow component that uses the tag name of the exported web component. This can be a short as
@Tag("my-component") public class MyComponent extends Component {}.
2 Likes
Hi.
We want to stop to build monolithic app. For this, I want to build a POC for a micro frontend app. Have one portal application where we can embed other apps.
Each app should run on their own container, on same server or another.
One thing to notice for such use cases is cross-site embedding needs some extra attention with CORS headers and such and Vaadin doesn’t provide any officially supported solution for this.
Follow-up question to the experts here: Is there details about the CORS configuration needed? I have my own (static site) embedding app and would like to make it cross domain.
Hi @Leif.
First thx you for your reply.
I followed your proposal. I can deploy apps, but unfortunately content of the remote components are not displayed in the main app.
Few details :
I created a very simple project to use as example.
This project is composed of 2 modules :
module sub1.
This module contains 4 classes
- the spring boot application Main class
- A custom vaadin component (extend Div + 2 widgets for example)
- A WebComponentExporter for the component
- A simple vue (route) to display the component into sub1 vaadin application.
module main.
This module contains 3 classes
- the spring boot application Main class
- A component extend (stub) based on @tag(sub1) and where js script generated by exporter is added to the page.
- A simple vue (route) containing a title + my component stub.
When I request the main page, I can see the title but nothing else.
When I inspect the code, I can see the component script was added as module.
But also the browser console show
Uncaught DOMException: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “dom-module” has already been used with this registry
at window.customElements.define (http://localhost:8000/:6:829)
at http://localhost:8001/VAADIN/build/generated-flow-imports-Dg6rTebj.js:33:892
Do you have an idea, why sub component is not displayed into main app view ?
Project can be accessed here : https://github.com/alt3fcat/tutos-micro-frontend-vaadin
The cause of that error is that there’s a conflict between the two modules when they both try to load the same web components. There’s an explanation on how to deal with that for a previous Vaadin version in GitHub - Artur-/iot: A micro frontend example application using Java. The same approach could potentially also be adopted to your case.
This might be the point where I ask whether a modular monolith (aka modulith) would be appropriate for your case instead of a fully modular approach.