The question is very similar to How do I make Angular 2 routing work with App Engine on page refresh? but I do not have enough points to comment and it says not to put questions in answers.
Anyway same problem except it's a static hosted site on appspot with angular cli dist folder being used:
Project
|
+--dist
|
+--index.html
+--inline.js
+--inline.map
+--main.bundle.js
+--main.map
+--styles.bundle.js
+--styles.map
+--app.yaml
+--index.yaml
I tried changing my app.yaml to something similar to Dan's answer linked above but can't work it out? Here is the app.yaml file:
application:
version:
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /(.*\.js)
static_files: dist/\1
upload: dist/(.*\.js)
- url: /(.*\.map)
mime_type: application/octet-stream
static_files: dist/\1
upload: dist/(.*\.map)
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /(.*)
static_files: dist/\1
upload: dist/(.*)
Thanks
try this handlers:
- url: /(.*\.(gif|png|jpg|css|js)(|\.map))$
static_files: dist/\1
upload: dist/(.*)(|\.map)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
add file extensions in the first handler if your app uses more.
works for my app...
Related
I have a React + Flask application deployed on Google App Engine and mapped to my custom domain. I deployed a new version 3 days ago, it was working properly until today. On my custom domain, I cannot open some pages. I checked the console, apparently, the application were unable to load the js packages, and one of the error is
GET https://MY_DOMAIN/static/js/main.4eaaa8ad.chunk.js net :: ERR_ABORTED 404.
I also check the App Engine version instance, the MY_PROJECT.appsport.com is working properly.
I was wondering whether I made an error on the app.yaml file or I mapped the DNS incorrectly.
My app.yaml is this :
runtime: python37
env: standard
default_expiration: '5m'
entrypoint: gunicorn -b :$PORT main:app --timeout 150
instance_class: F4
automatic_scaling:
max_instances: 5
min_instances: 1
min_pending_latency: '5s'
target_cpu_utilization: 0.75
inbound_services:
- warmup
handlers:
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
script: auto
I have also noticed that I actually did not set the $PORT environment variable, could this be a potential problem?
Add the static_dir in handlers of your app.yaml to serve the static files of your application:
handlers:
- url: /static
static_dir: build/static/
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
script: auto
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
The reason of the 404 HTTP error code is due to this handlers:
- url:
static_dir: dist
As stated in the Google App Engine official documentation, using static_dir: dist causes that all URLs beginning with the / pattern are treated as paths to static files in the /dist directory, so for example every time you call the URL /whatever the application will look for the file /dist/whatever, since it doesn’t exist you get the 404 error.
I believe that the following code will work as you are expecting:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /dist/index.html
static_files: dist/index.html
upload: dist/index.html
- url: /.*
script: main.app
skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?
The handler for the / endpoint will serve the dist/index.html file, as well as the /dist/index.html endpoint.
Handlers are checked sequentially and if none of the above handlers have been called then any URL matching the pattern /.* ( which is all of them) will call the main.app script (this will basically override the 404 error message).
This script is redirecting you to the /dist/index.html endpoint, so this is the reason why it needs to be handled in the yaml file.
As a final point I had to import webapp2_extras.routes to use RedirectRoute in the main.py.
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
Built a personal blog using jekyll. Everything works well on local host. I do not want to deploy it on github. I prefer hosting on google app engine for some reasons.
I followed some instructions online and copied _site folder generated to my google app engine project.
this is how app.yaml looks like:
application: myblog
version: 1
runtime: python27
api_version: 1
threadsafe: yes
error_handlers:
- file: /404.html
handlers:
- url: /
static_files: _site/index.html
upload: _site/index.html
- url: /(.*)
static_files: _site/\1
upload: _site/(.*)
libraries:
- name: webapp2
version: "2.5.2"
when i run it locally on google app engine, only the index.html and some other files displays. others shows page not found. Is there anything I am not implementing properly ?
Well, I finally figure it out. It is a little trick anyway.
First in your _config.yaml file add:
permalink: /posts/:title/index.html
after that, run jekyll serve to generate the static file in _site folder. Copy the the post folder to _site/ in your app engine project.
Then, in your _config.yaml file change permalink to:
permalink: /posts/:title
run jekyll serve to generate the static file in _site. Copy the entire files generated excluding posts folder into _site/ into your app engine project.
then, make your appengine app.yaml look somewhat like this:
application: myblog
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /(.*\.js)
mime_type: text/javascript
static_files: _site/\1
upload: _site/(.*\.js)
- url: /(.*\.(jpg|png|ico))
static_files: _site/\1
upload: _site/(.*\.img)
- url: /(.*\.css)
mime_type: text/css
static_files: _site/\1
upload: _site/(.*\.css)
- url: /(.*\.(eot|svg|svgz|otf|ttf|woff|woff2))
static_files: _site/\1
upload: _site/(.*\.fonts)
- url: /
static_files: _site/index.html
upload: _site/index.html
- url: /(.+)/
static_files: _site/\1/index.html
upload: _site/(.+)/index.html
expiration: "15m"
- url: /(.+)
static_files: _site/\1/index.html
upload: _site/(.+)/index.html
expiration: "15m"
- url: /(.*)
static_files: _site/\1
upload: _site/(.*)
#- url: /((tags)|(archive)|(about)|(posts)|(fonts))/
libraries:
- name: webapp2
version: "2.5.2"
see example for clarification
I am trying to make an Angular 2 app running on App Engine Standard Environment. It works with the following app.yaml configuration when navigating within the app:
handlers:
- url: /api/.*
script: _go_app
- url: (.*)/
static_files: static\1/index.html
upload: static
- url: (.*)
static_files: static\1
upload: static
I can click on a link from / to /clients or /clients/234234 and it works fine.
However if I refresh the browser in a non base path e.g. http://myapp.appspot.com/clients/234234 then I get a 404 error. I guess I need to serve my index.html from all paths which is what I thought (.*)/ and (.*) would do.
How can I set up my handlers/app so I can use HTML5 routing and not let this happen?
I have a bunch of static files that need to be served so I added their mappings first. I also (most importantly) changed the way index.html was served:
handlers:
- url: /api/.*
script: _go_app
- url: /(.*\.svg)
static_files: static/\1
upload: static/(.*\.svg)
- url: /(.*\.js)
static_files: static/\1
upload: static/(.*\.js)
- url: /(.*\.map)
mime_type: application/octet-stream
static_files: static/\1
upload: static/(.*\.map)
- url: (.*)/
static_files: static/index.html
upload: static
- url: (.*)
static_files: static/index.html
upload: static
I cant seem to find this anywhere.
What I have is an appengine project that just serves html pages. But it only correctly loads files when the filename is 'exactly' correct.
I.e. mywebsite.com/lastproject/ loads perfectly
but mywebsite.com/lastproject does not load at all
I want the website to load correctly when the trailing / is left out. What am I missing???
Here is my app.yaml
application: websitewithsubfolder
version: 1
runtime: python
api_version: 1
handlers:
- url: (.*)/
static_files: static\1/index.html
upload: static/index.html
- url: /
static_dir: static
#Shay means the line should be:
- url: (.*)
That is a route that handles all URL requests you will not get any 404 errors, and all Requests are handled by a static index.html page. Your second route will not ever be handled as it is more specific and after your generic route.
You want the more specific routes above your catch all routes.
application: websitewithsubfolder
version: 1
runtime: python
api_version: 1
handlers:
- url: /static
static_dir: static
- url: /favicon.ico
static_files: static/images/favicon.ico
upload: static/images/favicon.ico
mime_type: image/vnd.microsoft.icon
- url: /robots.txt
static_files: robots.txt
upload: robots.txt
- url: /(.*\.(gif|png|jpg))
static_files: \1
upload: (.*\.(gif|png|jpg))
- url: /static/css
static_dir: static/css
- url: /static/js
static_dir: static/js
- url: (.*)
static_files: static/index.html
upload: static/index.html
The app.yaml file above is more in line with what you want.
I suggest you read the app.yaml docs which go over this in more detail.
Your first mapping in the yaml file tells the AppEngine "every url that ends with / should be mapped to ...". You don't have any mapping to something that doesn't ends with /.
this will map everything to a folder named static/html (untested let me know if it works)
- url: /.*
static_dir: static/html
mime_type: text/html