Serving Static Files

This page shows you how to serve a CSS as a static file.

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. However, you might want to serve static files such as images, CSS, and JavaScript code, directly to the web browser. You can tell App Engine to serve specific files without creating your own handlers.

This page is part of a multi-page tutorial. To start from the beginning and see instructions for setting up, go to Creating a Guestbook.

Defining handlers

In the following code sample, two new handlers for URLs are defined in the app.yaml file:

  1. 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.

  2. All other URLs match the /.* path, and are handled by the helloworld.php script.

    runtime: php55
    api_version: 1
    - url: /stylesheets
      static_dir: stylesheets
    - url: /.*
      script: helloworld.php

URL handler path patterns are tested in the order they appear in app.yaml. 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.

Adding the stylesheet

In the following code sample, a CSS file is created and then added to the application.

  1. The code sample adds the following contents to main.css file in the helloworld/stylesheets directory:

    body {
      font-family: Verdana, Helvetica, sans-serif;
      background-color: #DDDDDD;

    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 the app.yaml configuration file.

  2. To use the stylesheet in your application, the code sample inserts the following lines after the <html> line at the top:

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

Monitor your resources on the go

Get the Google Cloud Console app to help you manage your projects.

Send feedback about...

App Engine standard environment for PHP