Azure Functions – Serve SPA assets using proxies.json that support Angular routes

When you work with Azure Functions, you can use Azure table storage “Static website” to store all your Angular bundles and assets or even a CDN. Then you can set up your proxies.json to serve the files, everything is pretty much the basics. Rule “websiteRoutes” is the one that supports the browser refresh to fix the Angular routes, without this rule end-user browser refresh will give you a 404 as azure functions don’t understand this route.

{
  "$schema": "https://json.schemastore.org/proxies",
  "proxies": {   
    "users": {
      "matchCondition": {
        "route": "/api/users",
        "methods": ["GET"]
      },
      "backendUri": "https://%BASE_3RD_PARTY_SERVICE_DOMAIN%/api/users",
      "requestOverrides": {
        "backend.request.headers.Accept": "application/json",
        "backend.request.headers.x-functions-key": "%APP_API_KEY%"
      }
    },      
    "website": {
      "matchCondition": {
        "route": "/",
        "methods": ["GET", "HEAD"]
      },
      "backendUri": "https://%BASE_WEB_DOMAIN%/index.html"
    },   
    "websiteFiles": {
      "matchCondition": {
        "route": "/{filename}.{ext}",
        "methods": ["GET", "HEAD","OPTIONS"]
      },
      "backendUri": "https://%BASE_WEB_DOMAIN%/{filename}.{ext}"
    },
    "websiteRoutes": {
      "matchCondition": {
        "route": "/{*restOfPath}",
        "methods": ["GET", "HEAD"]
      },
      "backendUri": "https://%BASE_WEB_DOMAIN%/index.html"
    }, 
    "websiteResources": {
      "matchCondition": {
        "route": "/assets/{*restOfPath}",
        "methods": ["GET", "HEAD"]
      },
      "backendUri": "https://%BASE_WEB_DOMAIN%/assets/{restOfPath}"
    }
  }
}