Embed multiple Vaadin applications in single page

General
1

I’m attempting to embed multiple Vaadin applications in a single page as follows:

<script type="text/javascript" src="http://localhost:9000/VAADIN/vaadinBootstrap.js"></script>

<div id="orders"></div>
<div id="chat"></div>
    
    <script>
    
    
      window.vaadin.initApplication(
          "orders",
          {
            "versionInfo": {
              "vaadinVersion": "7.7.5"
            },
            "browserDetailsUrl": "http://localhost:8080",
            "serviceUrl": "http://localhost:8080",
            "vaadinDir": "http://localhost:8080/VAADIN/",
            "widgetset": "com.eyewyre.AppWidgetSet",
            "theme": "apptheme",
            "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"
            }
          }
        );
        
      window.vaadin.initApplication(
          "chat",
          {
            "versionInfo": {
              "vaadinVersion": "7.7.5"
            },
            "browserDetailsUrl": "http://localhost:9000",
            "serviceUrl": "http://localhost:9000",
            "vaadinDir": "http://localhost:9000/VAADIN/",
            "widgetset": "com.eyewyre.AppWidgetSet",
            "theme": "apptheme",
            "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>

But as soon as the page is loaded the “Session Expired” message appears.

I’ve also tried embedding them using

2

Jake,

Did you solve the issue? Same problem here. I changed the caption of sessExpMsg for both embedded apps but the message is still Session Expired. Some vaadin internal issue.

The documentation says


You can embed one or more Vaadin UIs inside a web page with a method that is equivalent to loading the initial page content from the Vaadin servlet in a non-embedded UI. Normally, the VaadinServlet generates an initial page that contains the correct parameters for the specific UI.
You can easily configure it to load multiple Vaadin UIs in the same page.
 They can have different widget sets and different themes.

I would say, at least for me, it easily does not work.

Robert

3

This is a old post… am posting because it may be useful for some one if faces the problem now…

This is a cookie issue…

Each vaadin app stores a cookie called JESSIONID and loading the second app invalidates the first one i guess so,

So try renaming the cookie in servers

for eg: JESSIONID to JESSIONID-APP1 and JESSIONID-APP2

4

In application.property you can customize your cookie name with:
server.servlet.session.cookie.name=
A list of all usable properties can be found at: https://docs.spring.io/spring-boot/docs/2.1.9.RELEASE/reference/html/common-application-properties.html