Dead simple App Engine static hosting

I have no idea why, but I have had tons of trouble finding a simple example for hosting app engine. I have been working on a client-side only  site so all I wanted to do was host some static content. I spent way too long figuring it out, so… in this blog post, I’ll cover creating a basic statically hosted site.

Step 1: The App Engine content folder

Create a folder that you will host the files from and place one folder in it, titled static that will contain all of your App Engine files. Your folder structure will look like this:

/your_folder
/your_follder/static

Place all of the files you want hosted in the static folder.

Step 2: Create your app engine project

Go to the  Google app engine site and create an app engine project by clicking the Create Application button. Enter an application identifier,  magicalcats for example, and remember your identifier because you’ll need it for the next step.

Step 3: Author the magical app.yaml file

This is usually the first place where I get lost. Instead of bothering with manually doing this, consider the following example from Stack Overflow:

application: your-app-name-here
version: 1
runtime: python
api_version: 1

handlers:
- url: /(.*\.css)
  mime_type: text/css
  static_files: static/\1
  upload: static/(.*\.css)

- url: /(.*\.html)
  mime_type: text/html
  static_files: static/\1
  upload: static/(.*\.html)

- url: /(.*\.js)
  mime_type: text/javascript
  static_files: static/\1
  upload: static/(.*\.js)

- url: /(.*\.txt)
  mime_type: text/plain
  static_files: static/\1
  upload: static/(.*\.txt)

- url: /(.*\.xml)
  mime_type: application/xml
  static_files: static/\1
  upload: static/(.*\.xml)

# image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
  static_files: static/\1
  upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png))

# index files
- url: /(.+)/
  static_files: static/\1/index.html
  upload: static/(.+)/index.html

# redirect to 'url + /index.html' url.
- url: /(.+)
  static_files: static/redirector.html
  upload: static/redirector.html

# site root
- url: /
  static_files: static/index.html
  upload: static/index.html

In my particular case, all I would need to do here is replace your-app-name-here with magicalcats.

Step 4: Deploy!

The following command is the simplest form of the appcfg.py command to deploy your app:

appcfg.py -e youremail@domain.com update .

The hamster wheels  will spin up on your command prompt and if everything worked, BAM! Static hosted files on appspot under your_app_identifier.appspot.com, or, in my example, magicalcats.appspot.com.

Conclusions

Deploying static files to App Engine is stupid easy, it’s just tricky to navigate the documentation because it’s very much focused to covering EVERYTHING. Have fun and happy hacking!

See Also

Google App Engine: The Simplified Static Repo (Thanks Blaine!)