Setting up a Dropwizard + Gwt:SuperDevMode project on OS X using Eclipse, Maven and GitHub

Until now, I’ve been using Gwt on App Engine, developing alone and using an old version of Firefox so I could continue using Gwt’s dev-mode. I’ve never used Maven before and it’s about time I figured out Superdevmode. Dropwizard will hopefully act as a suitable replacement for App Engine.

• Eclipse
• Gwt
• Google Plugin for Eclipse
• Maven
• Gwt Maven Plugin

I’m running OS X 10.9.4.

This document could do with a lot of work, but should be enough to get anyone off the ground.  My own project that’s using this is VeinToBrain whose pom.xml you maybe want to see. The code below here is all on GitHub at https://github.com/BrianHenryIE/GwtDropwizard/

Download Eclipse

I’ve been using the 64 bit version. I’m not sure of any reason to use 32 bit unless developing apps for 32 bit computers.

• For now, get 4.3 (Kepler) because the Google Plugin for Eclipse hasn’t been updated for 4.4 yet.
• There’s no installer, you just drag and drop the uncompressed archive into your Applications folder.
• For security reasons, OS X will prevent you from running Eclipse until you right-click it and select Open and then dismiss the security warning.

Download GPE

As of 14 July 2014, Eclipse 4.4 has been released but the Google Plugin for Eclipse hasn’t been updated for it, so we’re using Eclipse 4.3 for now. (TBH, I’m not 100% sure GPE is even needed.)

In Eclipse, go to Help, Install New Software, paste in the following download site and select the Google Plugin for Eclipse. Don’t worry about the Gwt SDK as it’s not offering the latest version and Maven should take care of it anyway.

https://dl.google.com/eclipse/plugin/4.3

If you get the following error after restarting (probably a fresh install of OS X and Eclipse) you’ll need to download a newer JDK. 1.7 is ideal for this project.

Go through the normal install process and then go to Eclipse/Preferences, Java/Installed JREs, press Search and select Java SE 7. Press edit and copy the location of JRE home. Also in Eclipse/Preferences go to Java/Compiler and set Compiler compliance level to 1.7.

Maven

Maven is a collaboration tool so required libraries are downloaded from the same source and the same build procedure (i.e. tests & compilation) is followed by each member of the team. It centres around a file, pom.xml — the project object model. When a new library is needed in the project, one member updates the pom and when everyone pulls that commit, everyone is immediately using the new library from the correct source (You can browse the jars Maven has downloaded in ~/.m2/repository/). Maven also provides Archetypes which are basically templates for projects. Download the binary .tar.gz (same as zip but better compression) from: http://maven.apache.org/download.cgi

In Finder menu Go, Go to Folder… /usr/local and make a new folder “apache-maven” and extract the archive in here. You’ll need admin permission.

Open a Terminal window, type nano ~/.bash_profile to edit the Bash profile (think autoexec) and add the following:

export M2_HOME=/usr/local/apache-maven/apache-maven-3.3.9
export M2=$M2_HOME/bin
export MAVEN_OPTS=”-Xms256m -Xmx512m”
export PATH=$M2:$PATH
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_77.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

Run source ~/.bash_profile to load the changes and then mvn -v to check everything’s working.

Add Maven support to Eclipse (M2Eclipse) by installing the following using Help/Install New Software… Work with:

http://download.eclipse.org/m2e-wtp/releases/

m2e – Maven integration for Eclipse
m2e-wtp – Maven Integration for WTP

If you select the latest version but you’re on Eclipse 4.3, it will notice and suggest the correct version for your environment.

GitHub

Set up a repository on GitHub. Tick Initialize this repository with a README.

Download the GUI client, copy to Applications, run, enter your GitHub username and password, Install Command Line Tools when asked. It will ask you to install some XCode tools (small enough).

Your new repository should appear in the app and you can Clone To Computer, making sure to put it in your Eclipse workspace. Then in Eclipse, New/Project, General/Java Project, Next, put the same name as the git cloned project and it will immediately recognise it as a a Git project.

Also in the GUI app, under Settings, Ignored files, copy the contents of my .gitignore file (and change line 21 to match your own project name) so you don’t end up uploading loads of crap to GitHub.

Once it’s done, right click project, Configure, Convert to Maven Project.

In Terminal, set your GitHub details.

# Set your username
$ git config –global user.name “Your Name Here”
# Set your email address
$ git config –global user.email “your_name@domain.com”

Dropwizard

Follow the Getting Started tutorial. Import it to Eclipse in using File/Import… then Maven/Existing Maven Projects

Once it’s working, we’ll change it so the REST application sits under server.com/api/* and the root server.com/ serves static files. Add a folder called gwt under src/main/resources where we’ll later configure the Gwt compiler to output to. Edit the main DropwizardApplication class so all our REST calls go to company.com/api/

public void run(…)

  environment.jersey().setUrlPattern(“/api/*”);

And so it serves the index.html from the root.

public void initialize(…)

  bootstrap.addBundle(new AssetsBundle(“/gwt”, “/”, “index.html”, “gwt”));

When we add Gwt to the project setup, the dependencies will clash (specifically javax.validation). To solve this, we create profiles in Maven. Wrap the <dependencies> and <build> sections with

<profiles>

  <profile>

    <id>server</id>

    …

  </profile>

</profiles>

Test rebuilding your project with mvn package -P server. You should be able to visit http://localhost:8080/api/hello-world?name=brian and json will be returned

{“id”:1,”content”:”Hello, brian!”}

In Eclipse, I also had to go into the project properties, then Maven and put client,server in the Active Maven Profiles section.

Gwt

Create a client profile in your pom for Gwt and add the core Gwt dependency (see: Maven GWT Plugin – Project organisation)

<dependencies>

  <dependency>

    <groupId>com.google.gwt</groupId>

    <artifactId>gwt-user</artifactId>

    <version>${gwt.version}</version>

    <scope>provided</scope>

  </dependency>

</dependencies>

It also needs to be added to the server profile so the compiler knows what your client .java files mean, but the javax.validation library Gwt provides clashes with the one that Dropwizard provides, so we exclude that:

<dependency>

  <groupId>com.google.gwt</groupId>

  <artifactId>gwt-user</artifactId>

  <version>${gwt.version}</version>

  <scope>provided</scope>

  <exclusions>

    <exclusion>

      <artifactId>validation-api</artifactId>

      <groupId>javax.validation</groupId>

    </exclusion>

  </exclusions>

</dependency>

You need an index.html page in your src/main/resources/gwt folder which will be served by Dropwizard and fetch Gwt’s compiled JavaScript. The key line in it is:

Configure your client profile’s build section in the pom to execute the Gwt Maven plugin (i.e. Gwt compiler) and to output to your static files folder:

<build>

  <plugins>

    <plugin>

      <groupId>org.codehaus.mojo</groupId>

      <artifactId>gwt–maven–plugin</artifactId>

      <version>${gwt.version}</version>

      <configuration>

        <webappDirectory>${basedir}/src/main/resources/gwt</webappDirectory>

      </configuration>

      <executions>

        <execution>

          <goals>

            <goal>compile</goal>

          </goals>

        </execution>

      </executions>

    </plugin>

  </plugins>

</build>

You need a ProjectName.gwt.xml in your project root package. This file tells the Gwt compiler which libraries to use, which packages contain code to be compiled and which class of yours contains the Entrypoint (Gwt’s public static void main(String[] args) ).

…

  <inherits name=’com.google.gwt.user.User’/>

  <entry-point class=’ie.brianhenry.gwtdropwizard.client.GwtDropwizardClient’/>

  <source path=’client’/>

  <source path=’shared’/>

…

The entrypoint class is a bit long to go into here. It’s an edited version of the Google Plugin for Eclipse sample code except it’s using RequestBuilder to GET json from your Dropwizard app rather than using Gwt RPC.

All client/server communication is asynchronous, so requests are given an AsyncCallback object that they call the .onSuccess method on once the request has completed.

When the data is returned, it’s just a http string of text, so we need to turn it into a Java object by using a Javascript overlay.

public class HelloWorld extends JavaScriptObject {

  protected HelloWorld() {}

  public final native String getId() /*-{

    return this.id;

  }-*/;

  public final native String getContent() /*-{

    return this.content;

  }-*/;

}

and parsing it with JsonUtils in our request’s onResponseReceived(…) method.

callback.onSuccess(JsonUtils.<HelloWorld>safeEval(response.getText()));

To get all this running, compile the Gwt code using mvn package -P client then recompile the server side to include the newly created Gwt files with mvn package -P server and run the server again, but just visit http://localhost:8080/ this time.

SuperDevMode

For continuous development without a complete recompile process, we can use Gwt’s SuperDevMode. First, add the following line to your ProjectName.gwt.xml

<add-linkername=”xsiframe”/>

Repackage client and server, run the server and in your project root folder run:

mvn gwt:run-codeserver -P client

The first time you run this, you’ll be told to visit the codeserver at http://localhost:9876/ to copy a bookmarklet to your bookmarks bar which you’ll then use to recompile the app after each small change.

More

What’s above should get you going but, as with any project, there’s bound to be more to configure.

When you begin testing, because the dependencies are split, you’ll have to configure Maven to only test the client code with the client dependencies, by putting this in the build/plugins section:

<plugin>

  <groupId>org.apache.maven.plugins</groupId>

  <artifactId>maven–surefire–plugin</artifactId>

  <version>2.17</version>

  <configuration>

    <includes>

      <include>**/Test/**/client/*</include>

    </includes>

  </configuration>

</plugin>

I’d like to have the run configurations set in Eclipse to possibly not need Terminal at all, but I haven’t looked into this at all yet.

Keep an eye on my actual project’s pom.xml which will be frequently updated (for a while!) and less likely to contain bugs.

Suggested edits to this blog are of course welcome! I’m no senior software developer yet, so appreciate any tips.

References

Various pages I read while learning all this myself.

http://www.badlogicgames.com/wordpress/?p=3073

http://ars-codia.raphaelbauer.com/2014/02/from-gwt-devmode-to-superdevmode-and.html

http://www.scottlogic.com/blog/2012/08/03/gwt-super-dev-mode-a-new-kind-of-hero.html

http://alexboyd.me/2013/08/gwt-source-maps/

http://stackoverflow.com/questions/11356714/getting-started-with-the-superdevmode

Share run configurations:

http://eclipsesnippets.blogspot.ie/2007/07/tip-creating-and-sharing-launch.html

http://pgt.de/2012/12/19/gpe-eclipse-and-maven-never-ending-story-done/

 

Nice article that covers a Dropwizard setup 101: http://kielczewski.eu/2013/04/developing-restful-web-services-using-dropwizard/

Advertisement