Updated 03-04-2013.

Below is a description of how you make your GWT client code interact with the Django server code. It was tested using GWT 2.4 and Django 1.4.0.

The short version

Set up your Django project according to the instructions in the Django tutorial here: https://docs.djangoproject.com/en/1.4/intro/tutorial01/. Compile the GWT project. The project’s war folder then contains the static files for the client side. Copy the war folder to the folder used for static files in the Django project. Use the .html file found in the GWT project’s war folder as the template for the index view in the Django project “(r’^$’,’Project.views.index’),”.

The following is optional, static files (css, HTML etc.) must still be copied: Set the compile path for the project to the war folder of the server by using the -war argument in the advanced tab of Eclipse’s Google->”GWT Compile” menu. E.g. -war “C:\Users\Anders\Documents\Programming\static\war”. See https://developers.google.com/web-toolkit/doc/2.4/DevGuideCompilingAndDebugging “Using my own server …” for more info.

The long version

1. Make sure your Django project is properly set up according the instructions here or in the Django tutorial (https://docs.djangoproject.com/en/1.4/intro/tutorial01/).

2. In the file “settings.py” of your Django project correct “STATICFILES_DIRS” to point to the project’s external static files folder (where you put images, .css files .js files etc.). You can choose this folder freely for your project, as long as you have user access to it. Use the full folder path i.e. “C:/Users/Anders/Documents/Programming/static”. You do not have to add this path if the static files are placed in the “static” folder of your Django app folder (static files are found automatically then). Also, ‘django.contrib.staticfiles’ should be added to INSTALLED_APPS in the Django project’s “settings.py” file.

3.1 To verify that all the static files have been found by Django, first open a terminal/cmd and navigate to the position of the Django project’s “manage.py” file. Then run the command “python manage.py collectstatic –-dry-run” in the a terminal/cmd. Answer yes to the overwrite question (no files will be altered because of the “–-dry-run”-command). Verify that Django finds all static files in the “static” folders.

3.2 You can also write “/static/OBJECT_PATH” after your localhost call to view the static files in the web browser (note: this will not allow you to show entire directories, only viewing files is possible). E.g. (using the GWT Stockwatcher tutorial project) http://127.0.0.1:8000/static/war/stockwatcher/stockwatcher.nocache.js

4. In the file “settings.py” of your Django project correct “TEMPLATE_DIRS” to point to the project’s template folder. You can choose this folder freely for your project, as long as you have user access to it. Below is one way to do it:

FILE_FOLDER = os.path.dirname(os.path.realpath(__file__))

TEMPLATE_DIRS = (
# Sets the template path to the Template directory in the directory above this file’s (settings.py’s) directory.
# For example, if the settings.py path is “C:\Documents and Settings\Anders\settings.py”
# the path below will become “C:\Documents and Settings\Templates”
os.path.join(os.path.dirname(FILE_FOLDER), ‘Templates’).replace(‘\\’,’/’),
)

Note that the code above assumes that your template folder is named “Templates” and that it is placed in the directory above the “settings.py” file.

5. Compile your GWT project. Once the compilation has completed, the GWT project’s war folder contains the static files for the client side. Copy the war folder to the folder used for static files in the Django project (see step number 2 and 3 above). Optionally, you could possibly use your GWT war folder directly as your Django “static” folder. See Tips and Tricks at the bottom of the page for more on this.

6. Copy the GWT project’s .html file (found in the war folder) into the Django project’s template folder (create the template folder at the TEMPLATE_DIRS path if it does not yet exist). Then modify the paths to all static objects in the .html file so that the paths begin with the string “{{ STATIC_URL }}” followed by the path to the object in question relative to the “static” folder wherein the object is placed. E.g. <script type=”text/javascript” language=”javascript” src=”{{ STATIC_URL }}war/stockwatcher/stockwatcher.nocache.js”></script>

7. Add a view called index to “urls.py” and “views.py”. The view MUST use RequestContext, otherwise STATIC_URL will be undefined when the .html file is evaluated.

In urls.py, do as follows, replacing APP_NAME with the correct name for your Django app:

urlpatterns = patterns(”,
(r’^$’,’APP_NAME.views.index’),
)

In views.py, do as follows, replacing YOUR_HTML_PAGE.html with the correct path to your GWT .html page relative to the Django project’s template directory:

def index(request):
# RequestContext is required since it sets the STATIC_URL variable which is used in the Template (YOUR_HTML_PAGE.html) for the HttpResponse
t = loader.get_template(‘YOUR_HTML_PAGE.html’)
c = RequestContext(request)
response = HttpResponse(t.render(c))
return response

8. Now it is time to try everything out! Run the Django project (“python manage.py runserver”) and enter the given url in a web browser. If the resulting page looks like it should then everything is working.

9. Using GWT Designer (https://developers.google.com/web-toolkit/tools/download-gwtdesigner) in your project can speed up the layout design aspect of creating your webpage quite a lot. If you want to use GWT Designer in your project, first install it in Eclipse (remember to run Eclipse as an administrator on Windows Vista/7 when installing). Then in the Eclipse Package Explorer right click on the java-file you want to edit and select “Open With”->”GWT Designer”.

10. When deploying (i.e. when you set DEBUG = False and TEMPLATE_DEBUG = False in settings.py), add a 404.html and 500.html file to the Django template root directory. Otherwise Django will generate an error when the debug templates are no longer accessible.

11. Also note that when DEBUG = False the static files (images, .css files .js files etc.) will not be available from the Django test server any longer, so the project must be moved to a real server (e.g. Apache or Jetty).

12. Done! For extra tips to speed up your development and solve issues that may arrise, see the section below.

Tips and Tricks

>   In retrospective it should be possible to use the GWT project’s war folder directly as the static folder. That way you will never have to transfer the static files of your GWT project to the “static” folder during development. Note that I haven’t tried this myself, but it should work. If not, the method described above, where you copy the static files, will work for sure.

>   You can use the Eclipse command ”Run/Debug as Web Application (running on external server)” to run the GWT developer mode directly on the Django server => no compilation and subsequent move of war folder necessary to change the client code (untill deployment, of course). When using this method, the Index page is assumed to be the GWT-client frontend (no calls will be made to get the index page, only subsequent calls will use the http://127.0.0.1:8000/CALL_URL urls). Note that this method doesn’t seem to work perfectly all the time, so if you get strange errors it may be worth compiling your GWT project and moving the result to the Django static folder manually.

To do this, change the standard URL by right clicking on your project folder, selecting “Run As”->”RunConfigurations”, and changing the URL in the GWT tab (make sure to select the correct configuration in the menu to the left first). Once Run/Debug has been clicked, enter the Django root URL when prompted by Eclipse (http://127.0.0.1:8000/) and make sure to UNTICK the “Select an HTML page” check-box (“Final URL” at the bottom of the window should only be http://127.0.0.1:8000/). Note: The Django server must be running at the same time, and it cannot be run from PyDev inside Eclipse at the same time as GWT runs (currently). Use the command “python manage.py runserver” from a terminal/cmd window located at the Django project root folder instead.

Also, when using this method make sure to reference static files for the client side (images for example) relative to the host page url. E.g. image = new Image(GWT.getHostPageBaseURL() + “static/war/Images/Smiley Surprise.png”);

>   When running your GWT page directly from Eclipse, using the GWT URL appendix (?gwt.codesvr=127.0.0.1:9997) in your browser is required in order for the development version of the code to be used. Otherwise, e.g. if http://127.0.0.1:8000/ is the URL you use, the code version in the static folder of the server is used, and no change will be done until compilation. However, adding “?gwt.codesvr=127.0.0.1:9997” to the end of the URL also means that the GWT entry point page will always be loaded, even when it normaly wouldn’t be. E.g. trying to access the erroneous URL http://127.0.0.1:8000/?gwt.codesvr=127.0.0.1:9997/#random_non_existent_page would still load the entry point page. If http://127.0.0.1:8000/#random_non_existent_page was used a 404 error would be the result instead.

>   Only use GWT regular expressions, e.g. (RegExp.compile(“SearchPage(/?|/.*)”).exec(requested_page) != null). Java’s String.matches(“RegExp”); sometimes give errors on Apache server.

>   Install the Firebug add-on for Firefox or use the Chrome Developer Tools in order to be able to see the full error messages from the Django server. Do this by activating Firebug/Developer Tools on your web page and (at least in Firebug) looking at the Console or Net tab once an error happens. Clicking on the HTML subtab of the error messages will display the Django debug errors as they usually look like when displayed in a browser.