DIY - Working with GWT CodeServer, Tomcat and Chrome

Reference -

GWT SuperDevMode

Ray Cromwell Post - https://plus.google.com/110412141990454266397/posts/iqXo5AyHkyd

GWT Dev Guide - https://developers.google.com/web-toolkit/articles/superdevmode

SourceMaps

GWT and Sourcemaps - https://code.google.com/p/google-web-toolkit/wiki/SourceMaps

HTML5 Sourcemaps - http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Tools to Use

1. JAVA
2. GWT
3. Notepad
4. Apache Ant
5. Apache Tomcat
6. Chrome

Set Up

Local Directory Structure

D:\apps -> Installation of Java, Apache Tomcat, Eclipse, Apache Ant, GWT and Maven

D:\workspace -> eclipse workspace

JAVA

1. JAVA on Windows - http://www.java.com/en/download/help/windows_manual_download.xml
2. Download and Install Java SDK and JRE into D:\apps\Java

Configure JDK Destination Folder during Installation

  Configure JRE Destination Folder during Installation

 

Apache Tomcat

1. Download Apache tomcat binaries apache-tomcat-7.0.39.zip from here.
2. Extract the apache-tomcat-7.0.39 folder from apache-tomcat-7.0.39.zip into D:\apps\apache-tomcat-7.0.39

Apache ANT

1. Download Apache binaries apache-ant-1.9.0-bin.zip from here.
2. Extract the apache-ant-1.9.0 folder from apache-ant-1.9.0-bin.zip into D:\apps\apache-ant-1.9.

GWT

1. Download GWT Samples from here.  
2. Extract the gwt-2.5.1 folder from gwt-2.5.1.zip into D:\apps\gwt-2.5.1
3. Verify samples folder exists @  D:\apps\gwt-2.5.1\samples

Environment Variables

Set Up ANT_HOME, JAVA_HOME and CATALINA_HOME environment variables under “User variables”. Set Up PATH environment variables under “User variables” to allow ant, java and tomcat to be used from command prompt.

Control Panel -> System -> Advanced “tab” -> Environment Variables “button” ->  Environment Variable “window” -> User variables “section”

 

 

 

 

Build “hello” sample

cd D:\apps\gwt-2.5.1\samples\Hello

ant war

 

Deploy “hello” sample to tomcat.

copy Hello.war D:\apps\apache-tomcat-7.0.39\webapps

SET JAVA_OPTS=-Xms512m -Xmx1024m

SET CATALINA_OPTS=-Xms512m -Xmx1024m

catalina jpda run

Chrome 

1.Download and Install Chrome Web Browser from here https://www.google.com/intl/en/chrome/browser/
2.Launch Chrome Browser and Navigate to http://<machinename>:8080/Hello ( http://sachins:8080/Hello ) or  http://localhost:8080/Hello

 

Working with GWT SuperDevMod Code Server

1. Add a new folder workDir @ D:\apps\gwt-2.5.1\samples\Hello\
2. Add a new target to build.xml @ D:\apps\gwt-2.5.1\samples\Hello\build.xml
    <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>

Launch Code Server

ant codeserver

Browse Code Server

Launch Chrome Browser and Navigate to http://<machinename>:9876 ( http://sachins:9876) orhttp://localhost:9876  and ensure that you create bookmarks using the bookmarklets .

Launch Chrome Development Tools for Hello

1. Navigate to Hello application in browser @ http://sachins:8080/Hello.
2. Use F12 to launch Chrome Developer Tools.
3. Navigate to Source tab in the Tools and Observe the files. (There are no java files yet.)

Turn On Source Maps feature in Chrome

Launch bookmark 'Dev Mode On' and download the GWT Java source.
1. A popup with instruction is  displayed mentioning available gwt module in the page i.e hello. 
2. Click "compile" to fetch the source code java files for the hello gwt module.
3. The popup prompt displays a progress message 'Compiling hello'
4. The source code files are served from the Code Server.

 

Code Server pushes the GWT Java source code.

Navigate to code server command prompt. Notice the application recompile @ code server and files being pushed to the browser.You can see the GWT java files for Hello and internal GWT code. Navigate to the Hello.java in browser.

YES. YES. YES. 

Debugging GWT Code in browser.

1. Set debug points in Window.alert line in Hello.java code.
2. Click on "Click Me" button.
3. Browser pauses @ Java file debug point.

YESSSSSSSSSSSSSSSSSSSSSSSSSSSS. YeeeeHaaaa!!!! 

Picking up Code Changes from Code Server.

1. Edit Hello.java code using a Notepad.
2. Click on "Dev Mode On" and "Compile hello" again.
3. You can observe the Code Server in action again compiling and serving code.
4. Navigate to browser to see updated Hello.java file.