Google App Engine service with static files

Question

I have an app with a service with app.yaml file like below:

# app.yaml
handlers:
- url: /dist/(.+)
  static_files: dist/\1
  upload: dist/(.+)

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

And there is dispatch.yaml to add the service:

# dispatch.yaml
dispatch:
  - url: "*/apple/*"
    service: apple

But the apple service itself, is just a static html file with some javascript assets:

# apple.yaml
service: apple

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

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

The problem is, if I go to www.example.com/apple the main.js file which is referred to by index.html as <script type="text/javascript" src="/dist/main.js"></script> is not found and instead index.html is returned.

Refused to execute script from ' https://www.example.com/apple/dist/main.js ' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

But if I browse the apple service directly at https://apple-dot-example.appspot.com/ it works.

Obviously the problem is how the static fils are routed. Since browser makes the request to www.example.com/dist/main.js and the file is actually at www.example.com/apple/dist/main.js it's 404ed.

Even If I change the script to <script type="text/javascript" src="/apple/dist/main.js"></script> , it doesn't work.

How can I server multiple static directories when I have a service?

Answer 1

The problem is that the path you're requesting is actually /dist/main.js , which doesn't match the apple service dispatch rule pattern: */apple/* - so it gets routed to the default service.

To fix it you need to:

• update the patterns in the apple.yaml file (which BTW you should call apple to match your dispatch service name):

   # apple.yaml service: apple handlers: - url: /apple/dist/(.+) static_files: dist/\\1 upload: dist/(.+) - url: /.* static_files: dist/index.html upload: dist/index.html 

  Note that even if the last rule above can match anything it won't actually get requests without an */apple/* in the path because those won't make it to the apple service.

• refer to the files using the updated paths, so that the dispatcher can route them to the apple service:

   <script type="text/javascript" src="/apple/dist/main.js"></script>