GWT Super Development Mode issue while loading the application

Question

I have installed the GWT SDK version as 2.8.1. I am able to run the application in GWT with Jersy. But, when I try to run the application in GWT Development mode(Super), URL is generating like http://127.0.0.1:9876. When I place this URL in browser not loading the expected UI page. I am getting the page like,

When I click on Dev Mode On button, I am getting this page.

Even I clicked on module name (gwtsample), then I am getting the page like below,

I have even added the GWT extension in browser level and tried the same. But, still no luck.

Instead of trying with the eclipse downloaded GWT SDK, I have externally downloaded the same version of GWT SDK and applied in the Project Properties > GWT > General Settings. Still, facing the same issue only.

I have observed one more thing is, in project facets GWT version is showing like 1.0 where originally I am using 2.8.1 version of SDK. My project is configured with Maven.

I have even gone through multiple questions and solutions which are mentioned in stackoverflow as well as other websites, still, no solution found.

Links which I referred was,

GWT Super Dev Mode

Debugging in GWT Super Dev Mode?

GWT Super Dev mode and in production

some other as well...

Answer 1

You have to compile your GWT application and host in a webserver. Then navigate to this webserver with your browser. And finally press the DevModeOn bookmarklet to switch to superdevmode.

1. Drag the bookmarklets (Dev mode on/off) to your bookmarks bar
2. Compile your gwtsample project into a war
3. Deploy the war into a webserver like tomcat or jetty
4. Take your browser (Chrome highly recommended for GWT debugging) and navigate to your installation : for example http://localhost:8080/gwtsample
5. Now you are just seeing your compiled version in the browser
6. Next hit the "Dev mode on" bookmarklet.
7. You will see a message in the browser that compilation is taking place
8. Now you are in SuperDevMode
9. Change something in your code
10. Hit F5 in the browser. Now a recompile will happen and you will see your changes

You can always hit "Dev mode off" to switch off superdevmode. Now you will just see your original compiled application.

Extra : if you are using Eclipse I highly recommend using the branflake plugin : https://github.com/gwt-plugins/gwt-eclipse-plugin

He has some great videos of how to use it : https://www.youtube.com/watch?v=DU7ZQVLR5Zo&list=PLBbgqtDgdc_TqzA-qXrjgTFMC_6DKAQyT

This way you don't even need to compile and host in some webserver as you can run with an embedded Jetty webserver.

Answer 2

You need a HTTP server to serve your HTML host page and webapp (Tomcat, Jetty, Wildfly, Apache+PHP, Rails, choose whatever you need).

Then, launch GWT's CodeServer with -launcherDir pointing to where your webapp lives. It will create a *.nocache.js specific for SuperDevMode, possibly overwriting your production one.

Now, load your webapp as usual from the web server, the specific *.nocache.js will compile your sources on the fly.

If you can live with a simple servlet container, then DevMode (instead of CodeServer) will do all the above setup automatically: use -war instead of -launcherDir.

You shouldn't need to open the CodeServer URL (on port 9876 by default) or use the bookmarklets with any recent GWT version, starting with 2.7.