Google App Engine

Using Static Files

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. We named our template file index.html, but this does not automatically make the file available at the URL /index.html.

But there are many cases where you 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. App Engine can serve specific files directly without you having to code your own handler.

Using Static Files

Edit guestbook/app.yaml and replace its contents with the following:

Run / Modifyapplication: your-app-id
version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /.*
  script: guestbook.application

libraries:
- name: webapp2
  version: latest
- 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 maps the remainder of the path to files in the stylesheets directory and, if an appropriate file is found, the contents of the file are returned to the client. All other URLs match the / path, and are handled by the application object in the guestbook module.

By default, App Engine serves static files using a MIME type based on the filename extension. For example, a file with a name ending in .css will be served with a MIME type of text/css. You can configure explicit MIME types by using the mime_type setting when configuring your handlers in app.yaml.

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 will for the appropriate paths. For more information on URL mapping and other options you can specify in app.yaml, see the app.yaml reference.

Note: You can specify http_headers settings in the static directory handler to supply custom headers in the responses returned by the handler. This is useful, for example, for including the `Access-Control-Allow-Origin` header required to support CORS. For more information, see the documentation for http_headers under Static file handlers.

Create the directory guestbook/stylesheets/. In this new directory, create a new file named main.css with the following contents:

Run / Modifybody {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #DDDDDD;
}

Finally, edit guestbook/index.html and insert the following lines between the <html> and <body> tags at the top:

Run / Modify  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
  </head>

Reload the page in your browser. The new version uses the stylesheet.

Next...

The time has come to reveal your finished application to the world.

Continue to Uploading Your Application.

Authentication required

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

Signing you in...

Google Developers needs your permission to do that.