Embedded UI: 'UIDL could not be read from server'

I tried to create an embedded demo application on top of the helloworld Vaadin example, with the following goal:

This is what I did:

  • Create a new Vaadin project from an archetype with:
  • mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.0.0.rc2 -Dpackaging=war
  • Create src/main/webapp/index.html based on the example from:
    https://vaadin.com/book/vaadin7/-/page/advanced.embedding.html
    (see details below)
  • Edit src/main/webapp/WEB-INF/web.xml (see details below)
  • mvn package
  • mvn jetty:run -D jetty.port=8888
  • Open browser at http://localhost:8888/helloworld → Application works normally
  • Point browser to http://localhost:8888/:
  • The webpage loads the embedded application normally (Click me -button is visible).
  • Click button:
  • Communication problem: UIDL could not be read from server. Check servlets mapping. Error code: 404

Firebug network tab shows HTTP POST with status 404:
http://localhost:8888/UIDL/?v-sh=1200&v-sw=1920&v-cw=1920&v-ch=560&v-curdate=1359714687519&v-tzo=-120&v-dstd=60&v-rtzo=-120&v-dston=false&v-vw=304&v-vh=66&v-loc=http%3A%2F%2Flocalhost%3A8888%2F&v-wn=helloworld-0.9249607686860268&v-wsver=7.0.0.rc2&v-uiId=6

index.html:


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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("helloworld", {
	    "browserDetailsUrl": "helloworld",
	    "widgetset": "com.vaadin.DefaultWidgetSet",
	    "theme": "reindeer",
	    "versionInfo": {"vaadinVersion": "7.0.0.rc2"},
	    "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>

web.xml:


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>Vaadin Web Application</display-name>
	<context-param>
		<description>Vaadin production mode</description>
		<param-name>productionMode</param-name>
		<param-value>false</param-value>
	</context-param>
	<servlet>
		<servlet-name>Vaadin Application Servlet</servlet-name>
		<servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
		<init-param>
			<description>Vaadin UI to display</description>
			<param-name>UI</param-name>
			<param-value>vaadintest.MyVaadinUI</param-value>
		</init-param>
		<init-param>
			<description>Application widgetset</description>
			<param-name>widgetset</param-name>
			<param-value>vaadintest.AppWidgetSet</param-value>
		</init-param>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>Vaadin Application Servlet</servlet-name>
		<url-pattern>/helloworld/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Vaadin Application Servlet</servlet-name>
		<url-pattern>/VAADIN/*</url-pattern>
	</servlet-mapping>
	
	<!-- 
	<servlet-mapping>
		<servlet-name>Vaadin Application Servlet</servlet-name>
		<url-pattern>/UIDL/*</url-pattern>
	</servlet-mapping>
	 -->

	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
	</welcome-file-list>
</web-app>