Azure: WebContentNotFound on refreshing page of SPA deployed as Azure Blob Static Website with CDN

Question

I have a SPA (built with angular) and deployed to Azure Blob Storage. Everything works fine and well as you go from the default domain but the moment I refresh any of the pages/routes, index.html no longer gets loaded and instead getting the error "the requested content does not exist"

Googling that term results in 3 results total so I'm at a loss trying to diagnose & fix this.

Aman

Answer 1

You can simply configure the error page to index.html in your static website:

Minima

I just want to note that the response status will remain 404 but it'll contain index.html content in the body. – Mannikin

@Ahmed Sehndy In the above method, you'll still get an error with 404 in browser. – Doiron

Is there any way to suppress 404 in browser? – Grandma

This is not the correct answer, it seems to work until you open developer tools and as pointed out by @Mannikin you stil get a 404 – Lerma

I agree with everyone else here. This isn't a fix. It's a hack - the real fix is to add a CDN with some URL redirect rules on your hosting server. here is a great guide: antbutcher.medium.com/… – Semiramis

This didn't help with angular app – Beem

This is a hack and I will not recommend it. Furthermore, even if you configure index.html file for error page, when you refresh the web page it routes to the home page but browser url doesn't change which can be misleading to the user. @Semiramis has pointed to a great article on medium and I was able to fix the issue following it. – Gaidano

I had same issue and after setting index.html on error doc path. It works for me. thanks – Shanteshantee

Answer 2

Actually the issue was I didn't have 404.html defined -- the blob storage for SPA doesn't understand what file to serve for any other routes than the root one. So every other route will go to the 404 file. But in a SPA even the 404 goes through the index file. So all I did is mention index.html as my 404 file and all is well.

Aman

Answer 3

For me adding the index.html page as the Error document page did not help when navigating by url as it would still reload the app. I posted an answer elsewhere relating to rather using the Angular HashLocationStrategy and that does not cause a page reload when changing the URL manually.

Answer on other SO question

Echoism

That sounds more like an app issue, whenever you visit the URL you'll just download the whole code for the whole website and then the app itself will choose what to display depending on the routing, I use angular myself and never had this problem. – Aman

Hi @MichaelB, the issue comes in when serving your Angular app from an Azure Storage account. it attempts to return the requested resource (from the url) from the storage account, which does not exist, because it is just an Angular route. – Echoism

i don't understand your point, this is what the whole thread is about. You are correct. The workaround is to simply designate your index html as the 404 handler. I am currently using this at scale in a production application – Aman

My point is simply that even after adding index.html as the error page on the storage account, it would still not work for me when changing the url or reloading until I changed it to use the HashLocationStrategy. – Echoism

And I am saying that is weird and cannot reproduce over multiple apps running in production, the issue is likely to be with your application and not azure blob storage. – Aman

Answer 4

There is a new static Webapps solution by Microsoft. It is currently in preview mode but I think it is the most convenient way to use/deploy a SPA in the Azure infrastructure. You can use your custom domain with free SSL, version control, and set up a route to redirect everything to the index.html (fallback routes: https://learn.microsoft.com/en-us/azure/static-web-apps/routes) for example. see more details here: https://learn.microsoft.com/en-us/azure/static-web-apps/

Glucosuria

Nice! It did seem for a while there that this blob deployment of SPA was a placeholder more than anything. – Aman

However it still issues red 404 error messages to browser console. – Grandma

@EF It seems that the 404 behavior is fixed now. At least docs about fallback routes state that it should return 200. – Mannikin

Answer 5

TL/DR

You could set the error document (404) to also be your index.html

This is a quick fix that will still return 404, however will also actually follow your deep link.

This isn't a 'fix'. It's more of a hack - the real fix is to add a CDN with some URL redirect rules on your hosting server. here is a great guide: https://antbutcher.medium.com/hosting-a-react-js-app-on-azure-blob-storage-azure-cdn-for-ssl-and-routing-8fdf4a48feeb

Rule itself

But to save you the click, the CDN rule using standard microsoft CDN (the cheaper one) is something like this:

(add the condition with the '+ condition' button)
If URL file extension > less than 1 extension > no case transform

(add the action with '+ Add action' button)
source pattern: '/' > Destination: '/index.html' > preserve unmatched path: no

Explanation

Ill attempt to add an explanation that I think nobody else did nicely.

What this rule will do is say any URL request that isn't for a direct file, eg.

example.com/xyz
example.com/user/xyz
example.com/tabs/post/12345

Or ANYTHING without a direct file extension (like '.png' or '.pdf' or '.html')

Then we will rewrite the URL to be 'index.html' this is the host file where the SPA has javascript to handle deep links for paths like in the example - therefore you will not get a 404 and the code will handle gracefully.

Semiramis

Answer 6

Generally, you've created a CDN profile and an endpoint, but your content doesn't seem to be available on the CDN. Users who attempt to access your content via the CDN URL receive an HTTP 404 status code. You can follow these methods in troubleshooting Azure CDN endpoints that return a 404 status code

There are several possible causes, including:

The file's origin isn't visible to the CDN. The endpoint is misconfigured, causing the CDN to look in the wrong place. The host is rejecting the host header from the CDN. The endpoint hasn't had time to propagate throughout the CDN.

With CDN, At the initial request, the client directly accesses to the origin server, afterward, at the following request, when you refresh the page, the client requests to the CDN cache server until their time-to-live (TTL) elapses. See Manage expiration of Azure Blob storage in Azure CDN and Control Azure CDN caching behavior with caching rules.

In this case, you may ensure websites blob content is publicly available on the Internet. After that, you may verify that your origin settings are properly configured. Verify that the values of the Origin type and Origin hostname are correct. Verify HTTP and HTTPS ports is represented as your static website is listening on. Kindly you could get more details from that troubleshooting link.

Actinopod

Actually the issue was I didn't have 404.html defined -- the blob storage for SPA doesn't understand what file to serve for any other routes than the root one. So every other route will go to the 404 file. But in a SPA even the 404 goes through the index file. So all I did is mention index.html as my 404 file and all is well. – Aman