1.. _tutorials.gettingstarted.staticfiles:
2
3Using Static Files
4==================
5Unlike a traditional web hosting environment, Google App Engine does not serve
6files directly out of your application's source directory unless configured
7to do so. We named our template file ``index.html``, but this does not
8automatically make the file available at the URL ``/index.html``.
9
10But there are many cases where you want to serve static files directly to the
11web browser. Images, CSS stylesheets, JavaScript code, movies and Flash
12animations are all typically stored with a web application and served directly
13to the browser. You can tell App Engine to serve specific files directly
14without your having to code your own handler.
15
16
17Using Static Files
18------------------
19Edit ``helloworld/app.yaml`` and replace its contents with the following:
20
21.. code-block:: yaml
22
23   application: helloworld
24   version: 1
25   runtime: python27
26   api_version: 1
27   threadsafe: true
28
29   handlers:
30   - url: /stylesheets
31     static_dir: stylesheets
32
33   - url: /.*
34     script: helloworld.app
35
36The new ``handlers`` section defines two handlers for URLs. When App Engine
37receives a request with a URL beginning with ``/stylesheets``, it maps the
38remainder of the path to files in the stylesheets directory and, if an
39appropriate file is found, the contents of the file are returned to the client.
40All other URLs match the ``/`` path, and are handled by the ``helloworld.py``
41script.
42
43By default, App Engine serves static files using a MIME type based on the
44filename extension. For example, a file with a name ending in ``.css`` will be
45served with a MIME type of ``text/css``. You can configure explicit MIME types
46with additional options.
47
48URL handler path patterns are tested in the order they appear in ``app.yaml``,
49from top to bottom. In this case, the ``/stylesheets`` pattern will match
50before the ``/.*`` pattern will for the appropriate paths. For more information
51on URL mapping and other options you can specify in ``app.yaml``, see
52`the app.yaml reference <http://code.google.com/appengine/docs/python/config/appconfig.html>`_.
53
54Create the directory ``helloworld/stylesheets``. In this new directory, create
55a new file named ``main.css`` with the following contents:
56
57.. code-block:: css
58
59   body {
60     font-family: Verdana, Helvetica, sans-serif;
61     background-color: #DDDDDD;
62   }
63
64Finally, edit ``helloworld/index.html`` and insert the following lines just
65after the ``<html>`` line at the top:
66
67.. code-block:: html
68
69   <head>
70     <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
71   </head>
72
73Reload the page in your browser. The new version uses the stylesheet.
74
75
76Next...
77-------
78The time has come to reveal your finished application to the world.
79
80Continue to :ref:`tutorials.gettingstarted.uploading`.
81