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/
Related
We have an AWS Amplify React project associated with our domain, which leads to all files and contents being sourced by the underlying react router.
In order to support backend API communications with Microsoft APIs, we need to host a specific JSON file at a particular location within our domain, such as mydomain.com/.well-known/microsoft-identity-association.json.
I am unsure how to do this. My first question is whether this is best accomplished via static routes within the react router or, instead, configuring Cloud Front and Route 53 to serve up the JSON file for this exact URL.
I have been trying the second approach and have created a distribution in Cloud Front for a specific S3 bucket storing the JSON file. I have named the S3 bucket "mydomain" with a subfolder ".well-known" and a contained JSON filed entitled "microsoft-identity-association.json". My problem is that I do not know how to configure Route 53 to route to this distribution as my root domain (mydomain.com) is associated with my Amplify project and is handled by the react router. I'm not sure if I can somehow configure a specific route or alias to serve up the exact JSON file.
I have reviewed this post (How do I return a json file from s3 to a specific url, but only that url) but it seems to be addressing a slightly different problem.
Any and all guidance appreciated.
Addressed this issue by splitting my site. I used a static S3-hosted site for public pages (including the JSON file) and redirected the React app to a subdomain.
How do I direct the www. subdomain to just domain.tld without www? I'm used to firebase doing this automatically. Should I look into configuring the app.yaml, dispatch.yaml, or another method?
What you're describing is called a "naked domain", and this is described in the documentation on Custom Domains. The documentation provides the steps for mapping a custom domain to your app and updating the DNS records at your domain registrar once your service has already been mapped to your custom domain in App Engine.
To redirect your requests, you can use wildcard mappings with services in App Engine by using the dispatch.yaml file. You can find instructions on how to do that here. If you would like to know more about routing requests, you can take a look at this documentation as well which also highlights creating a dispatch file. Handlers are limited to handle URLs by executing application code, or by serving static files uploaded with the code, such as images, CSS, or JavaScript. Therefore, they cannot directly redirect one URL to another.
You would need to handle your URL by running a script that executes code that will redirect your URL.
The comment shows a complete example as the script runs main.py which then redirects the URL
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 read an article about social sharing issues in AngularJS and how to combat by using Apache as a proxy.
The solution is usable for small websites. But if a web app has 20+ different pages, I have to url-write and create static files for all of them. Moreover, a different stack is added to the app by using PHP and Apache.
Can we use NodeJS as the proxy and re-write the url, and what's the approach?
Is there a way to minimize static files creation?
Is there a way to remove proxy, url-rewrite, and static files all together? For example, inside our NodeJS app to check the user agent, if it is facebook bot or twitter and the like, we use request module to download our page and return the raw html code for them, is it a plausible solution?
Normally when someone shares a url in a social network, that social network request that page to generate a preview/thumbnail (aka "scrape").
Most likely those scrapers won't run javascript, so they need a static html version of that page.
Same applies for search engines (even though Google and others are starting to support javascript sites).
Here's a good approach for an SPA to still support scrapers:
use history.pushState in angular to get virtual urls when navigating thru your app (ie. urls without a #)
server-side (node.js or any), detect if a request comes from a user or a bot (eg. check the User-Agent using this lib https://www.npmjs.com/package/is-bot )
if the request url has a file extension, it's probably a static resource request (images, .css, .js), proxy to get the static file
if the request url is a page, for real users, if the url is a page (ie. not a static resource) always serve your index.html that loads your angular app (pro tip: keep this file cached in memory)
if the request url is a page, serve a pre-rendered version of the requested url (they won't run javascript), this is the hard part (side note: ReactJS makes this problem much simpler), you can use a service like https://prerender.io/ they'd take care of loading your angular app, and saving each page as html (if you're curious, they use a headless/virtual browser in memory called PhantomJS to do that, simulating what a real user would do clicking "Save As..."), then you can request and proxy those prerendered pages to bot requests (like social network scrappers). If you want, it's possible to run a prerender instance on your own servers.
All this server-side process I described is implemented in this express.js middleware by prerender:
https://github.com/prerender/prerender-node/blob/master/index.js
(even if you don't like prerender, you can use that code as implementation guide)
Alternatively, here's an implementation example using only nginx:
https://gist.github.com/thoop/8165802
I am hosting a web application on Azure - I deployed it yesterday by just copying all the required files into wwwroot.
It sort of works - except that it behaves differently than when it did when I just ran npm start locally (it's an Angular 2 app, with config copied from the 5 min quickstart guide) - when I ran it locally, I could manually enter any URL which was handled by routers and it did load, and on Azure it throws a 404 (also happens when I just refresh any page besides the home page) - I presume that somehow when I ran it locally, it figured out that I always need to load index.html, regardless of the actual URL, and let the router handle everything. How can I replicate this behavior on Azure?
Your Azure WebApp is running on an IIS instance by default.
If you want to handle the Html5 Mode(without the hashbang) then you have to create a Web.Config file and define a rewrite.
See How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?
Dont forget to set <base href="/"> in the <head> of your index.html. Otherwise it wont work.
I think you will probably have to use URL Rewrite for this, unless you are using MVC to deliver the page. Here is a previous answer that will help you configure URL Rewrite. It is talking about WordPress, but it should point you in the right direction.
You should try checking the Azure portal under the Application Settings for the Web Application if .index.html is included in the List of Default Document option
I would be glad if you can rephrase your Question to understand it more.