Thursday 8 March 2012

Run GWT samples from Eclipse

I'm documenting this here as it was a surprisingly awkward job to get the Google Web Toolkit samples running locally. First, install the GWT plugin for Eclipse.

Next check out and compile a local copy of the GWT source code. You'll need to fetch the main GWT source and the prerequisite tools.

    ~$ mkdir ~/gwt; cd ~/gwt
    ~/gwt$ svn checkout tools
    ~/gwt$ export GWT_TOOLS = `pwd`/tools
    ~/gwt$ svn checkout trunk
    ~/gwt$ cd trunk
    ~/gwt/trunk$ ant dist

This should produce a zip file trunk/build/dist/ We need to unzip this so that the GWT plugin in Eclipse can work with it.

    ~/gwt/trunk$ cd ..
    ~/gwt$ mkdir trunk-dist; cd trunk-dist
    ~/gwt/trunk-dist$ unzip ../trunk/build/dist/

Now it is ready to be configured in the Eclipse GWT plugin. Open your Eclipse preferences, navigate to Google → Web Toolkit, click the Add… button, browse to your new gwt-0-0-0 directory, and give it a name like GWT-TRUNK.

Eclipse Properties, GWT SDK

Now we are set up to run the trunk samples, but for some reason we still can't directly open them in Eclipse. A workaround I'm using is to create a new project with the Eclipse GWT plugin, then delete all of the files and copy in the ones from the sample you're trying to run. For example, to run the Showcase sample, do the following:

Create a new Web Application Project (the first entry in the "g" drop down menu in your toolbar). Call it samples-showcase, give it any package name, pick the GWT TRUNK SDK we set up earlier, deselect Use Google App Engine and Generate project sample code, then click Finish.

Eclipse GWT Create Project

This will create the samples-showcase directory in your workspace directory. Change to this directory, delete the folders it created, and copy in the folders from the Showcase sample:

    ~$ cd YOUR_WORKSPACE_DIR/samples-showcase
    samples-showcase$ rm -rf src war
    samples-showcase$ cp -R ~/gwt/trunk/samples/showcase/* .

Go back to Eclipse and Refresh your sample-showcase project. At this point you might get an error in Eclipse - a red X mark on the war/WEB-INF folder, and in the Problems panel you'll see the message "The GWT SDK JAR gwt-servlet.jar is missing in the WEB-INF/lib directory". Right-click this message and choose "Quick Fix" to get the following dialog box:

The GWT SDK JAR gwt-servlet.jar is missing in the WEB-INF/lib directory

Click Finish and it should be fixed.

You should now be able to run the sample (yay!). Right-click the samples-showcase project in the Package Explorer, choose Run As → Web Application, and the local URL should appear in your Development Mode view tab. Double click the URL to open it in your default browser, or right-click → Copy, and paste it into the URL bar of your preferred browser.