Learning objectives
- Learn how to build and deploy an App Engine app, a simple guestbook
Prerequisites
- Basic familiarity with Python
- PC, Mac, or Linux computer with Python 2.7 installed
- The Introduction to App Engine class
- App Engine 101 in Python : the predecessor to this class
Related
Amy Unruh, Dan Sanderson, Oct 2012
Google Developer Relations
Introduction
In addition to dynamically generated content, most web applications also need to serve static content, such as images, CSS stylesheets, or JavaScript files. In this lesson, we'll learn how to do this in App Engine.
Using Static Files
For efficiency, App Engine treats static files differently from application source and data files. You can use App Engine's static files feature to serve a CSS stylesheet for your application.
Unlike a traditional web hosting environment, Google App Engine does not serve files directly out of your application's source directory unless configured to do so. For example, we named our template file
index.html
, but this does not automatically make the file available at the URL
/index.html
. There are, of course, many cases where you
do
want to serve static files directly to the web browser. Images, CSS stylesheets, JavaScript code, movies and Flash animations are all typically stored with a web application and served directly to the browser. In your
app.yaml
file, you can tell App Engine to serve specific files directly, without having to code your own handler.
Edit
helloworld/app.yaml
and replace its contents with the following:
application: helloworld
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /stylesheets
static_dir: stylesheets
- url: /.*
script: main.app
libraries:
- name: jinja2
version: latest
The new
handlers
section defines two handlers for URLs. When App Engine receives a request with a URL beginning with
/stylesheets
, it will map the remainder of the path to files in the
stylesheets
directory and, if it finds an appropriate file, return the file's contents to the client. All other URLs match the
/
path, and are handled by the application object in the
helloworld
module.
By default, App Engine serves static files using a media type (often called a "MIME type") based on the filename extension. For example, a file with a name ending in
.css
will be served with a media type of
text/css
. You can configure explicit media types with additional options.
URL handler path patterns are tested in the order they appear in
app.yaml
, from top to bottom. In this case, the
/stylesheets
pattern will match before the
/.*
pattern for the appropriate paths. For more information on URL mapping and other options you can specify in
app.yaml
, see
Python Application Configuration
in the App Engine documentation.
Next, create the directory
helloworld/stylesheets
. In this new directory, create a new file named
main.css
with the following contents:
body {
font-family: Verdana, Helvetica, sans-serif;
background-color: #DDDDDD;
}
Finally, edit
helloworld/index.html
and insert the following lines just after the
<html>
line at the top:
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
</head>
Reload the page in your browser. You should see that the new version uses the stylesheet.
Summary and Review
In this lesson, you've learned how to configure your App Engine application to serve static files.
The time has come to reveal your finished application to the world. We'll do that in the next lesson .