Error while embedding vaadin app into another existing web site

Hi there

Our task is to embed pretty complex Vaadin app( which can work standalone on WildFly) into exiting website. We tried with iframe, it works, but iframe adds something like 30sec to rendder the page compared to the standalone version.
In certain example , standalone took ~10sec, while iframe took 40sec( dozens of layouts with hundreds of components).

This is not acceptable, so we try to embed the app with the hope it will work faster.

We follow the example here

We are using Vaadin 19( tutorial for v19 seems to be not existent).

Implementing the tutorial leads us to following backend error.
All is on production mode.

Caused by: java.lang.NullPointerException
at deployment.salex_webm_rik.war//com.vaadin.flow.server.BootstrapHandler$BootstrapPageBuilder.appendNpmBundle(
at deployment.salex_webm_rik.war//com.vaadin.flow.server.BootstrapHandler$BootstrapPageBuilder.setupFrameworkLibraries(
at deployment.salex_webm_rik.war//com.vaadin.flow.server.BootstrapHandler$BootstrapPageBuilder.setupDocumentHead(
at deployment.salex_webm_rik.war//com.vaadin.flow.server.BootstrapHandler$BootstrapPageBuilder.getBootstrapPage(
at deployment.salex_webm_rik.war//com.vaadin.flow.server.communication.WebComponentBootstrapHandler.synchronizedHandleRequest(
at deployment.salex_webm_rik.war//com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(
at deployment.salex_webm_rik.war//com.vaadin.flow.server.VaadinService.handleRequest(
… 52 more

Our stack is Wildfly with two apps on it. One is existing web site, other is Vaadin app. This is the same configuration when iframe example works.

Probably important info is that while
…/web-component/login-form.js url loads a js script
…/VAADIN/build/webcomponentsjs/webcomponents-loader.js gives 404, which probably means that something in configuration is not ok

Thanks in advance

Hi Stan, welcome to the forum!
For me it sounds like the Vaadin application is not built for production
, but I might be wrong. One thing is starting the application in production mode and the other is that it was built for production, can you check that?
A question: why are you using Vaadin 19? … is it possible for you to upgrade to a newer version of the framework?

Hi there

Vaadin app i clearly in production. There are two reasons for it. It work just fine as a standalone deployed on WildFly with no other servers. And when in starts there is this in WildFly’s log file :

[com.vaadin.flow.server.DefaultDeploymentConfiguration] (default task-1) Vaadin is running in production mode.

Or by production you mean some configuration about embedding which we didn’t do?

In the deployed war file we have structure as

і jboss-web.xml
і web.xml
і і

і   і       
і   і       ГДДДconfig
і   і       і       flow-build-info.json
і   і       і       stats.json
і   і       і       
і   і       АДДДwebapp
і   і           і   index.html
і   і           і   index.html.gz
і   і           і   manifest.json
і   і           і   sw.js
і   і           і   sw.js.gz
і   і           і   
і   і           АДДДVAADIN
і   і               АДДДbuild
і   і                       vaadin-1-77a0d4121741995bf2d1.cache.js
і   і                       vaadin-1-77a0d4121741995bf2d1.cache.js.gz
і   і                       vaadin-1-94e3914275801d5f59b2.cache.js
і   і                       vaadin-1-94e3914275801d5f59b2.cache.js.gz
і   і                       vaadin-1-bdeec14662a13957bc69.cache.js
і   і                       vaadin-1-bdeec14662a13957bc69.cache.js.gz
і   і                       vaadin-1-c27aacbbb1d9b61ed7b9.cache.js
і   і                       vaadin-1-c27aacbbb1d9b61ed7b9.cache.js.gz
і   і                       vaadin-2-01d68d8db7b374e7bcec.cache.js
і   і                       vaadin-2-01d68d8db7b374e7bcec.cache.js.gz
і   і                       vaadin-2-1a97241f19a91fdcf491.cache.js
і   і                       vaadin-2-1a97241f19a91fdcf491.cache.js.gz
і   і                       vaadin-2-b2f68242c3966ff6e54c.cache.js
і   і                       vaadin-2-b2f68242c3966ff6e54c.cache.js.gz
і   і                       vaadin-2-cad1bfe35640c98c0a99.cache.js
і   і                       vaadin-2-cad1bfe35640c98c0a99.cache.js.gz
і   і                       vaadin-3-174b18b6d490a1c3ac95.cache.js
і   і                       vaadin-3-174b18b6d490a1c3ac95.cache.js.gz
і   і                       vaadin-3-3510327df7f38bafff5f.cache.js
і   і                       vaadin-3-3510327df7f38bafff5f.cache.js.gz
і   і                       vaadin-3-782e575d77d3dca7232d.cache.js
і   і                       vaadin-3-782e575d77d3dca7232d.cache.js.gz
і   і                       vaadin-3-e0a15066f67c8caa0951.cache.js
і   і                       vaadin-3-e0a15066f67c8caa0951.cache.js.gz
і   і                       vaadin-4-014ed48a51e2519cded8.cache.js
і   і                       vaadin-4-014ed48a51e2519cded8.cache.js.gz
і   і                       vaadin-4-740727ede4b71c616d54.cache.js
і   і                       vaadin-4-740727ede4b71c616d54.cache.js.gz
і   і                       vaadin-4-e3c8b24d2093bd5f8e2f.cache.js
і   і                       vaadin-4-e3c8b24d2093bd5f8e2f.cache.js.gz
і   і                       vaadin-5-22f80bd19f854958ff73.cache.js
і   і                       vaadin-5-22f80bd19f854958ff73.cache.js.gz
і   і                       vaadin-5-32eec05d86d034b41e35.cache.js
і   і                       vaadin-5-32eec05d86d034b41e35.cache.js.gz
і   і                       vaadin-5-73fe0d18c8d3cc2a05bd.cache.js
і   і                       vaadin-5-73fe0d18c8d3cc2a05bd.cache.js.gz
і   і                       vaadin-6-56c1814b6e662c684cef.cache.js
і   і                       vaadin-6-56c1814b6e662c684cef.cache.js.gz
і   і                       vaadin-6-595ea5754c5a9b25922c.cache.js
і   і                       vaadin-6-595ea5754c5a9b25922c.cache.js.gz
і   і                       vaadin-6-ebb6b9109f0942fdfc2f.cache.js
і   і                       vaadin-6-ebb6b9109f0942fdfc2f.cache.js.gz
і   і                       vaadin-6-fcdbd800cdf9b7d8500b.cache.js
і   і                       vaadin-6-fcdbd800cdf9b7d8500b.cache.js.gz
і   і                       vaadin-bundle-223a4713c8f0d176f7b4.cache.js
і   і                       vaadin-bundle-223a4713c8f0d176f7b4.cache.js.gz
і   і                       vaadin-bundle-4e6320e28f5a02461b8a.cache.js
і   і                       vaadin-bundle-4e6320e28f5a02461b8a.cache.js.gz
і   і                       vaadin-bundle-d2f1b774944953f9945d.cache.js
і   і                       vaadin-bundle-d2f1b774944953f9945d.cache.js.gz
і   і                       vaadin-bundle-fb21032a2fc80a189257.cache.js
і   і                       vaadin-bundle-fb21032a2fc80a189257.cache.js.gz


About version 19. It was build with that version at the time and is working fine( as standalone). We can consider to upgrade, but will require extra work to upgrade it and test it. If v19 can work as embedded we prefer ot leave it for now.


I’ve found this important section regarding embedding applications in production mode, in the Vaadin 14 documentation, that might apply to your case, given that it is referring specifically to the webcomponents-loader.js location.

Can you take a look and see if that applies to your scenario?


Found the problem. It was some kind of war packaging error.


Original problem still stands. IFrame is very slow circa 40sec in our example. Embedding is somewhat faster , circa 30sec

No joy