GWT Boot Starters — Bootstrap a Simple GWT Web App

Dr. Lofi Dewanto
Apr 4 · 5 min read

Today 3rd. April 2021 I released the GWT Boot Starters 1.0.0 to Maven Central which is the first final version of GWT Boot Starters. In this short article I’ll show you how GWT Boot Starters can help us to build our GWT web apps easier and faster.

GWT Boot: Java on the Browser with GWT Transpiler

What is GWT (“gwit”, aka. Google Web Toolkit)?

GWT is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. It’s Open Source, completely free, and used by thousands of developers around the world since 2007. GWT offers a Java to JavaScript transpiler (main component), Java APIs, UI widgets, UI frameworks, development server, and some other utilities. In the mean time there are a lot of libraries built around the GWT transpiler, just see the Awesome GWT Library List.

To jump start you can take a look at the GWT Padlet. In this padlet I collect all intros, videos, articles, presentations around GWT and J2CL (the new Java to JavaScript transpiler, also from Google).

What are GWT Boot Starters?

One important point first: GWT Boot Starter is NOT an integration between Spring Boot and GWT!

GWT Boot Starters are a set of convenient dependency descriptors that you can include in your application. You get a one-stop-shop for all the GWT and related technology that you need without having to hunt through sample code and copy paste loads of dependency descriptors. For example, if you want to get started using GWT and Domino UI for your Material Design and Elemental2 just include the gwt-boot-starter-ui-domino dependency in your project, and you are good to go.

Let’s begin our simple journey building the first “Hello World” web app with the simplest GWT Boot Starters gwt-boot-starter (the basic libraries which come from GWT itself)! The source code can be found in this GitHub project gwt-boot-sample-basic.

Step 1 — Create a Maven Project

Just create a simple Maven Project. Add the parent project and the starter dependencies. The list of the starter dependencies can be found here. To be able to compile to JavaScript you need to add gwt-maven-plugin and add your GWT module name.

<parent>
<groupId>com.github.gwtboot</groupId>
<artifactId>gwt-boot-starter-parent</artifactId>
<version>VERSION</version>
</parent>
<dependencies>
<dependency>
<groupId>com.github.gwtboot</groupId>
<artifactId>gwt-boot-starter</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>net.ltgt.gwt.maven</groupId>
<artifactId>gwt-maven-plugin</artifactId>
<configuration>
<moduleName>hello.YourModule</moduleName>
<startupUrls>
<url>/basic/</url>
</startupUrls>
</configuration>
</plugin>
</plugins>
</build>

Step 2 — Create a GWT Module Descriptor module.gwt.xml

Create a GWT module descriptor at src/main directory. In this file you describe the EntryPoint class which is similar to Java Main class and method. Module rename-to=”basic” means that the JavaScript will be compiled to the script basic.nocache.js. This module inherits everything from the Starter module. The list of the starter modules can be found here. This JavaScript can be imported in the host HTML file on the next step.

<module rename-to="basic">
<inherits name="com.github.gwtboot.starter.Starter"/>
<entry-point class='hello.client.YourEntryPoint'/>
</module>

Step 3 — Create a Host HTML File where your JavaScript can run

In this HTML file, located at hello/public, your generated JavaScript will run. This JavaScript can access the HTML file. In this example the generated JavaScript will access the div with id=”helloButton”.

<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<title>Demo GWT Webapp</title>
<script type="text/javascript" language="javascript"
src="basic.nocache.js" async=""></script>
</head>
<body>
<div id="helloButton"/>
</body>
</html>

Step 4 — Create your Java Entry Point Main Class

The EntryPoint is the first class which will be executed (“Main method in Java app”). In this example it will exchange the “helloButton” with a Button.

package hello.client;import com.google.gwt.core.client.*;
import com.google.gwt.user.client.ui.*;
public class YourEntryPoint implements EntryPoint {
@Override
public void onModuleLoad() {
Button button = new Button("Click me");
button.addClickHandler(clickEvent -> {
Window.alert("Hello World!");
});
RootPanel.get("helloButton").add(button);
}
}

In gwt-boot-sample-basic you can take a look at the basic example in GWT.

Now you are ready to start your GWT basic sample app for the first time.

Starting GWT in DevMode (aka. Super DevMode)

The application gwt-boot-sample-basic uses integrated Jetty server from GWT to deliver the HTML host file. This can be done with other Servlet apps as well.

Step 1 — Run GWT DevMode to automatically compile the code

First generate the GWT Module Descriptor and then run the GWT Dev Mode in SuperDev mode to be able to compile the Java code to JavaScript code on reload in the web browser. In Maven you can run following command:

mvn gwt:generate-module gwt:devmode

You can just generate the module once and after that just run:

mvn gwt:devmode
GWT Development Mode UI After Running the Maven Command

Step 2 — Run the App in your Browser

Now you can copy&paste the “Copy to Clipboard” result of the GWT Development Mode UI above. Run it on:

http://localhost:8888/basic

Just reload your web app and GWT SuperDev mode will transpile your Java code to JavaScript on the fly. That’s it, now you can develop your web app with GWT incrementally and fast!

Step 3 — Debug the App in your Browser

You can debug the Java code on the browser with the help of source maps. In this example we use Google Chrome.

GWT Debugging With Chrome

Summary

In this short article we can see how GWT Boot Starters help to build GWT web apps faster. With the help of Maven we can easily bootstrap the development of GWT web apps just in few steps. With GWT Boot Starters we make the dependencies hell out of our project, just what Spring Boot Starters do to Spring Boot projects.

At the moment GWT Boot Starters don’t support automatic creation of web apps with a web app like Spring Initializr but a GWT Initializr which based on the GWT Boot Starters would be the next important step.

In the mean time, enjoy working with GWT and check out some information about GWT Boot and GWT Boot Starters:

Star Gazers

“If you want to master something, teach it.”

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store