Use Azure Front Door to serve a SPA

Question

I want to to be able to serve a SPA using just the Azure Front Door / and not Azure CDN. Looks like the Front Door provides the caching that the CDN would provide and I can add multiple regional storage accounts to it, making it global at scale.

The problem is, I can't match the path to index.html files. Found this feedback and it looks like this can be solved using the URL rewrite and redirect but couldn't figure out how.

I have /test/ and /test to match with the route below, so it should be matching /test and pointing the request to /test/index.html but this is not working. Can we not do file-based forwards?

Pragmatism

What type of resource are you hosting the SPA on? I don't know the answer to your exact question, but I'm wondering why for example an App Service can't have /index.html as it's default document? – Honeymoon

I'm not intending to setup a back-end, it's just static files. So no need to use the appservice really. – Pragmatism

Did you found a solution? Same problem here! – Disapprobation

Just ran into this issue today as well in Azure. I think the main issue is that the URL Rewrite functionality provided in Front Door only provides for URL path rewriting, and not full URL matching and replacement. – Shroudlaid

Answer 1

This took some time to figure out but here's the solution.

Create Blob Storage(s)

To host the SPA you'll need blob storage accounts in Azure and these storage accounts should be configured to receive static webpage traffic. Navigate to Settings and then Static website in the blob storage settings.

To add content here - navigate to your blob storage again and you should see a container named $web.

Now the $web container is the one that you should put all your static files in, just make sure it's publicly accessible (depending on how you created it, it might not be)

More documentation on how to make a static website using blob storage is here: https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

Get the static website endpoint

Once you enabled the static website and click on the static website blade, it should give you a different endpoint than the regular blob access endpoint - one that supports the static website. Something that looks like: https://somerandomstorageaccount.z8.web.core.windows.net/

Add the static website endpoint(s) to Azure Front Door as back-end

Navigate to your Front Door designer

Navigate to your Back-end pool and add a new entry if you don't have anything. You should now add this new website endpoint as a back-end to your Azure Front Door. Picture below is the update configuration, but adding it is equally simple, you just add it as a Custom Host back-end type and point it to your blob static website location.

To enable better performance, use multiple storage accounts (from different regions) and add all of those to back-end in your Front Door configuration and turn-on the caching in Front Door.

Pragmatism

Thank you for your help. I followed all the steps, but I am getting a problem when I bind my React static website to the front door. It delivers only the index.html. Do you have any idea why does this happen? All my paths are relative but I still have the error – Herringbone

You have to check the uploaded blobs; see if you've uploaded your files correctly. The other alternative is your paths, but you're already saying they are relative. – Pragmatism

Everything is correctly uploaded. What I wanted to do with the Front Door was to create a path i.e "domain.com/type/appname" and when I go to this directory, then my React app would be displayed. Is that possible? – Herringbone

This answer is marked as answering the question, but it clearly doesn't. Routing arbitrary paths to the index.html file (to support HTML5 routing in the SPA) isn't addressed and is the crux of this question. – Valona

Correct, this answer is not complete. Anyhow, routing to arbitary paths is supported by configuring the index.html as the default error page on the Static Website tab of the Storage Container. Not perfect, but works (see Scott's answer below) – Jahveh

Answer 2

@Mavi Domates' answer above is great, but doesn't address how to make an SPA route correctly using Blob Storage.

Root Cause: Blob Storage's static website doesn't rewrite URLs and returns back 404 for SPA routes that don't exist exactly in the storage container.

Azure CDN Fix:

Create URL Rewrite rules to forward any zero-length file extensions back to index.html. Link

Azure Front Door Workaround:

(Notice this says Workaround... this is not a fix). On your Blob Storage Static website config, set both the Index document name and Error document path to index.html. This causes any 404 error to be redirected to your SPA entrypoint. Your SPA will work, but any direct navigation to a SPA endpoint will return a 404. (This carries a whole host of other problems, but at least the site works, right?)

Shroudlaid