GWT: Developing in hosted mode with php, json and XAMPP – Part 1

Posted on November 22, 2010


When developing using Eclipse GWT plugin and hosted mode, the html files (and java server resources) are served via the plugin jetty server. This makes it really quick and easy to get going with developing java server solutions, but it doesn’t play with php out of the box.
Thw GWT startup pages suggests deploying the gwt app to localserver, and running it there, but this breaks the beauty of being able to to develop php backend and gwt frontend on the same time.

Here’s how I got my setup working so that I can develop with GWT hosted mode served through a localhost php/XAMPP setup. In my setup, I’m using the following:

  • Eclipse 3.5 with PDT
  • GWT 2.1 SDK and Eclipse plugin

Serving GWT frontend in hosted mode from XAMPP localhost

In this example we are going to create a GWT project called GwtPhp.

1. Create a new GWT Web Application Project, but instead of using the default Eclipse workspace, make sure that you create it in the Xampp www root (for exampel D:\xampp\htdocs). Use a package path of your liking:

2. Replace the autogenerated application stub code (in this case with something simple, like this:

package se.cambiata.gwtphp.client;


public class GwtPhp implements EntryPoint {

	private Button btnTest = new Button("btnTest");

	public void onModuleLoad() {

		btnTest.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				GWT.log("Hello from GwtPhp");

3. Replace the project html ({project}/war/GwtPhp.html) to something of your liking (basically deleting the autogenerated unneeded stuf like divs and tables).

4. Testdebug in hosted mode by pressing debugbutton or using F11, and doubleclicking the address bar in the Development Mode eclipse view (on my machine
This executes the application in hosted mode using jetty server.
Pressing the button should display a “Hello from GwtPhp” message in the Development Mode panel log.

5. Now, we’re going to change the debug configuration for this project. Rightclick the eclipse project name in the package explorer (GwtPhp) and look for the Debug As > Debug Configurations… alternative. In the dialog box, select the GwtPhp item in the left tree, and open the Arguments tab.

Replace the program arguments with something like the following:

-noserver -remoteUI "${gwt_remote_ui_server_port}:${unique_id}"
-startupUrl http://localhost/GwtPhp/war/GwtPhp.html
-logLevel INFO -codeServerPort 9997
-war "D:\xampp\htdocs\GwtPhp\war" se.cambiata.gwtphp.GwtPhp

Make sure that the paths

correspond to your setup.

6. Save these settings by clicking on Debug button. Please note that the app isn’t runnable yet!

7. Now, we have to deploy the application once to the new location. (This only has to be done once!) Do this by clicking the red G bag icon (Gwt Compile Project), and then Compile button in the dialog. This builds the needed class files, javascript files etc in the new xampp location.

8. At this point, we should be able to testrun our app served from Xampp. Click the little arrow right of the debug button, and make sure to select the GwtPhp alternative (the one that we configured in point 5 above. This should display an address in the Development Mode panel, this time located on localhost:

Doubleclicking this address should open the browser pointing at localhost. and pressing the button should display the log message in the Development Mode panel.

At last, to clean things up a bit, you should be able to delete the redundant classes in the se.cambiata.gwtphp.shared and se.cambiata.gwtphp.server packages, as well as the and classes in the se.cambiata.gwtphp.client package. Also delete or comment away the <source path=’shared’/> tag in the se.cambiata.gwtphp.GwtPhp.gwt.xml file.

Thanks to Bogdan for pointing this solution out at StackOverflow!


Go to part 2 of this article

Posted in: Eclipse, GWT, java, PHP