I am hosting a react website on Google cloud bucket. The bucket is exposed to public internet and cname is pointed to c.storage.googleapis.com. and web settings is also updated to load index.html. Inside bucket there is app.yaml and build folder where index.html is present.
But when i browse my domain(www.gobillion.co) - which ideally shall load my hosted website. It is instead giving no such key error. What might be the problem here ?
<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
</Error>
Thanks in advance.
I have a react app and was getting this error
I fixed this by setting in the buckets "Edit Website Configuration"
"Error (404 not found) page" to "index.html"
so when it cant find a path it serves the app page
Related
I have a React website that I'm hosting and deploying through Netlify. I have it currently set up so that I'm able to log in using their authentication service, which is useful. However, it only works on my Localhost. When I try to use it on the Netlify hosted site, I get the following error:
Uncaught (in promise) Error: Illegal url for new iframe - https://%22trail-app-7d2e3.firebaseapp.com%22/__/auth/iframe?apiKey=********&appName=%5BDEFAULT%5D&v=9.2.0&eid=p&usegapi=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.ILxaxn5iF9E.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCP4GH4pdEaIiZe1k-cWfBRo9KTiAQ%2Fm%3D__features__#id=I0_1635906033796&_gfid=I0_1635906033796&parent=https%3A%2F%2Ftrailapp.netlify.app&pfname=&rpctoken=37134086
at Object._.Zk (cb=gapi.loaded_0:154)
at Fl (cb=gapi.loaded_0:165)
at Object._.Gl (cb=gapi.loaded_0:166)
at Object._.Nl (cb=gapi.loaded_0:172)
at _.Ym.openChild (cb=gapi.loaded_0:310)
at _.Ym.open (cb=gapi.loaded_0:315)
at iframe.ts:81
at l (runtime.js:63)
at Generator._invoke (runtime.js:294)
at Generator.next (runtime.js:119)
It seems as though it's trying to use that URL to reference a script that presents the iframe with the Google login. I'm not sure what permissions would be causing it not to work. I've enabled everything I know to.
I am using a .env file to hide my API information from a repository and have the values set up under "Environment Variables" on Netlify. If anyone has any feedback it'd be greatly appreciated!
You need to add your hosted domain in firebase as I have added my own domain here.
I have hosted my react app on AWS Amplify. On trying to access a protected route of the application I am getting the following error on screen This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>3C8377104116CA48</RequestId>
<HostId>nL3bDs+kXEWE8uBFPTLkFLpRg6CCmKfejftWs5wmTWYO6K6WDzpwsDXJCFTK0EFhjJdaHECfuos=</HostId>
</Error>
How do I resolve this?
Route redirects and rewrites has special configuration for a deployed AWS Amplify app. Check the
AWS Amplify Console > App Settings > Rewrites and Redirects
Configuring a rewrite rule fixed this issue for me.
My rule looks like so:
Source -
</^[^.]+$|\.(?!(css|yaml|gif|ico|jpg|js|png|txt|svg|woff2|woff|ttf|map|json)$)([^.]+$)/>
Target -
/index.html
Type -
200 (Rewrite)
Detailed description is here - https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html
Using ReactJS I made a Build (reactJs static, npm build) and uploaded it to Google Cloud Storage Bucket, but getting a issue with the Path and Build folder files. The app (/static website) running but could not fetch the files from the bucket directory for eg the index.html & logo. (404 or 403 error )
Structure: Parent Bucket > Build folder (index.html, static folder & other files inside Build)
Any one have any suggestion on this. How to resolve this?
Do I need to create an app.yaml for GCS Bucket or any alternative?
I have gone through the article quite similar but for AppEngine instead of Bucket. https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509.
I have tried with app.yaml file but does not work for me.
I had exactly the same issue as mentioned by the OP. I am sharing my version of solution just in case anyone else ends up here.
As shown in the screenshots by OP, the 403 errors showed up for me because the URL of the static files in build/static folder was not correctly configured by the react-scripts build script.
Eg:
The url for index.html file was https://storage.googleapis.com/{bucket-name}/index.html.
However, when the page loaded, it requested files having url https://storage.googleapis.com/static/js/main.f555c3e0.chunk.js. It should rather be
https://storage.googleapis.com/{bucket-name}/static/js/main.f555c3e0.chunk.js
This is happening because by default react-scripts build assumes that your files will be served from root folder of your host.
To fix this add the following field in package.json of your project
"homepage": "https://storage.googleapis.com/{bucket-name}"
This tells the build script that it needs to add a relative path for serving static files.
For details please refer: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
In order to set the routes of a static website stored in Google Cloud Storage, you need to assign a suffix to your objects. In other words, using suffixes is the intended way to configure your website. You can see more information in Hosting a static website document.
For your main index page you should set MainPageSuffix and for the not found page 404.html you should set NotFoundPage as suffix.
You can see more information on how to configure your static web here
I've previously worked with J2EE where it's possible to add this configuration to web.xml
<error-page>
<exception-type>java.lang.Throwable</exception-type>
<location>/error</location>
</error-page>
The effect of the above code is that if an unhanded exception is thrown, it will be passed to the /error page, which will be shown to the user.
Is there a way to do something similar to this when my Go web application panics on Google App Engine?
Yes, see Custom error responses:
When certain errors occur, App Engine serves a generic error page. You
can configure your app to serve a custom static file instead of these
generic error pages, so long as the custom error data is less than 10
kilobytes. You can set up different static files to be served for each
supported error code by specifying the files in your app's app.yaml
file. To serve custom error pages, add a error_handlers section to
your app.yaml, as in this example:
error_handlers:
- file: default_error.html
- error_code: over_quota
file: over_quota.html
I hosted my static web pages on Google App Engine (Java). It does not have any server side coding.
I used HTML5 Boilerplate code as my base. It has page called 404.html. I would like to show this 404.html page when there is page not found error.
How can I show a custom 404 page in Google App engine?
In Java you can set up error handlers in your web.xml file (which is located in the app's WAR under the WEB-INF/ directory).
<error-page>
<error-code>500</error-code>
<location>/errors/servererror.jsp</location>
</error-page>
You can set custom error responses in your app.yaml file.