Getting started with the SuperDevMode

Question

I just want to run a simple app using superDevMode to know its benefits. The CodeServer is getting started successfully, but it is complaining there is no gwt modules to compile in the UI. I followed the following steps.

1. I started with GWT Default code which will be generated when we create the new project. I then converted it to Maven project.

2. I then modified my gwt.xml file to add the linker. Here is the copy my gwt.xml

   <module rename-to='superdevmode'>
   <inherits name='com.google.gwt.user.User' />
   <inherits name='com.google.gwt.user.theme.clean.Clean' />
   <entry-point class='superDevMode.client.SuperDevMode' />
   <add-linker name="xsiframe" />
   <set-configuration-property name="devModeRedirectEnabled"
   value="true" />
   </module>
   

3. I added the codeserver jar and set the proper classpath.

Codeserver is getting started successfully.

   The code server is ready.
   Next, visit: http://localhost:9876/

When I launch the UI am getting the following

But when I click on Dev Mode On, am getting the following

I don't know what I am doing wrong. My POM entry looks like this.

              <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>superDevMode</groupId>
<artifactId>superDevMode</artifactId>
<version>0.0.1-SNAPSHOT</version>
             </project>

Correct me if i am wrong.

Rottenstone

you probably figured it out or gave up by now, but I answered this and gave a full run down to anyone else who was struggling. in your case, you need to perform Step 3 - this means running two web servers (one is the superdevmode codeserver, the other serves up your typical project html files as if you were running a regular gwt app) – Richart

Answer 1

Update: v2.6 looks like it will have a better example launcher for superdevmode (see under superdevmode at http://www.gwtproject.org/release-notes.html#Release_Notes_2_6_0_RC1 ) 2.6 will be released any day now. I am using RC3 and it seems fine. More here:

---

While I appreciate the detail on how SuperDevMode works in Thomas' article, what is really needed is a step-by-step guide with some trouble shooting.

Here is a step-by-step. There are so many places to go wrong and the SuperDev mode page is not very specific. Hopefully this makes it clear:

1. Configure your module .gwt.xml file with the additional lines (you should place this at the bottom of you module definition, ie just before </module>):

<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<!-- enable source maps -->
<set-property name="compiler.useSourceMaps" value="true" />

2. Run the standard GWT compile process - in Eclipse this is "GWT Compile Project..." - this is what you typically do when you are deploying GWT code. No doubt you have a maven or ant command that does this as well.

3. Start a regular webserver that you'd normally use when developing your GWT code. For example, the one you used normal DevMode with. I'll call this one localhost:8888 - I'm going to presume the page you'd normally launch is index.html, so http://localhost:8888/index.html shows your GWT app. (you probably have ?gwt.codesvr=127.0.0.1:9997 in that URL normally)

4. Start the SuperDevMode server (see the bottom of this answer for two methods). You now have two webservers running - on different ports. So, lets say SuperDevMode is running on localhost:1234. At the bottom of this answer I posted some ways to start SuperDevMode.

5. Point your browser to the SuperDevMode server, so http://localhost:1234 . Follow the instructions to and copy the two shortcuts to your addressbar

6. Now, point your browser to the regular webserver, http://localhost:8888/index.html - do not add ?gwt.codesvr=127.0.0.1:9997 to the URL - that is only for NotSuper DevMode. (ie regular DevMode)

7. Click on the shortcut link "DevMode On" that you copied in Step 5. It should ask you to choose a module to compile, click the Compile button.

8. If you want sourcemaps (see your java source code in the Chrome script browser) you must turn it on in Chrome. In my version of Chrome (Ubuntu) there is a little gear on the bottom right of the Chrome console (Inspect Element, then look on the bottom right of the browser window). Click that and find "Enable Source Maps". Reload the page and it should now show you the Source codes.

---

Two ways to launch super dev mode:

From the command line

java -classpath $GWT_HOME/gwt-codeserver.jar:$GWT_HOME/gwt-dev.jar:$GWT_HOME/gwt-user.jar:app:./lib/*  com.google.gwt.dev.codeserver.CodeServer \
  -bindAddress 0.0.0.0 -port 1234 -src src -workDir work com.foo.MyModule

From an Eclipse Laucher

In Eclipse, create a new Java Application Launcher (not a Web Application launcher!) with the following configuration:

Main Class:

com.google.gwt.dev.codeserver.CodeServer

Program Arguments:

-src src -workDir ${workspace_loc:MyProject}/codeserver -port 1234 com.foo.MyModule

-workDir is optional

VM arguments ( These may be needed depending on the size of your project. If the superdevmode "Compile" button (in the browser) disappears immediately after you click and nothing seems to happen, it may be crashing because of insufficient memory)

-Xmx1024m -Xms512m

Classpath: add gwt-codeserver.jar, gwt-dev.jar and gwt-user.jar to the launch classpath (these jars are found in the GWT SDK installation directory).

Richart

Thats epic. Is there any chance you have similar step by step guide for multi-module maven gwt project? – Heartbeat

I don't know why, but same method did not work for me in 2.5.1, but it is perfectly working in 2.6.0. Just one more question, do I need to run both the servers always? i.e., regular server (web server) and super dev mode server (java application) ?. I just removing the normal dev mode server and kept super dev mode running, but application did not launch. What is the point in running 2 servers for the same application? – Rottenstone

you only run the super devmode server when developing. the reason it stops working when you killed the normal server is you need some webserver to dish up the index.html – Richart

Dude thank you so much. it worked for me using my maven plugins and everything :) – Cicatrix

Answer 2

I took a slightly different approach. I started with existing Hello project and then configured it to work in Super Dev Mode.

A. Build and Deploy war for the hello project into tomcat.

B. Add a target to the build.xml of Hello project.

<target name="codeserver" depends="javac" description="Run Code Server mode">
    <java failonerror="true" fork="true" classname="com.google.gwt.dev.codeserver.CodeServer">
        <classpath>
            <pathelement location="src"/>
            <path refid="project.class.path"/>
            <pathelement location="../../gwt-codeserver.jar" />
            <pathelement location="../../validation-api-1.0.0.GA.jar" />
            <pathelement location="../../validation-api-1.0.0.GA-sources.jar" />
        </classpath>
        <jvmarg value="-Xmx1024M"/>
        <arg value="-bindAddress"/>
        <arg value="0.0.0.0"/>
        <arg line="-port"/>
        <arg value="9876"/>
        <arg value="-workDir"/>
        <arg value="workDir"/>
        <arg line="-src"/>
        <arg value="src"/>
        <arg value="com.google.gwt.sample.hello.Hello"/>
    </java>
</target>

C. Run the code server using ant codeserver from command prompt.

D. Launch Browser and Navigate to http://localhost:9876/ Create the bookmarks

E. Launch Chrome Dev Tools (F12) and Enable SourceMaps.

F. Launch Browser and Navigate to http://localhost:8080/Hello

G. Click on "Dev Mode ON" bookmark when you are in page http://localhost:8080/Hello

H. Click on "Compile" button to instruct the code server to load the gwt source code to the browser as source maps.

I. Hurrah the java files are fetched and can be seen in source tab of the Chrome Development Console.

J. Find the Hello.java . Click on the line number to set Debug point @ Window.alert("Hello, AJAX"); .

K. Click on "Click Me" in the Hello World. The code stops at your Debug point in the java file in Chrome!!!!!!!! Hurray.

Reference with Screenshots - http://geekbybit.blogspot.in/2013/03/diy-working-with-gwt-codeserver-tomcat.html

Heartbeat

Answer 3

there is a really good explanation on how this works here: http://blog.ltgt.net/how-does-gwts-super-dev-mode-work/

you need to drag the booklets into your browser. Then start your application like normal. Open your app in the browser without the "?gwt.codesvr=127.0.0.1:9997" part. Now you can use the booklets to start the SuperDevMode.

Hope this helps.

Cachepot

I followed the documentation but still not able to launch the app. My settings are as shown above. If you pinpoint my mistake it would be helpful – Rottenstone

when you are clicking on the bookmark you are still one the codeserver site. you need to be on the site your webapp is running under. For me the stesps are: 1. start the codeserver 2. start the webapp 3. open the webapp in the browser (typically port 8888) 4. click the codeserver bookmark to do the quick compile – Cachepot

Answer 4

With multi-module maven gwt project you need to add sources locations (base project and module) in Run Configuration:

-src src/main/java/ -src ${workspace_loc:MyNewModule}/src/main/java/ com.foo.MyModule

Dissogeny