GWT Dev Mode

Once you have Spiffy UI or Hello Spiffy running on your local server you'll probably want to set up GWT Development Mode, formerly known as "Hosted Mode," which allows you to debug your Spiffy UI application. You must build the application using Ant or Maven at least once before running development mode, and the server must be running while you are using dev mode.

The easiest way to get Spiffy UI running in development mode is to use Eclipse. Start with the Google Plugin for Eclipse Quick Start page. Once you have the Google Plugin for Eclipse installed, you can import the project.

Debugging Spiffy UI applications

All of the Hello Spiffy applications and all applications created on SpiffyUI.org include Eclipse project files, so importing them is easy. Here's a quick video showing you how to create a new application, build it, import it, run dev mode, and set breakpoints:

Import

Ready to run it for yourself? Be sure you have already built the project once using Ant or Maven, then in the main menu bar select File > Import....

Select Existing Project Into Workspace and press next.

Browse and select the directory containing the .project file. Select the project and press Finish. You now may debug using the .launch configuration we've provided.

Configurations

From the main menu select Run > Debug configurations. Select the "dev mode" configuration under Web Application.

Spiffy UI projects have two dev modes: standard and embedded. The standard dev mode debugs the the client with a server running outside of Eclipse. The embedded mode hosts the server and the client within Eclipse. Embedded mode works with simple projects, but doesn't support more complex servers.

To run the standard dev mode select the debug profile with your projects name. Select the embedded development profile to use embedded mode. The rest of the development mode steps are the same with both modes.

On the Main tab, com.google.gwt.dev.DevMode is the main class.

On the Server tab, the "Run built-in server" checkbox is unselected because our applications launch an instance of Jetty.

On the GWT tab, the URL is http://localhost:8080.

Debug

Click the Debug button to begin debugging your application.

Once development mode has been launched there will be a URL in your Development Mode view. Open that URL in your browser.

If this is the first time you've run development mode, you'll be prompted to download the development mode plugin for your browser.

Follow the installation instructions to complete the installation. Restart your browser; you're now running development mode. You can set breakpoints and debug your application, or make minor modifications, and see them immediately upon browser refresh instead of having to rebuild and redeploy.