Redirect all url of domain to index.html for app engine flex env deployed website

Question

I am starting to build my product website today. I followed some tutorials on web which teach how to deploy static website on Google App Engine. And it's successfully deployed.

However, when I tried to customize the URLs to the index.html, the index.html file is broken by directly point to the index.html location.

My successful website: Link Here

Failed situation: Link Here

My app.yaml file:

The different between two situations is just the last character "/" of the URL. I have no idea why the index.html will break with the "/". The redirect handler should be redirecting to the same file location...

---

Update:

After many times of testing. I found that the problem is about the runtime environment in app.yaml. My website work great when env: flex. And it breaks when env: (anything static other than flex) So, there's two way I can go:

1. use flex env. but I don't know how to redirect to index.html since I found that -handlers is not work in flex env after my trying.

2. Keep static env to route easily. But the problem is how to make the website keeps good.

Please help...

---

2nd Update

After rebuild and deploy everything. My website is work now. However, it's only works on https://koki-6hats.appspot.com/index.html

For other cases like:

https://koki-6hats.appspot.com/index

https://koki-6hats.appspot.com/

https://koki-6hats.appspot.com/shouldGoToIndex.html

is not worked. How can I config the routing rule to make sure all links above can redirect to index.html automatically?

---

3rd update

Thanks for Alex and GAEfans answer my question!

This is my current app.yaml:

runtime: python27
api_version: 1
threadsafe: true

default_expiration: "3m"

handlers:

- url: /(.*\.(appcache|manifest))
  mime_type: text/cache-manifest
  static_files: static/\1
  upload: static/(.*\.(appcache|manifest))

- url: /(.*\.atom)
  mime_type: application/atom+xml
  static_files: static/\1
  upload: static/(.*\.atom)

- url: /(.*\.crx)
  mime_type: application/x-chrome-extension
  static_files: static/\1
  upload: static/(.*\.crx)

- url: /(.*\.css)
  mime_type: text/css
  static_files: static/\1
  upload: static/(.*\.css)

- url: /(.*\.eot)
  mime_type: application/vnd.ms-fontobject
  static_files: static/\1
  upload: static/(.*\.eot)

- url: /(.*\.htc)
  mime_type: text/x-component
  static_files: static/\1
  upload: static/(.*\.htc)

- url: /(.*\.html)
  mime_type: text/html
  static_files: static/\1
  upload: static/(.*\.html)

- url: /(.*\.ico)
  mime_type: image/x-icon
  static_files: static/\1
  upload: static/(.*\.ico)

- url: /(.*\.js)
  mime_type: text/javascript
  static_files: static/\1
  upload: static/(.*\.js)

- url: /(.*\.json)
  mime_type: application/json
  static_files: static/\1
  upload: static/(.*\.json)

- url: /(.*\.m4v)
  mime_type: video/m4v
  static_files: static/\1
  upload: static/(.*\.m4v)

- url: /(.*\.mp4)
  mime_type: video/mp4
  static_files: static/\1
  upload: static/(.*\.mp4)

- url: /(.*\.(ogg|oga))
  mime_type: audio/ogg
  static_files: static/\1
  upload: static/(.*\.(ogg|oga))

- url: /(.*\.ogv)
  mime_type: video/ogg
  static_files: static/\1
  upload: static/(.*\.ogv)

- url: /(.*\.otf)
  mime_type: font/opentype
  static_files: static/\1
  upload: static/(.*\.otf)

- url: /(.*\.rss)
  mime_type: application/rss+xml
  static_files: static/\1
  upload: static/(.*\.rss)

- url: /(.*\.safariextz)
  mime_type: application/octet-stream
  static_files: static/\1
  upload: static/(.*\.safariextz)

- url: /(.*\.(svg|svgz))
  mime_type: images/svg+xml
  static_files: static/\1
  upload: static/(.*\.(svg|svgz))

- url: /(.*\.swf)
  mime_type: application/x-shockwave-flash
  static_files: static/\1
  upload: static/(.*\.swf)

- url: /(.*\.ttf)
  mime_type: font/truetype
  static_files: static/\1
  upload: static/(.*\.ttf)

- url: /(.*\.txt)
  mime_type: text/plain
  static_files: static/\1
  upload: static/(.*\.txt)

- url: /(.*\.unity3d)
  mime_type: application/vnd.unity
  static_files: static/\1
  upload: static/(.*\.unity3d)

- url: /(.*\.webm)
  mime_type: video/webm
  static_files: static/\1
  upload: static/(.*\.webm)

- url: /(.*\.webp)
  mime_type: image/webp
  static_files: static/\1
  upload: static/(.*\.webp)

- url: /(.*\.woff)
  mime_type: application/x-font-woff
  static_files: static/\1
  upload: static/(.*\.woff)

- url: /(.*\.xml)
  mime_type: application/xml
  static_files: static/\1
  upload: static/(.*\.xml)

- url: /(.*\.xpi)
  mime_type: application/x-xpinstall
  static_files: static/\1
  upload: static/(.*\.xpi)

# image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
  static_files: static/\1
  upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png))

# audio files
- url: /(.*\.(mid|midi|mp3|wav))
  static_files: static/\1
  upload: static/(.*\.(mid|midi|mp3|wav))  

# windows files
- url: /(.*\.(doc|exe|ppt|rtf|xls))
  static_files: static/\1
  upload: static/(.*\.(doc|exe|ppt|rtf|xls))

# compressed files
- url: /(.*\.(bz2|gz|rar|tar|tgz|zip))
  static_files: static/\1
  upload: static/(.*\.(bz2|gz|rar|tar|tgz|zip))

# index files
- url: /(.*)
  static_files: static/index.html
  upload: static/index.html

# site root
- url: /
  static_files: static/index.html
  upload: static/index.html

And this is my folder structure:

.root
  - app.yaml
  - static
    - index.html
    - favicon.ico
    - styles.html
    - php
      - sendMail.php
    - css
      - ...
    - js
      - ...
    - fonts
      - ...
    - image
      - ...

This build fixed the 2nd updates issue! However,

For other cases like:

https://koki-6hats.appspot.com/index/

https://koki-6hats.appspot.com/index/index.html

is still not worked.

---

My desire final output is for example:

Folder structure:

.root
  - app.yaml
  - static
    - index.html
    - favicon.ico
    - styles.html
    - php
      - sendMail.php
    - css
      - ...
    - js
      - ...
    - fonts
      - ...
    - image
      - ...
    - folderA
      - index.html
      - css, js, etc...
    - folderB
      - index.html
      - css, js, etc...

Url Relationship:

1. URL: http://domain/folderA/(anything_and_level_behind), output: Show folderA's index.html
2. URL: http://domain/folderB/(anything_and_level_behind), output: Show folderB's index.html
3. URL: http://domain/other_folder_have_no_index_html_inside/, output: Show static's index.html
4. URL: http://domain/anything(no_/_AtLast), output: Show static's index.html
5. URL: http://domain/anything/anything/anything/(and_so_on...), which 'anything' is not 'folderA' / 'folderB', output: Show static's index.html
6. Show static's index.html when not match above cases

---

Last update

Thanks for Alex & GAEfans help again.

Now the redirection is works perfectly. But it shows some warnings in the console of the deployed version.

Answer 1

How would the url handler ever get past line 17? (.*) means "zero or more characters". That means ANYTHING entered goes to index.html

The commented out lines are closer to what you want:

- url: /   # first test for root url
  static_files: 6Hats/index.html
  upload: 6Hats/index.html

- url: /(.*)   #everything else ends up here
  static_files: 6Hats/\1
  upload: 6Hats/(.*)

UPDATE:

I would put all of your static file directories in a static folder. Then use:

- url: /static
  static_dir: 6Hats/static

- url: /favicon.ico
  static_files: 6Hats/favicon.ico
  upload: 6Hats/favicon.ico

- url: /.*   #everything else after slash ends up here
  static_files: 6Hats/index.html
  upload: 6Hats/index.html

Change your urls for static files to format: /static/js/filename.js, /static/css/filename.css, etc.

If you lead with a catch-all pointing to index.html, that means all your calls to your static files (images, js, css) will also call index.html. Of course, that is a mess.

UPDATE 2:

If you use:

- url: .*   #everything else ends up here
  static_files: 6Hats/index.html
  upload: 6Hats/index.html

(without the slash), everything else should get caught there.

Answer 2

The problem is that app engine is now returning index.html for every request

For example if you go here: https://kokitang.com/6Hats/main.css you'll see that it still returns index.html

This is due line 17 in your app.yaml

Edit

Ok I think I understand what you are trying to do now.

The main issue with having every link route to index.html is that there ARE other files you need to load like main.css, main.js, etc.

So you just need to setup a special rule for them

handlers:

# images, css, js, etc
- url: /(.*\.(css|js|gif|png|jpg|jpeg))
  static_files: 6Hats/\1

# all other links load index.html
- url:/(.*)$
  static_files: 6Hats/index.html

2nd Edit

You need to change your resource links to be absolute instead of relative

<link rel="stylesheet" href="css/base.css">

needs to be

<link rel="stylesheet" href="/css/base.css">