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.
Related
So I'm trying to deploy my Hugo blog to google cloud app engine, but I'm having issue with the URL mapping,I have played with it a lot but nothing seem to work
The home page is working and I can see the the posts but when I click on a post I got error: Not Found message
app.yaml
env: standard
runtime: nodejs16
service: default
handlers:
- url: /
static_files: public/index.html
upload: public/index.html
- url: /posts
static_dir: public/posts
- url: /(.*)
static_files: public/\1
upload: public/(.*)
Files structure
website link: https://www.waelfadlallah.com/
Thank to NoCommandLine the issue is resolved, here is how my app.yaml looks like now
env: standard
runtime: nodejs16
service: default
handlers:
- url: /posts/(.+)/
static_files: public/posts/\1/index.html
upload: public/posts/(.+)/index.html
- url: /assets
static_dir: public/assets
- url: /
static_files: public/index.html
upload: public/index.html
See if this works....
Instead of using static_dir, try using static_files and have your handler like the example here. That example has (the sample below). See if you can modify it to suit your pattern
- url: /([^\.]+)([^/])
static_files: www/\1\2/index.html
upload: www/(.+)
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.
I know there are already several posts on this topic, but I did not get this thing to work with the recommended settings. When I generate and start my Nuxt static site locally with the following commands, everything works fine. Even when I refresh the page, the same route is displayed.
nuxt generate && nuxt start
When I deploy my dist folder to Google App Engine, the site seems to work like a charm. However, as soon if I hit the refresh button, a 404 is displayed. My app.yaml looks as follows:
---
runtime: python37
instance_class: F1
handlers:
- url: /
static_files: index.html
upload: index.html
secure: always
- url: /(.*)
static_files: \1
upload: (.*)
secure: always
Applicable nuxt.config.js settings:
ssr: true
target: 'static'
Managed to fix this in the app.yaml, but not 100% sure why this happened. It probably has to do with the "catch-all" handler on the end. Here is my working example:
---
runtime: python37
instance_class: F1
handlers:
- url: /(.*\..+)$
static_files: \1
upload: (.*\..+)$
- url: /.*
static_files: index.html
upload: index.html
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
I'm using webapp2 and python 2.7 on my app engine application. However, I'm having a problem with the url on app.yaml.
I have my static files inside a static/ directory, in the root of my path. So inside of static/ I have static/scripts/MyScript.js
When I set app.yaml like:
application: myapp
version: 1
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /.*
script: myapp.app
- url: /static
static_dir: static
libraries:
- name: webapp2
version: latest
In my HTML code, the js is called like:
<script src="static/scripts/Fuel.js"></script>
But, the file is not loaded, and I get a 404 error. (This problem happens also for .css files.)
However if I change the first url in app.yaml to:
handlers:
- url: /
script: myapp.app
The static files are loaded, but when I try calling the routes url in my app, like an url I call in a form to save some data on server, this route is not found and I also get a 404 error.
Here is my routing code in myapp.py file.
app = webapp2.WSGIApplication(
[('/', MainHandler),
('/save', SaveData),],
debug=True)
So if I try to access myapp.appspot.com/save, it returns me a 404 error, saying:
The requested URL /save was not found on this server.
Any ideas? If you need more information about it, just ask on the comments.
Thanks.
Put your catch all url /.* at the bottom since this is evaluated in order. Meaning it never pass after that.
handlers:
- url: /static
static_dir: static
- url: /.*
script: myapp.app