Embed multiple Vaadin applications in single page

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 <iframe> tags, which I don't want to use, and the second one added instantly displays the "Session Expired" message.

Has anyone successfully embedded multiple Vaadin applications in a single page wrapper?

EDIT:
I've found that using the @Push annotation in both apps causes it to break.
The following errors start showing up...

Fri Jan 13 14:44:40 GMT-500 2017 com.vaadin.client.communication.MessageHandler
SEVERE: Response didn't contain a server id. Please verify that the server is up-to-date and that the response data has not been modified in transmission.

 Jan 13 14:45:36 GMT-500 2017 com.vaadin.client.communication.MessageSender
SEVERE: No active request

Thanks,
Jake

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
 

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

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