5

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!

ondrej
  • 53
  • 1
  • 5

3 Answers3

4

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

cfbd
  • 980
  • 2
  • 9
  • 21
  • 1
    I don't understand why and it seems hacky but this seems to work really nice. – Simon May 14 '19 at 14:29
  • 4
    While this *works*, you will get a 404 response for the route the user is accessing before the error page loads (eg: `index.html`). However, the PWA still loads correctly since it ends up loading your index file anyway. However, in the browser's devtools, you can see the 404 error under `Network`. The conditions for this are when they haven't loaded your website before, you aren't using service workers, and the user is navigating to a specific route. Azure needs to have an option to do custom routing. I've read a tutorial where you use Azure Functions to proxy. I didn't use it, but YMMV. – technogeek1995 Jun 06 '19 at 19:45
1

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.

Bruce Chen
  • 18,207
  • 2
  • 21
  • 35
0

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/

István Döbrentei
  • 948
  • 10
  • 20