I am trying to set up a vue.js application with the vue router set in "history" mode. I also want to serve my back end APIs from the same app engine application. (e.g., if a user navigates to /some/path/in/the/app and refreshes the page or shares the link, the application will display the expected page)
here is my app.yaml:
runtime: python37
handlers:
- url: /api/.*
secure: always
script: auto
- url: /css
static_dir: www/css
- url: /js
static_dir: www/js
- url: /semantic
static_dir: www/semantic
- url: /img
static_dir: www/img
- url: /
static_files: www/index.html
upload: www/index.html
- url: /.*
static_files: www/index.html
upload: www/index.html
When I try to hit any of my api endpoints, the static index.html file is served instead of the response from the endpoint.
If the last route is omitted (url: /.*), then the api endpoints are served correctly, but the Vue.js app can only be entered from the "/" route and the deep links in the application do not work as expected
I am not looking to have a script in my application to serve the a static file.
note, this question is similar, but none of the answers addressed my situation:
AppEngine app.yaml config for single page apps
The trick was to follow a microservice architecture and split my application into two modules and define the routes in a dispatch.yaml file.
There is a sample project here:
App Engine Modules sample project
Related
I hosted a react app in app engine , and i have a lot of pictures in the public folder how are displayed correctly in my local machine , but when i deploy it in standard environnement , all the files are deployed , i checked the sources in url images and he serve them but they seems corrupted (when i download them) maybe i did something wrong in the configuration ? the only thing that i can acess is the favicon . this is what i get in source .
and my app.yaml is :
runtime: nodejs12
service: default
instance_class: F4_1G
handlers:
- url: /static
static_dir: build/static
- url: /assets
static_dir: build/assets
- url: /(.*\.(json|ico|js))$
static_files: build/\1
upload: build/.*\.(json|ico|js)$
- url: .*
static_files: build/index.html
upload: build/index.html
Your app.yaml does not have a handler for /media. So the GCP returns index.html when accessing viper8.JPG. Add handler for /media.
For each and every deploying our reactjs app on app engine, blank screen is displayed and We are receiving Static file referenced by handler not found: index.html as an error in the logs and after clearing the cache from browser side is resolving the above issue. Earlier we did not face this issue. Please refer the app.yaml file below
runtime: nodejs10
env_variables:
REACT_APP_ENV: "develope"
# service: ui
handlers:
- url: /static
static_dir: build/static
- url: /.*
secure: always
script: auto
You have to mention where is your index.html. On a full static react app, I have this app.yaml description
runtime: nodejs10
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
I haven't backend. I don't know if you have one. Provide more precision on your service, I could help you to customize the deployment.
I'm deploying a React app to Google App Engine. Currently I need to append .html or /index.html to the requests but I would like to avoid this so I have clean routes.
For example, I can load mywebsite.com/docs/page1.html and mywebsite.com/docs/page1/index.html but I want to load mywebsite.com/docs/page1. The react app actually builds both of these duplicate pages so it appears this is somewhat default behaviour. The routing is only "broken" like this when I build, it works fine in the dev server.
Directory structure
- build/my_docs/
- css/
- img/
- js/
- docs/
- page1.html
- page1/
- index.html
app.yaml
runtime: python3
service: docs
handlers:
- url: /
secure: always
redirect_http_response_code: 301
static_files: build/my_docs/index.html
upload: build/my_docs/index.html
- url: /css/(.*)
static_files: build/my_docs/css/\1
upload: build/my_docs/css/(.*)
- url: /img/(.*)
static_files: build/my_docs/img/\1
upload: build/my_docs/img/(.*)
- url: /js/(.*)
static_files: build/my_docs/s/\1
upload: build/my_docs/js/(.*)
- url: /(.*\.(json|ico|xml))$
static_files: build/my_docs/\1
upload: build/my_docs/.*\.(json|ico|xml)$
- url: /docs/(.*)
static_files: build/my_docs/docs/\1
upload: build/my_docs/docs/(.*).html
# Trying to append .html to non css/img/js requests but it doesn't work!
I also tried to deploy the sample Docusaurus project to GAE with no app.yaml handlers, and I see the same undesired routing (need to append .html).
Are you satisfied with serving these html files as static docs, or should they be templates which you can pass content to?
First, in your / handler, there is no such file build/my_docs/index.html
Your /docs/(.*) handler appears to be fine. You say it works in dev but not in build? That sounds like a routing problem inside React. Check your React routing. Also, make sure you're resetting your browser cache frequently, as you may be caching old React code.
** EDIT **
Let's look at this handler:
- url: /docs/(.*)
static_files: build/my_docs/docs/\1
upload: build/my_docs/docs/(.*).html
If you request at the url /docs/page1, it is going to try to load the static file from the directory build/my_docs/docs/page1. So far, so good, as that directory exists.
The problem comes in the next line. You are asking to serve the static file build/my_docs/docs/page1.html, which does not exist in the directory specified. Try one of these:
- url: /docs/(.*)
static_files: build/my_docs/docs/\1
upload: build/my_docs/docs/(.*)/index.html
or:
- url: /docs/(.*)
static_files: build/my_docs/docs
upload: build/my_docs/docs/(.*).html
I other words, there is a mismatch between the static_files directory you specify and the location of the file you're trying to serve.
This question already has answers here:
How do I setup routing for react in GAE? Directly routing to react-router-dom routes via URL fails in GAE on basic create-react-app?
(5 answers)
Closed 3 years ago.
Production ReactJS app, integrates Spotify Web Api (https://developer.spotify.com/documentation/web-api/reference-beta/) using Google App Engine: https://widget-dashboard-app.appspot.com/
All of the routes (/settings, /about, /contact) work as expected BUT when a user tries to log in to Spotify, the redirect path /settings/#access_token=[BIG-LONG-TOKEN]&token_type=Bearer&expires_in=3600 results in this error via GAE:
Error: Not Found
The requested URL /settings/ was not found on this server.
My first thought is that I have an issue in my app.yaml file:
# [START runtime]
runtime: python27
api_version: 1
threadsafe: true
# [END runtime]
# [START handlers]
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
- url: /.*
static_files: build/static/\1
upload: build/static/.*
- url: /settings/.*
static_files: build/static/\1
upload: build/static/.*
# [END handlers]
I've scoured the Interwebs in search of what might be the issue for two weeks. I've read all. the. docs.
Actual result should be: User logs in via Spotify's Web API, and is redirected back to https://widget-dashboard-app.appspot.com/settings/#access_token=[BIG-LONG-TOKEN]&token_type=Bearer&expires_in=3600 and their browser will begin playing music within a few seconds. This works in development.
As it's an SPA with your routing handled by the app, you need a catch-all route that lands on your main index.html. So it looks like your wildcard rule should be this:
url: /.*
static_files: build/index.html
upload: build/index.html
I don't think you'll need the /settings/ one
How do I set index.html for the default root web page?
application: dfischerdna version: 1
runtime: python api_version: 1
handlers:
- url: /
static_dir: static_files
This works great when the visitor types
http://dfischerdna.appspot.com/index.html
However I would like that when he types this, the index.html web page would be displayed.
http://dfischerdna.appspot.com/ -> goes to 404 page
This might do the trick for you:
handlers:
- url: /
static_files: path/to/index.html
upload: local/path/to/index.html
- url: /(.+)
static_files: path/to/\1
upload: local/path/to/(.+)
The first url section will match the root URL and serve path/to/index.html. The second will match any path other than the root path, and will serve the file located under path/to that the request URI matches. For the URL http://yourapp.appspot.com/index.html it will serve path/to/index.html, and for a URL like http://yourapp.appspot.com/foo/bar.html it will serve path/to/foo/bar.html.
The upload directive tells GAE which local files to upload to serve as static files in your app instance.