CODEWITHSUNDEEP
pythongoogle-app-engine
Sam R.
Sam R.

Reputation: 16450

Google App Engine service with static files

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?

Upvotes: 3

Views: 147

Answers (1)

Dan Cornilescu
Dan Cornilescu

Reputation: 39814

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>

Upvotes: 2

Related Questions