I am hosting a React App from Google Cloud Storage and I have setup the bucket to use index.html as the main and error page so I can always load up the index.html page but I get a 404 when accessing the page. I don't know if this is the best way to handle this. I guess the problem is that I need React to use url rewriting and always load up the html and since the bucket can't really redirect the way I need it to this is happening.
Are there alternatives such as serving at least the index page from an actual server and load balancer?
Related
I'm trying to host a React app in Azure blob storage. To do this I need to rewrite all requests to /index.html, while preserving the url in the browser. Various articles describe using Azure CDN to perform the URL Rewrite to direct all requests through index.html. I haven't been able to get this working, here's what I have tried:
This is what i'm trying to achieve:
I've managed to resolve this using this answer:
https://stackoverflow.com/a/63197547/983599
I had basically picked the wrong condition type, instead of "Request URL" less than 1, it should have been "URL file extension":
I have an SPA built using angularjs (version 1.5). I've hosted this application on S3 bucket. And have setup CloudFront in front of S3 bucket.
In order to make my application SEO friendly, I had to remove # from the URLs. I did this by enabling HTML5 mode. So, now my URLs don't have hash and everything works correctly through my hosted environment.
But, the moment I hit refresh (F5) for any url (except index.html), I see
404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Can someone please suggest how to handle page refresh, with my current setup?
With Cloudfront, I know, I can redirect 404 to say index.html. But, then any page refresh would redirect the user to index.html. This is not desired.
What I want to do is, when a user hits refresh, I want to re-render the same page, with refreshed contents.
Do I need to do URL Rewrite on S3, to achieve this? If yes, what should be my URL re-write rule?
Or, is there any better way with CloudFront to achieve this?
You need to define that all the urls in the app should render the index.html that runs your SPA.
I'm not sure how to do it with amazon, but with express it's just specifying an handler with * as a url (it sometimes calls "catch-all")
I would like to host my ReactJS app as static on Azure Blob. The problem is Azure Blob doesn't support default document. To overcome this, I have set Azure CDN with URL Rewrite rules
for the first source pattern, set to ((?:[^\?]*/)?)($|\?.*)
for the first destination pattern, set to $1index.html$2
for the second source pattern, set to
((?:[^\?]*/)?[^\?/.]+)($|\?.*)
for the second destination pattern, set to $1/index.html$2
This is from the Hao's tutorial
This successfully resolves myapp.azureedge.net but when the client-side routing is used directly e.g. myapp.azureedge.net\react\route the app will return ResourceNotFound.
Meaning when the user inputs myapp.azureedge.net\react\route as his URL and tries to navigate to the page, he will get an error.
I suspect I need to redirect every path, that is not to a static specific file, to index.html. However, I do not know if that's the right solution or how to achieve it
Thank you for Any help!
Azure CDN supports static website hosting now. More information here:
https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website
You can host a single page app without using URL rewrites by setting the default document and the error document to be index.html
I encountered the similar issue before. Assuming that the structure of your static files under Azure Blob container looks like this:
Note: The cdn is the container name.
You could configure the following URL Rewrite rules for setting default page and rewriting all requests to index.html along with the possible query string and your images and scripts under cdn/scripts and cdn/images could correctly accessed.
Additionally, you could use Azure Web App to host your static website and choose the proper pricing tier. Details you could follow Pricing calculator.
There is a new Azure static web app service, currently in preview mode but it is super easy to deploy a modern frontend SPA. You can set up a fallback route (route.json) to redirect everything to index.html, you can see more here: https://learn.microsoft.com/en-us/azure/static-web-apps/
I currently have a React app built with create-react-app using react-router v3 hosted on S3 through CloudFront. The app is the view for a PHP api hosted elsewhere. The react-router is set up to use browserHistory.
Currently we are trying to set up the app so that it can be crawled by google and are testing this with google webmaster tools and "fetch as google".
The homepage fetches no problem but any internal page is unable to even render and returns a "not found".
The site also still has a 404 error show in console when trying to directly navigate to a route in a new tab (but loads the page as expected).
What I've tried so far:
1) importing babel-polyfill at the entry point for the googlebot.
2) set up CloudFront error pages to send 404 responses to /index.html with a 200
3) set the error page for s3 to index.html
From my reading, google shouldn't require server-side-rendering just to crawl the site (SEO is not a concern for us), but none of the other solutions I've found online seem to solve the problem.
Will I need to make the whole app be able to handle SSR, something simple like: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing, or are there other things I can try that will just make a page crawlable without setting anything up server side?
Any help or direction to further resources would be appreciated!
I found out the solution was pretty easy. In the cloudfront distribution, set the custom error pages to have 404 errors go to the target "/" with a http response of 200.
A lot of other people have it posted with the target as "/index.html", if that doesnt work, just try the above.
I have created a React boilerplate configured with react-router that has 2 pages (home and about).
I have hosted this simple application in an Amazon S3 bucket with static website hosting enabled.
The issue I have, is that any URL's such as /about return a 404 error to page speed insights. Example: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.workzey.com%2Fabout
In my S3 bucket I have set up the index and error documents both as index.html - as it should be so that react-router can do it's thing.
This is an issue for me as I need search engines to be able to crawl my site. I have run page speed insights on internal URL's from other react JS sites, and they do not seem to get a 404.
This is the simplest version of a React App hosted on S3, why is this happening when I run page speed insights on internal URLs configured with react-router? The resolution is greatly appreciated!
Ok so after some time trying to figure this out the answer to my question is here: S3 Static Website Hosting Route All Paths to Index.html
Setting the error document to index.html in S3 is the wrong way of doing things as search engines will not index the site because of 404 response headers.
The correct way to avoid this is by setting up a redirect within CloudFront to send 404 errors to /index.html with a 200 response code.
You need to create a sitemap.xml file in the root directory of your S3 bucket (i.e www.workzey.com/sitemap.xml) which provides information to search engines on what pages should be crawled on, on your website.
https://support.google.com/webmasters/answer/183668?hl=e