Vaadin App as Webcomponent

Hey, I am just researching making our app embeddable as webcomponent.
For this, I started with the tutorial https://vaadin.com/docs/latest/integrations/embedding/exporter
This says that I should add a script reference to webcomponents-loader.js to the host-page. This script gets not served (http://localhost:8080/vaadin/VAADIN/build/webcomponentsjs/webcomponents-loader.js 404, Request was not handled by any registered handler.), but the login-form.js is delivered without problem and the page seems to work.
What is wrong here?

Maybe, nothing is wrong at all. A colleague hinted that webcomponents-loader is only needed for the Edge browser.

Now I managed to (partially) load the app as a webcomponent, however push doesn’t work yet. Under port 8080 is the Vaadin App and port 8000 just serves a static html page that includes the webcomponent (basically the example from the Vaadin docs tutorial)

Access to XMLHttpRequest at ‘http://localhost:8080/?v-r=uidl&v-uiId=1’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I don’t have experience with embedding but here are the tests for the feature… which you can probably read to understand how you need to structure your app and how it works if the documentation is a little bit unclear https://github.com/vaadin/flow/tree/master/flow-tests/test-embedding

Thanks, I that was definitely helpful during the course of understanding everything better.

I now managed to get it done with our more complex app. One point I want to share is, when you get this message in the browser console:

The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:8000, *’, but only one is allowed.

A possible source of the problem is that AbstractDevServerRunner adds that * header in dev mode. In production mode, however, everything is working :slightly_smiling_face: