Search code examples
reactjsazureblobazure-blob-storageazure-cdn

Static hosting - ReactJS app on Azure Blob storage with Azure CDN

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!

Solution

  • 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.