This tutorial is about how to setup a working dev environment with Magnolia 4.5.x and GWT 2.4.0.


When developing with Magnolia you might need to set up GWT dev mode in Eclipse, in particular if you need to work on the page editor module, which is basically responsible for injecting edit bars in a page for various components (areas, paragraphs, etc.) when in authoring mode. This module is entirely built with GWT and therefore we need to create a proper GWT dev launch configuration which enables us to debug our client code both locally and remotely (i.e. browser running on a machine other than the development one).

Local GWT dev mode

  • Open Run -> Debug Configurations... and create a new Java Application configuration. Browse to choose the magnolia-templating-editor project and DevMode main class. In case the latter is not on your classpath, you should add the gwt-dev-x.y.z.jar to it by clicking on the Classpath tab.

Now click on the Arguments tab and add the following program arguments.

-noserver -war src/main/resources/mgnl-resources/editor -startupUrl http://localhost:8080/magnolia-empty-webapp/somepage.html info.magnolia.templating.editor.PageEditor
  • Also increase your Java memory by adding these parameters into the JVM arguments (these values can actually be adjusted depending on the available physical memory on your dev machine).

    -Xmx512m -Xms256m
  • Then add the magnolia-templating-editor project and sources respectively in the Classpath and Source tabs. Be aware that GWT development mode looks for modules (and therefore client-side source) using the JVM's classpath. Therefore, make sure to add your source directories first in your classpath. See also's


In case you get errors concerning Magnolia custom widgets classes not being found and therefore not added to the widgetset, you might need to explicitly add the validation API jar to the Classpath.


  • Finally add gwt-dev-2.4.0.jar to the build path of magnolia-templating-editor project and ensure it is on top in your Java build path or you might incur in the following exception when starting your debug configuration

    java.lang.NoSuchFieldError: reportUnusedDeclaredThrownExceptionIncludeDocCommentReference 	


We're done. You can now launch your magnolia webapp in debug mode as usual and then start the newly created debug configuration. A GWT development mode window should show up, like in the picture below.


  • Click on Launch Default Browser to start your browser and go to the application. As you can see the gwt debug parameter gwt.codesvr= was automatically added to the URL. If this is your first time using that browser with the development mode server, it will prompt you to install the Google Web Toolkit Developer Plugin. Follow the instructions in the browser to install.
    At first the app will take a while to start up as GWT will recompile your widgetset. Once done, you will be able to set breakpoints in GWT code and debug the client part of your web application as if it were plain Java server side code.

Use Firefox 24

To make it short, GWT debugging with the above configuration doesn't work with other browsers and versions. So, if you want to spare yourself some miserable time, go ahead and install FF 24 from 

Remote GWT dev mode

If you need to debug client code running on a machine other than the one you're using for development (typical case, debugging your code on IE), then you need to set up your GWT configuration by only adding the -bindAddress parameter to it. For example

-noserver -bindAddress -war src/main/resources/mgnl-resources/editor -startupUrl http://localhost:8080/magnolia-empty-webapp/somepage.html info.magnolia.templating.editor.PageEditor

The argument to -bindAddress is your dev box IP. Now you should be able to start up your VirtualBox/Parallel instance or a real Windows box and connect to the server with a URL such as the following one. Once connected, you will be able to proceed testing and debugging as if the client code were running on your local dev machine.

GWTShell options

Google Web Toolkit 2.4.0

DevMode [-noserver] [-port port-number | "auto"] [-whitelist whitelist-string] [-blacklist blacklist-string] [-logdir directory] [-logLevel level] [-gen dir] [-bindAddress host-name-or-address] [-codeServerPort port-number | "auto"] [-server servletContainerLauncher[:args]] [-startupUrl url] [-war dir] [-deploy dir] [-extra dir] [-workDir dir] module[s] 


  -noserver        Prevents the embedded web server from running

  -port            Specifies the TCP port for the embedded web server (defaults to 8888)

  -whitelist       Allows the user to browse URLs that match the specified regexes (comma or space separated)

  -blacklist       Prevents the user browsing URLs that match the specified regexes (comma or space separated)

  -logdir          Logs to a file in the given directory, as well as graphically

  -logLevel        The level of logging detail: ERROR, WARN, INFO, TRACE, DEBUG, SPAM, or ALL

  -gen             Debugging: causes normally-transient generated types to be saved in the specified directory

  -bindAddress     Specifies the bind address for the code server and web server (defaults to

  -codeServerPort  Specifies the TCP port for the code server (defaults to 9997)

  -server          Specify a different embedded web server to run (must implement ServletContainerLauncher)

  -startupUrl      Automatically launches the specified URL

  -war             The directory into which deployable output files will be written (defaults to 'war')

  -deploy          The directory into which deployable but not servable output files will be written (defaults to 'WEB-INF/deploy' under the -war directory/jar, and may be the same as the -extra directory/jar)

  -extra           The directory into which extra files, not intended for deployment, will be written

  -workDir         The compiler's working directory for internal use (must be writeable; defaults to a system temp dir)


  module[s]        Specifies the name(s) of the module(s) to host