Embedding external vaadin view inside an host app

Hi there

I’m getting to grips with SCS

For this I have 2 projects under Vaadin and Quarkus,
in the first project, under a domain xxx I want to export a view using the WebExporterComponent
In the second, the host app (in another domain), I have a navigation item with menus and submenus, when the iframe that shows the view from the WebExporterComponent appears, every time I click on an element outside the iframe, the whole page refreshes

please help :confused:

That would violate the idea of the SCS architecture. It’s called self-contained because there are no external dependencies

thank you, so this means micro frontends and scs are not compatible ?

Did I understand correctly that the outside of the iframe comes from Quarkus and the inside of the iframe is Vaadin?

What does that Quarkus part use for rendering? If it’s just static HTML templates, then a direct architectural consequence is that any interaction leads to loading a new HTML document from the server which also means that the whole page is reloaded. To work around that, you would have to change that part to be an SPA (using e.g. React) or use something like HTMX to avoid reloading the whole page.

Yes. If one SCS has a Microfrontend, it’s no longer self-contained.

this is the main idea of what I want to achieve

from https://scs-architecture.org/

what do I misunderstand ? how to call this approach ?

both are quarkus project using vaadin extension
this is how I put the iframe on the host app

MianView contains a sideNav with hierarchy, and even if I am clicking on a non link, the whole host app refreshes

Sounds like a session cookie issue in case you run both servers on different ports on the same domain. You can fix that by configuring one of the applications to use a custom session cookie name.

1 Like

This would be an IFrame displays HTML served by some other SCS.
It’s only to display that there will be no interaction between the host SCS and the included HTML
As you’re trying to do.

My point is that why do you want to include something from another application. When doing that it usually means that the SCS are not splitted in the optimal way.

1 Like

sounds clear,
after internal discussions, it appears that our approach is not the right one.
we’re going to make sure that each scs is truly autonomous, and that will solve the problem in turn.
if necessary, we’ll limit ourselves to including a menu to redirect the user to other scs
thank you

Great decision!

I recently had a talk about SCS: https://www.youtube.com/watch?v=jdxxgHcAjf8

If you have any questions, don’t hesitate to contact me here in the forum.

1 Like