In a previous tutorial we learned how to set up a simple Django project on the Google App Engine. We also saw how to use the App Engine datastore in place of the Django model API.
Now, let’s have a look at how to integrate Django templates. I will also show you how to serve static files.
Important: Remember to upgrade to the latest version of the App Engine SDK (version 1.0.1 at the time of writing). Otherwise, this tutorial will not work for you if you are developing on Windows.
Step 1: Set up an App Engine project—I am calling mine djangostatic. Follow steps 1 through 7 from the previous tutorial, remembering to substitute the project directory path and project name in main.py and app.yaml, and you will be all set.
Step 2: We will create a simple view that makes use of a template. First, let us define the template. Create a directory where you can store templates:
tmp/djangostatic$ cd djangostatic/main tmp/djangostatic/djangostatic/main$ mkdir -p templates/main
Then, add the file main.html to your new template directory:
# djangostatic/djangostatic/main/templates/main/main.html
<html>
<head>
<link href="/css/main.css" type="text/css"
rel="stylesheet"></link>
</head>
<body>
<p>
Hello world!
</p>
</body>
</html>
Note that the template refers to a style sheet file, main.css, which we will create later on.
Step 3: Django needs to be told where to search for template files: this is done in the settings.py file. The settings file is mostly pre-configured; we just have to modify the part that sets the TEMPLATE_DIRS variable:
# djangostatic/djangostatic/settings.py
import os
ROOT_PATH = os.path.dirname(__file__)
TEMPLATE_DIRS = (
ROOT_PATH + "/main/templates",
)
Step 4: After creating the template and telling Django where to find it, we have to write a view that does the actual rendering:
# djangostatic/djangostatic/main/views.py
from django.shortcuts import render_to_response
def main(request):
return render_to_response("main/main.html")
This tells Django to use the template main/main.html when rendering the response. The render_to_response method is a convenient shortcut for rendering a template and returning a response in one step.
Step 5: Finally, we need to map a URL to our view—this is done in urls.py:
# djangostatic/djangostatic/urls.py
from django.conf.urls.defaults import *
urlpatterns = patterns("",
(r"^$", "djangostatic.main.views.main"),
)
Start your development server (dev_appserver.py djangostatic), fire up your browser, and open the page at http://127.0.0.1:8080/. If you have done everything right so far, you should get the “hello world” message from the template.
Step 6: So what about the style sheet file, main.css? A style sheet file is a typical example of a static file. We use Django for rendering dynamic pages, so requests for static files should not be handled by the Django engine. In a regular Django application, we usually configure the web server to route such requests to a specific directory. On the App Engine, we achieve the same effect by adding a static handler to app.yaml:
# djangostatic/app.yaml application: djangostatic version: 1 runtime: python api_version: 1 handlers: - url: /css static_dir: media/css - url: /.* script: main.py
Here, we have added an entry that routes all requests beginning with /css to the directory media/css. Let us create this directory:
tmp/djangostatic$ mkdir -p media/css
Step 7: The link in our template specified /css/main.css as the full URL, so we have to add the main.css file to our new directory:
# djangostatic/media/css/main.css
p {
font-size: 48px;
}
Reload the application page; the browser should now be able to make use of the style sheet so that the message is displayed in a larger font. You can view the final results here.
Final notes: To learn more about how to serve static files on App Engine, have a look at the official documentation on how to configure an app. Django templates are very powerful—this tutorial has only shown you the absolute basics. Visit the Django template documentation to get the full story.
This is awesome! I cant wait to try it out.
Thank you for this good article Thomas!
Here is my translation of it to Russian:
http://konkursof.blogspot.com/2008/05/django-google-app-engine-css-js.html
Just went through your 1st and 2nd tutorial. Very helpful. Thanks.
Excellent tutorials. Much appreciated.
Thanks Thomas. Great tutorial…
Thanks for the two Google Apps Django tutorials! These helped me get back up to speed on Django almost painlessly!
Hi,
thanks for the two Google Apps Engine Django tutoriale, they are very useful for me!
I’ve a tiresome problem with my static url, the css url work in the home page but it doesn’t work in the other page because the link is not corret.
For example:
The css path in the homepage is:
localhost:8080/css/stile.css
the css path in the /find page is:
localhost:8080/find/css/stile.css
Any ideas?
Thanks
sdonk,
That’s peculiar. Maybe you are missing a leading slash somewhere, so that what should have been an absolute path becomes relative to some other path. Mind you, I haven’t tested the code since I wrote it more than a year ago, so there could be some incompatibilities with the latest version of Google App Engine.
Beside host static files, GAE also allow you to use your subdomain, see how it is done here:
http://www.ivankristianto.com/internet/tools/setup-your-google-app-engine-application-to-use-your-own-domain/1656/
Thank you very much Thomas. It worked liked a charm.