Configure Google App Engine yaml file to handle 404 Error

Question

After the deployment of my application on Google App Engine every things works like a charm , I can access all pages but when I refresh I receive a 404 error

Example : when refreching https://my-app...appspot.com/create-ad throw 404 not found

I tried Angular 6 routes not found on Google App Engine and How to configure Google App Engine yaml file to handle 404 Error but same result

This on my app.yml

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html
- url: /
  static_dir: dist
- url: /.*
  static_files: dist/index.html
  upload: dist/index.html

skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?

and also tried this app.yml config to redirect all url to index.html

runtime: python27
api_version: 1
threadsafe: false
service: frontend-accept

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

- url: /
  static_dir: dist

- url: /.*
  script: main.py

skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?

this is my main.py

import webapp2
app = webapp2.WSGIApplication()

class RedirectToHome(webapp2.RequestHandler):
    def get(self, path):
        self.redirect('/dist/index.html')


routes = [
    RedirectRoute('/<path:.*>', RedirectToHome),
]

for r in routes:
    app.router.add(r)

But always get 404 when refreshing the page

Any help? Thanks

Answer 1

finally the solution was to configure the app.yml properly

runtime: python27
api_version: 1
threadsafe: true
skip_files:
- ^(?!dist)  # Skip any files not in the dist folder

handlers:
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js\.map)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

- url: /(styles\.[a-z0-9]+\.css)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

- url: /((?:assets|docs)/.*|favicon\.ico)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

- url: /(manifest\.json|ngsw\.json|ngsw-worker\.js|safety-worker\.js|worker-basic\.min\.js|ngsw_worker\.es6\.js\.map)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

- url: /(.*\.woff)
  mime_type: application/x-font-woff
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

- url: /.*
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/index.html
  upload: dist/browser/index\.html
  http_headers:
    Strict-Transport-Security: max-age=31536000; includeSubDomains
    X-Frame-Options: DENY