Getting started with GWT, Maven and Eclipse

In this post, we're going to take a look at how we can work with GWT and Maven when using Eclipse's Integrated Development Environment (IDE).

In this post, we'll:

1. Install the gwt-maven-plugin
2. Generate a skeleton project using the gwt-maven-plugin archetype
3. Enable the Google Plugin for Eclipse
4. Test the application in development mode

Prerequisites

You will need a Java SDK (version 1.6 or later), the Eclipse IDE for Java EE Developers (Helios version 3.6.2 or later) and Maven (version 2.2.1).

I started with a fresh install of Eclipse and followed these recommendations when updating "eclipse.ini":

-startup
plugins/org.eclipse.equinox.launcher_1.1.1.R36x_v20101122_1400.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.2.R36x_v20101222
-product
org.eclipse.epp.package.jee.product
-showlocation
-showsplash
--launcher.defaultAction
openFile
-vm
C:/tools/java/jdk-1.6.0_26/bin
-vmargs
-Dosgi.requiredJavaVersion=1.6
-Declipse.p2.unsignedPolicy=allow
-Xms128m
-Xmx512m
-Xss4m
-XX:PermSize=128m
-XX:MaxPermSize=512m
-XX:CompileThreshold=5
-XX:MaxGCPauseMillis=10
-XX:MaxHeapFreeRatio=70
-XX:+CMSIncrementalPacing
-XX:+UnlockExperimentalVMOptions
-XX:+UseG1GC
-XX:+UseFastAccessorMethods

Note: gwt-maven is deprecated/discontinued. For more information please refer to the gwt-maven wiki.

1. Install the gwt-maven-plugin

Before we can install the gwt-maven-plugin we must first install the Eclipse Web Tools Platform (WTP). In Eclipse choose "Help -> Install New Software..." and paste the update site URL http://download.eclipse.org/webtools/repository/helios/ into the field named "Work with:" then press the Enter key.

Pressing Enter should cause Eclipse to update the list of available plugins:

Select the latest version of the Web Tools Platform (e.g. 3.2.4) click Next and then follow the prompts. When the download has finished and the installation is complete make sure you restart Eclipse.

The gwt-maven-plugin has a dependency on the Zest Visualization Toolkit so we also need to install the GEF SDK. The update site for the GEF SDK is http://download.eclipse.org/tools/gef/updates/releases. As before, paste the update site URL into the field named "Work with:" then press the Enter key.

Select the latest version of the GEF SDK (e.g. 3.6.2) click Next and then follow the prompts. When the download has finished and the installation is complete make sure you restart Eclipse.

Now we can install the gwt-maven-plugin from codehaus.org. As before, choose "Help -> Install New Software..." and paste the update site URL http://m2eclipse.sonatype.org/sites/m2e into the field named "Work with:" then press the Enter key.

Pressing Enter should cause Eclipse to update the list of available plugins:

Select the Maven Integration for Eclipse plugin click Next and then follow the prompts. When the download has finished and the installation is complete make sure you restart Eclipse.

We also need one more plugin, the Maven Integration for Eclipse WTP plugin. The update site for the Maven Integration for Eclipse WTP plugin is http://m2eclipse.sonatype.org/sites/m2e-extras. As before, paste the update site URL into the field named "Work with:" then press the Enter key.

Select the Maven Integration for Eclipse WTP plugin click Next and then follow the prompts. When the download has finished and the installation is complete make sure you restart Eclipse.

And because we started with a fresh install of Eclipse we also need the Google Plugin for Eclipse. The update site for the Google Plugin for Eclipse is http://dl.google.com/eclipse/plugin/3.6. As before, paste the update site URL into the field named "Work with:" then press the Enter key.

Select the Google Plugin for Eclipse 3.6 click Next and then follow the prompts. When the download has finished and the installation is complete make sure you restart Eclipse.

Your list of "Available Software Sites" should now look something like the following:

You might also need to let Eclipse know about your exisitng Maven installations:

2. Generate a skeleton project using the gwt-maven-plugin archetype

Right-click in the Project Explorer and choose "New -> Project...":

Then choose "Maven -> Maven Project" and click the "Next" button:

Choose a Workspace for the new Maven project and then click the "Next" button:

Select the "gwt-maven-plugin" archetype from org.codehaus.mojo and and then click the "Next" button:

Enter the details (known as the Maven coordinates) for the new project and then click the "Finish" button. Unfortunately, there are some issues with the project skeleton that is generated.

I also tried running Maven from the command line:

mvn archetype:generate -DarchetypeRepository=https://nexus.codehaus.org/content/groups/snapshots-group/  
    -DarchetypeGroupId=org.codehaus.mojo 
    -DarchetypeArtifactId=gwt-maven-plugin 
    -DarchetypeVersion=2.1.1-SNAPSHOT 
    -DgroupId=au.com.uptick 
    -DartifactId=MyGwtMavenSampleApp 
    -Dversion=0.0.1-SNAPSHOT
    -Dpackage=au.com.uptick.gwt.maven.sample
    -Dmodule=MyGwtMavenSampleApp

I got around this problem by using webAppCreator:

webAppCreator -maven -out MyGwtMavenSampleApp au.com.uptick.gwt.maven.sample.MyGwtMavenSampleApp

And, then importing the project into Eclipse (e.g. choose File -> Import..." then "Maven -> Existing Maven Project"):

Note: If you run into any issues when importing a new project try deleting your local Maven repository (e.g. ~\.m2\repository) and repeating the steps.

3. Enable the Google Plugin for Eclipse

If you have an existing Maven project in Eclipse and want to enable Google Plugin for Eclipse (GPE) functionality then follow these steps.

In Eclipse, open your project's properties (e.g. right-click in the Project Explorer and choose "Properties"). Under Google | Web Application, check the "This project has a WAR directory" box and point it to your project's src/main/webapp directory. This is the standard WAR source folder for Maven Web projects. Be sure that the "Launch and deploy from this directory" box is NOT checked.

Under Google | Web Toolkit, select the version of the GWT SDK you're using.

Under Java Build Path, select the Order and Export tab and move all Maven dependencies to the BOTTOM. Otherwise, GPE will see the GWT SDKs from the Maven repository on the build path and complain that they are not valid. This is because GPE expects a specific SDK structure used to enable other tooling.

Also under Java Build Path, select the Source tab and ensure that the Build output directory is enabled and pointing to target/your-project-name/WEB-INF/classes.

Finally, and this is very important, the first time you launch your project using "Run As -> Web Application" (or Debug), you will be prompted to select the war directly. This is NOT src/main/webapp, but rather the WAR output folder. If you make a mistake, simply go to "Run -> Run Configurations..." and remove any old configurations for the project. GPE will then prompt you again the next time you try to "Run As -> Web Application".

4. Test the application in development mode

At this point, you should be able to compile and run the new project in GWT Development Mode. Right-click on the pom.xml in the Project Explorer and choose "Run As -> Maven Build..." and run the "gwt:run" goal:

The Maven Console shows the Maven output that normally appears on the console when running Maven from the command line. You can open the Console View by choosing "Window -> Show View -> Console" then click on the little arrow on the right hand side of the Open Console icon and select Maven Console.