One of the interesting things about GWT is that it allows you to build your web application in Java. This has its pluses and minus, but generally this means that you can you reap all the benefits of a language with a developed tool chain (ie Eclipse). This may not seem like much for a small project (and might even be overkill), but for complex projects it can be extremely useful. It makes it easier to build, maintain, refactor, and test your product – which can become tricky when working with a big js code base.
With me so far? Want to give GWT a whril? Heres a few steps to get you started with a development environment. For the most part, these are just streamlined instructions from GWT’s Getting Started documentation. I prefer working with Eclipse, so these steps will show you how to get setup with it.
1.) Download Eclipse
If you don’t have Eclipse installed yet, head on over to the Eclipse Download page. As of this writing I’m using Eclipse 3.7 for Java Developers.
2.) Download and Install the GWT SDK + Plugin within Eclipse
Once Eclipse is setup, your next step is to download and install the GWT SDK. You can do this entirely within Eclipse using their “Install new Software” dialog.
Click Help –> Install new Software
Next, enter the site that matches your version of Eclipse.
Next, place checks next to “Google Plugin for Eclipse”, and the “Google Web Toolkit SDK” (You can download the others if you want – they can be useful if you intend to deploy your application to App Engine, but aren’t strictly needed)
Click Next and Finish the installation wizard. It will take a few minutes while Eclipse downloads the SDK and installs it. At the end, Eclipse will restart to finish the installation.
3.) Create an Empty GWT Project
Now that your environment is setup, it’s time to create a simply GWT application. In Eclipse, click on File –> New –> Web Application Project
In the new dialog uncheck “Use Google App Engine”, and check “Generate project sample code”.
With that, Eclipse should auto-generate a bare-bones GWT application for you. One thing to note is that it puts the sample code into 3 main packages:
4.) Run your application in Development Mode
When eclipse created your project, it should have setup a default run and debug configuration for you. To kick off your application, try run –> project_name
In a second or so, you should see “Development Mode” tab appear with a link that you can use to view your application in a browser. Go ahead and hit the link and you should see the application popup in your browser (you may be prompted to install a GWT development plugin first)
Protip: I recommend using Firefox here – the GWT plugin performs ~2x faster in Firefox than in Chrome due to the way the extension APIs are built for each.
In the early days of GWT you used to need to re-compile the application every time you wanted to see your changes. Theres no need to do that now – it just wastes precious time when your developing your application.
5.) Compile your Application
Right Click on your project –> Google –> GWT Compile
Within the new dialog, simply click “Compile”
You’ll see GWT work while a while while it does it’s magic: obfuscating, minimizing, prunning dead code… (aren’t you glad you weren’t running this every time you wanted to see a change?)
When done, you’ll see it output your completed compiled project in your war/ folder. Want to runthe finished product? Just open the root .html file in any browser. When it’s time to deploy, simply upload your .html and project/ folder to your web server.
Now that you have a bare-bones GWT development environment setup, you’re free to start building away!
Not sure how to start? Google has some decent documentation, though it can be sometimes be a bit daunting for a beginner. If you want something easier – I’m planning on adding some more tutorials on programming in GWT here. Feel free to add a ping in the comment section if interested!