Notice: Over the next few months, we're reorganizing the App Engine documentation site to make it easier to find content and better align with the rest of Google Cloud products. The same content will be available, but the navigation will now match the rest of the Cloud products. If you have feedback or questions as you navigate the site, click Send Feedback.

As PHP version 5.5 is no longer supported by the community, we strongly recommend new apps use the PHP 7+ runtime.

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:

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 helloworld.php script.

app.yaml

View on GitHub

runtime: php55
api_version: 1

handlers:
- 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.

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

stylesheets/main.css

View on GitHub
```
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.
To use the stylesheet in your application, the code sample inserts the following lines after the <html> line at the top:

helloworld.php

View on GitHub
```
<head>
  <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
</head>
```

< Prev Next >