Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Embedding a Vaadin application in a static html page
Hi there,
I am just trying to embedd a Vaadin application in a static html page with the help of the current Vaadin docs (https://vaadin.com/docs/-/part/framework/advanced/advanced-embedding.html). I have a "Hello World" app with a button that shows a notification when clicked.
I have a mapping to serve static resources in my web application:
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/static/*</url-pattern>
</servlet-mapping>
and a mapping for the vaadin app:
<servlet-mapping>
<servlet-name>Vaadin</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
The code of the static html page is:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;chrome=1" />
<title>Embedding a Vaadin Application in HTML Page</title>
<!-- Set up the favicon from the Vaadin theme -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../VAADIN/themes/reindeer/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="../VAADIN/themes/reindeer/favicon.ico" />
</head>
<body>
<!-- Loads the Vaadin widget set, etc. -->
<script type="text/javascript" src="../VAADIN/vaadinBootstrap.js"></script>
<!-- GWT requires an invisible history frame. It is -->
<!-- needed for page/fragment history in the browser. -->
<iframe tabindex="-1" id="__gwt_historyFrame"
style="position: absolute; width: 0; height: 0;
border: 0; overflow: hidden"
src="javascript:false"></iframe>
<h1>Embedding a Vaadin UI</h1>
<p>This is a static web page that contains an embedded Vaadin application. It's here:</p>
<!-- So here comes the div element in which the Vaadin -->
<!-- application is embedded. -->
<div style="width: 300px; border: 2px solid green;" id="helloworld" class="v-app">
<!-- Optional placeholder for the loading indicator -->
<div class=" v-app-loading"></div>
<!-- Alternative fallback text -->
<noscript>You have to enable javascript in your browser to
use an application built with Vaadin.</noscript>
</div>
<script type="text/javascript">//<![CDATA[
if (!window.vaadin)
alert("Failed to load the bootstrap JavaScript: "+
"VAADIN/vaadinBootstrap.js");
/* The UI Configuration */
vaadin.initApplication("masterportlet", {
"browserDetailsUrl": "../VAADIN",
"serviceUrl": "../VAADIN",
"widgetset": "com.vaadin.DefaultWidgetSet",
"theme": "valo",
"versionInfo": {"vaadinVersion": "7.6.1"},
"vaadinDir": "../VAADIN/",
"heartbeatInterval": 300,
"debug": true,
"standalone": false,
"authErrMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Authentication problem"
},
"comErrMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Communication problem"
},
"sessExpMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Session Expired"
}
});//]] >
</script>
<p>Please view the page source to see how embedding works.</p>
</body>
</html>
The application works fine on the URI http://localhost:8080/masterportlet/. The static HTML page is shown at the url http://localhost:8080/masterportlet/static/index.html . The embedding however does not work as desired. I can see that the vaadin servlet is invoked (Vaadin is running in DEBUG MODE), but the app is not embedded and I get the javascript error:
Thu Feb 04 15:10:40 GMT+100 2016 com.vaadin.client.ApplicationConfiguration
SEVERE: (TypeError) : d is nullcom.google.gwt.core.client.JavaScriptException: (TypeError) : d is null
at Unknown.hdd(http://localhost:8080/masterportlet/static/index.html)
at Unknown.lzb(http://localhost:8080/masterportlet/static/index.html)
at Unknown.Kyb(http://localhost:8080/masterportlet/static/index.html)
at Unknown.Ti(http://localhost:8080/masterportlet/static/index.html)
at Unknown.Li(http://localhost:8080/masterportlet/static/index.html)
at Unknown.Xi(http://localhost:8080/masterportlet/static/index.html)
at Unknown.Ri(http://localhost:8080/masterportlet/static/index.html)
at Unknown.oi(http://localhost:8080/masterportlet/static/index.html)
at Unknown.ri(http://localhost:8080/masterportlet/static/index.html)
at Unknown.qi/<(http://localhost:8080/masterportlet/static/index.html)
at Unknown.d(http://localhost:8080/masterportlet/static/index.html)
at Unknown.anonymous(Unknown)
Can somebody help me with that or just post a working example for embedding an app in a static page?
30 minutes after posting this topic I found the error:
The ID of the <div> where the app is embedded must be identical to the one used in initApplication()
vaadin.initApplication("masterportlet" ...
<div id="masterportlet" class="v-app"></div>