AppEngine app.yaml config for single page apps

Question

I'm having trouble with my app.yaml file - I have a single-page app (Angular2 app) on AppEngine with a python runtime, but the deep links aren't appropriately routed. Here's my app.yaml file:

runtime: python27
api_version: 1
threadsafe: true

skip_files:
- ^(.*/)?app\.yaml
- ^(.*/)?app\.yml
- ^(.*/)?#.*#
- ^(.*/)?.*~
- ^(.*/)?.*\.py[co]
- ^(.*/)?.*/RCS/.*
- ^(.*/)?\..*
- ^(.*/)?tests$
- ^(.*/)?test$
- ^test/(.*/)?
- ^COPYING.LESSER
- ^README\..*
- \.gitignore
- ^\.git/.*
- \.*\.lint$
- ^fabfile\.py
- ^testrunner\.py
- ^grunt\.js
- ^node_modules/(.*/)?
- ^src/(.*/)?
- ^e2e/(.*/)?

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

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

I get the following error when going directly to a deep link:

I'm assuming that the second handler is what's doing it, but how do I write my handlers to send everything to index.html except for assets? Here's my dist directory:

Answer 1

Ah yes, I had the same problem. Here's the app.yaml that I'm using for an Angular2 app on Appengine:

runtime: python27
api_version: 1
threadsafe: true

handlers:

- url: /api/.*
  script: main.app

# All files that can be compiled in angular. Luckily, they all have suffixes.
- url: /(.*\.(css|eot|gz|html|ico|js|map|png|svg|ttf|woff|woff2))
  static_files: ../client/dist/\1
  upload: ../client/dist/(.*\.(css|eot|gz|html|ico|js|map|png|svg|ttf|woff|woff2))

# Site root, plus anything else, like deep urls
# Make this be secure, otherwise oauth redirect won't work if they want to us with http://
- url: /.*
  static_files: ../client/dist/index.html
  upload: ../client/dist/index.html
  secure: always
  expiration: "15m"

libraries:
- name: webapp2
  version: "2.5.2"

To handle deep links, you need a catch-all rule at the end to always serve index.html . However, before that, you need a rule which maps all your static content, I'm doing mine by the presence of a suffix, but another way you could do it is by specifically naming all the files and directories that are your static assets.