Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Errai Getting Started Demo

This simple demo allows users to create contact entires for an address book. The user interface is designed using plain HTML5 and CSS. Errai UI enables the injection of UI fields into client-side Java classes as well as adding dynamic behaviour to these fields (such as event handlers). The demo also makes use of Errai's two-way data binding and page navigation modules. This can all be seen in (the markup for which can be found in contact-page.html).

Creating contacts is done using a simple JAX-RS endpoint and Errai's typesafe REST caller support (see the @EventHandler method for the submit button in Every time a new contact is created, the server will fire a CDI event which will be observed by all connected clients (new contacts will automatically appear in the displayed contact lists of all connected clients). The relevant code for firing and observing this CDI event can be found in and The filed contacts are persisted on the server.

This demo is designed to work with a full Java EE 7 server such as WildFly 10. Although it should be possible to craft a deployment of this demo to a simpler web server, it's much simpler to deploy to an EE 7 capable app server.


  • Maven 3 (run mvn --version on the command line to check)
  • An unzipped copy of WildFly 10 (Optional)

More detailed instructions can be found in our Setup Tutorial

Build and deploy (production mode)

To build a .war file and deploy it to the local running WildFly instance:

% mvn clean package wildfly:deploy

Once the above command has completed, you should be able to access the app at the following URL:


More detailed instructions can be found here

Code and Refresh (development mode)

Using GWT's Super Dev Mode, it is possible to instantly view changes to client-side code by simply refreshing the browser window.


Code and Refresh (development mode)

Using GWT's Super Dev Mode, it is possible to instantly view changes to client-side code simply by refreshing the browser window.

If you're using the Google Plugin for Eclipse or IntelliJ Ultimate Edition follow these instructions to start development mode.

Alternatively, you should be able to start the demo in development mode with this single command:

% mvn clean gwt:run

When the GWT Dev Mode window opens, press "Launch Default Browser" to start the app. You can now debug client-side code directly in the browser using source maps (make sure source maps are enabled in your browser). Alternatively, you can also configure a debug environment for Eclipse by installing

To debug server-side code, set up a remote debugger on port 8001. Then:

  • Run mvn clean gwt:debug
  • Start your remote debugger
  • Press "Launch Default Browser"

See our development guide here for more instructions on setting up dev mode and other details.


Here are some resources that may help if you encounter difficulties: