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":
Related
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 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?
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 am working with AngularjS. And i am using Amazon S3 Bucket.
I am trying to remove '#' from URLs of my website which I did successfully
Then i can across a problem where i was not able to reload any of the page from my website.
I received an error saying cannot get filename
Then after some searching i came to know that i am supposed to Rewrite URLs in server configuration
I found few links telling me about how to make such configurations. But i couldn't find any reference teaching me about making such configurations on Amazon S3 Bucket.
How can i make configuration changes in this situation? Any useful reference/documentation for the same?
S3 is not a full-featured web application server like nginx or Apache. You cannot rewrite URLs. The only thing you can do with S3 bucket is handle error pages like 404.
I have two projects. One for my front-end angular code. Another for Web API. When I'm in the front-end project, I want to make a call to an API in my other project.
The Web API tutorials I have seen show a relative url involving /api such as this:
$http.get("/api/trivia")
That works great if the javascript is in the same project as Web API, but it's not for my Solution.
I can hard-code the url to my API's localhost port and it works fine, but of course that won't work when I deploy the app to Azure. How should I be handling these urls?
Thank you.
When you make a $http with full url (http://...) it directly look at given address. But when you specify relative path (without http://...) it look at your current site + given relative path url.
So If your api also hosted in same site you can still make the reference as $http.get("/api/trivia") or else as you said if you know where you host your site in Azure you can make it hard code in in your script.