21

I created an App Engine application. Till now, I only have a few HTML files to serve. What can I do to make App Engine serve the index.html file whenever someone visits http://example.appengine.com/ ?

Currently, my app.yaml file looks like this:

application: appname
version: 1
runtime: python
api_version: 1

handlers:

- url: /
  static_dir: static_files
User
  • 1,363
  • 2
  • 13
  • 23

5 Answers5

41

This should do what you need:

https://gist.github.com/873098

Explanation: In App Engine Python it's possible to use regular expressions as URL handlers in app.yaml and redirect all URLs to a hierarchy of static files.

Example app.yaml:

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 order to handle requests to URLs that don't end with a recognized type (.html, .png, etc.) or / you need to redirect those requests to URL + / so the index.html for that directory is served. I don't know of a way to do this inside the app.yaml, so I added a javascript redirector. This could also be done with a tiny python handler.

redirector.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script language="JavaScript">
      self.location=self.location + "/";
    </script>
  </head>
  <body>
  </body>
</html>
Calvin
  • 4,177
  • 1
  • 16
  • 17
  • Although this might have worked for the OP, but there are two correct, very concise and exact answers here, compared to which this is incorrect. This is not how this should be done. – 0xc0de Jan 15 '14 at 09:40
  • 1
    Nice explanation on https://gusclass.com/blog/2013/09/27/dead-simple-app-engine-static-hosting/ – coderman Apr 23 '14 at 02:36
  • I faced a problem with this approach and posted a question on stack overflow. http://stackoverflow.com/questions/41631414/how-can-i-use-bucket-storage-to-serve-static-files-on-google-flex-app-engine-env The requests for static files were hitting my nodejs servers (which means they are not using a CDN). – navalsaini Jan 13 '17 at 09:45
9

It could be done using (app.yaml):

handlers:
- url: /appurl
  script: myapp.app

- url: /(.+)
  static_files: staticdir/\1
  upload: staticdir/(.*)

- url: /
  static_files: staticdir/index.html
  upload: staticdir/index.html
Ed Randall
  • 6,887
  • 2
  • 50
  • 45
9

If you're trying to map / to index.html:

handlers:
- url: /
  upload: folderpath/index.html
  static_files: folderpath/index.html

the url: will match on a path and supports regex.

- url: /images
  static_dir: static_files/images

So if your image file is stored at static_files/images/picture.jpg use this:

<img src="/images/picture.jpg" />
hyperslug
  • 3,473
  • 1
  • 28
  • 29
2

Here is app.yaml for how I got a site generated by Jekyll to work: 

runtime: python27
api_version: 1
threadsafe: true


handlers:
- url: /
  static_files: _site/index.html
  upload: _site/index.html

- url: /assets
  static_dir: _site/assets



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

- url: /(.*)
  static_files: _site/\1
  upload: _site/(.*)

- url: /.*
  static_dir: _site
Darian Hickman
  • 853
  • 10
  • 26
1

In WEB-INF/web.xml put:

  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
leblonk
  • 187
  • 8