Michael Cochez

Assistant Professor at Vrije Universiteit Amsterdam

Getting Vaadin 7 to work on Google App Engine

This tutorial has some specifics for the Cloud computing: Paas exercise, but should be useful in general.

Create a new Vaadin 7 project (New Vaadin7 project), carefully selecting GAE stuff on all stages. The created project seems to be mix of both a vaadin project and a GAE project.

<img src=”1-createVaadinProject.png” alt=”Create a Vaadin Project” style=”height: 329px” > <img src=”2-GAESettings.png” alt=”Settings for GAE” style=”height: 329px” > <img src=”3-GenerateWebXML.png” alt=”Generate web.xml” style=”height: 329px” >

However, when you try to deploy this project Eclipse informs that your project is not an App Engine project. There are quite a few (simple) steps to get things working …

  1. Right click the project and click properties. Go to Project facets and disable the Google App Engine (for a single module) facet from the project. Apply, close the window and re-open, go to Google app engine settings and select Use Google App Engine. For this project we do not need the datanucleus stuff.
    <img src=”4-RemoveGAEFacet.png” alt=”Remove GAE facet” style=”height: 329px” > <img src=”5-EnableGAE.png” alt=”Enable GAE” style=”height: 329px” >

  2. Vaadin needs sessions enabled. Enable them by adding <sessions-enabled>true</sessions-enabled> to appengine-web.xml in /war/WEB-INF

  3. Remove the default generated index.html file. It will be loaded instead of your vaadin app otherwise. You can alternatively disable the welcome files in web.xml. Vaadin is configure by default to be served from the root directory (it should be possible to serve from another directory too if you want: https://vaadin.com/book/-/page/application.environment.html )

  4. Install the Google Map jars by adding the following line to the ivy.xml file: <dependency org="com.vaadin.tapio" name="googlemaps" rev="0.9.0" /> then right click on the project->Ivy->Resolve. Now you need to recompile the widgetset (from the Vaadin menu) for this new component to work. (This takes time ~5 min)

  5. Add the location of the compiled widgetset manually to the web.xml file as an initialization parameter of the com.vaadin.server.GAEVaadinServlet, to get the widgetset for the map to work:

     <init-param>
         <description>
      	Trying to add the widget set location manually</description>
         <param-name>widgetset</param-name>
         <!-- Change this to the correct location for your widget set. It is the name of the folder in /war/VAADIN/widgetsets. -->
         <param-value>fi.jyu.ties456.miselico.vaadin.widgetset.VaadinmapongaeWidgetset</param-value>
     </init-param>
    

whole web.xml file example

  1. When running in debug mode (the default) Vaadin tries to recompile the scss every time the css is requested ( https://vaadin.com/book/-/page/themes.sass.html ). This fails on GAE because the file system cannot be accessed by the sass compiler. To solve this, generate the .css file by using compile theme from the Vaadin menu in Eclipse.

  2. As mentioned in this youtube video, the ivy libraries are not correctly deployed on GAE. The solution from the video is to

    • Export the project as a war file (which is actually a zip file with a different file extension).
    • Then take all libs from the /WEB-INF/lib folder of the archive and stuff them in the /war/WEB-INF/lib folder of your project.
      • You do not really need to do it with all jar files, only with the ones loaded trough Ivy. But it is just faster to take them all.
    • This has to be repeated if you add new stuff to the ivy file
  3. Now you can add your own code with the google map to the vaadin project.

  4. You should now be able to deploy this GAE.

  5. Optional : The push system used in Vaadin causes trouble (warnings in your logs) and it seems like it will not work anyway. You could try to disable it in ivy.xml from the start.

  6. After this, you should be able to add the jersey parts following the steps from the normal task. (Not tested yet)