Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)



Using Static Files

Learning objectives
  • Learn how to build and deploy an App Engine app, a simple guestbook
Prerequisites
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 .

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.