How to serve Angular 2 SPA with Routes from Azure Blob via Azure Verizon Premium CDN

Question

There is not enough documentation about Rewrite Rule here https://docs.microsoft.com/en-us/azure/cdn/cdn-rules-engine-reference-features . Also it takes 4 hours to refresh so it is impractical to try out various regex combinations.

I have an Angular 2 single page app (heroes sample app) hosted on Azure Blob and would like to serve it from Azure CDN. However, Angular 2 routes require special handling, ie rewrite the routes to index.html. Here is my working example with NGINX proxy. How can I translate it to Azure Verizon Premium CDN?

# Filename: /etc/nginx/nginx.conf
http {
    ...
    rewrite_log on;

    server {
        listen       80;
        server_name  www.heroes.com;

        proxy_connect_timeout       600;
        proxy_send_timeout          600;
        proxy_read_timeout          600;
        send_timeout                600;

        location / {
            error_log /var/log/nginx/rewrite.log notice;
            rewrite '^(\/(\w+))*\/?(\.\w{5,})?\??([^.]+)?$' /heroes/index.html break;
            proxy_pass https://xxxxxx.blob.core.windows.net/heroes/;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header        X-Forwarded-Proto https;

        }
    }
}

Answer 1

You can use angular 2+ on Azure Static sites using the 'Static Website' option on the storage account. No need for rewrite rules.

Be sure to add 'index.html' as both the 'Index Doc name' and 'Error doc path' (Otherwise refresh or initial request will fail)