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?

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Embedding a Vaadin application in a static html page

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.