Hosting SPA with Static Website option on Azure Blob Storage (clean URLs and Deep links)

Question

I have succesfully set up a static website on Azure Blob storage using the $web container as advised within the Microsoft documentation. In addition, I have defined index.html for both the 'Index Document Name' and the 'Error Document Name'. This is because I want my JavaScript application to handle the 404 responses.

However, when looking at the network tab in Chrome, I can see that a 404 is being thrown for the URL that I am requesting, despite the page actually working.

My theory is as follows:

• Azure checks to see if the 'file' exists
• If the file exists, it returns it
• If the file doesn't exist, it throws a 404 and rewrites the url to the 'Error Document Name' i.e. index.html in my case (hence my pages still work)

The problem I have is that my URLs are clean urls, for example:

• https://somename.z22.web.core.windows.net/activities/some-slug

/activities/some-slug is never going to exist as a file, this just tells my JavaScript application where to route the request i.e. what view to load.

Just to be clear, the page does work because it is still routing 404 errors to index.html.

How can I tell Azure blob to just route absolutely everything to index.html and let my app throw the 404 if necessary?

We do have a Premium Verizon CDN set up already because I was not originally aware of the static website option on Azure Blob. If the CDN is the best route, please can you provide instructions on how to configure the CDN to provide what I am looking for?

What I have tried/researched

I have read numerous articles (specifically the comments in this one) and I believe that there may be various solutions i.e. Azure Functions, Proxy, CDN etc. That said, none provide clear instructions of what to actually do with those specific services.

I usually work on AWS so am not familiar with all of the Azure services and available configurations.

Answer 1

I think I found a solution

1. Add a new rule

2. Condition: URL file extension

   a. Operator: Less than

   b. Extension: 1

   c. Case transform: No transform

   [This basically means that the URL requested has no file (extension) but is a route of the app which will be taken care of by the app routing]

3. Action: URL rewrite

   a. Source pattern: /

   b. Destination: /index.html

   c. Preserve unmatched path: No

4. Save rule

.