Ok I finally have this figured out.
First off, if you aren't familiar with the way GAE handles templating... it's a bit different than you would expect, but a pillar of getting this to work correctly.
This is what you want at the bottom of your app.yaml
- url: /
static_files: dist/index.html
upload: dist/index.html
expiration: "15m"
- url: /.*
script: main.app
libraries:
- name: webapp2
version: latest
- name: jinja2
version: latest
A static route to the homepage is fine, but everything else needs to route to the python script
Note: One of my original mistakes was that in my app.yaml, in the section where I was declaring static mimetypes, I had a pattern that was defining html files which had an effect on this issue - make sure you aren't doing that
In main.py, you want this
import os
import webapp2
import jinja2
jinja_environment = jinja2.Environment(loader=jinja2.FileSystemLoader('dist'), extensions=['jinja2.ext.autoescape'], autoescape=True)
class mainHandler(webapp2.RequestHandler):
def get(self):
section = self.request.path_qs
filePath = section+'/index.html'
#
if self.request.url.endswith('/'):
self.redirect(section.rstrip('/'))
elif self.request.url.endswith('/index.html'):
self.redirect(section.rstrip('/index.html'))
else:
template = jinja_environment.get_template(filePath)
self.response.out.write(template.render())
def errorHandler404 (request, response, exception):
template = jinja_environment.get_template('error/404/index.html')
response.out.write(template.render())
response.set_status(404)
def errorHandler500(request, response, exception):
template = jinja_environment.get_template('error/500/index.html')
response.out.write(template.render())
response.set_status(500)
app = webapp2.WSGIApplication([
('/.*', mainHandler)
], debug=False)
app.error_handlers[404] = errorHandler404
app.error_handlers[500] = errorHandler500
The end result is that you get routes that resolve as expected to your static files, with some checks compensate for an extra slash or a direct index.html request
Things to note:
- In my app, "dist" is my build folder located in the root of the project. That may not be the case for you so where you see "dist" reference the name of your own build folder and its correct path
- If you are having issues setting this up, there is a good chance that something in your app.yaml is disrupting the catch-all from routing correctly. Jinja cannot use files in a directory for templating if they are also being identified as static files. Go through your app.yaml and debug the issue.