Azure Static Web Apps

Azure Static Web Apps

Expert guidance for deploying static sites and serverless APIs.

Create App

# Create from GitHub
az staticwebapp create \
  --name mystaticwebapp \
  --resource-group myResourceGroup \
  --source https://github.com/​myorg/​myapp \
  --branch main \
  --app-location "/" \
  --api-location "api" \
  --output-location "dist" \
  --login-with-github

# Create standalone
az staticwebapp create \
  --name mystaticwebapp \
  --resource-group myResourceGroup \
  --location eastus2 \
  --sku Standard

Configuration (staticwebapp.config.json)

Basic Configuration

{
  "navigationFallback": {
    "rewrite": "/​index.html",
    "exclude": ["/​images/​*", "/​api/​*"]
  },
  "routes": [
    {
      "route": "/​api/​*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/​admin/​*",
      "allowedRoles": ["admin"]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/​.auth/​login/​aad"
    },
    "404": {
      "rewrite": "/​404.html"
    }
  }
}

Headers and MIME Types

{
  "globalHeaders": {
    "X-Content-Type-Options": "nosniff",
    "X-Frame-Options": "DENY",
    "Content-Security-Policy": "default-src 'self'"
  },
  "mimeTypes": {
    ".wasm": "application/​wasm",
    ".json": "application/​json"
  },
  "routes": [
    {
      "route": "/​api/​*",
      "headers": {
        "Cache-Control": "no-cache"
      }
    },
    {
      "route": "/​static/​*",
      "headers": {
        "Cache-Control": "max-age=31536000"
      }
    }
  ]
}

Authentication

Built-in Providers

{
  "routes": [
    {
      "route": "/​.auth/​login/​github",
      "statusCode": 404
    },
    {
      "route": "/​.auth/​login/​twitter",
      "statusCode": 404
    }
  ],
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/​{tenant}/​v2.0",
          "clientIdSettingName": "AAD_CLIENT_ID",
          "clientSecretSettingName": "AAD_CLIENT_SECRET"
        }
      }
    }
  }
}

Custom Roles

{
  "auth": {
    "rolesSource": "/​api/​GetRoles",
    "identityProviders": {
      "azureActiveDirectory": {
        "userDetailsClaim": "http://schemas.xmlsoap.org/​ws/​2005/​05/​identity/​claims/​name"
      }
    }
  }
}

API Functions

Python API

# api/​products/​__init__.py
import azure.functions as func
import json

def main(req: func.HttpRequest) -> func.HttpResponse:
    products = [
        {"id": 1, "name": "Product A"},
        {"id": 2, "name": "Product B"}
    ]

    return func.HttpResponse(
        json.dumps(products),
        mimetype="application/​json"
    )

Node.js API

// api/​products/​index.js
module.exports = async function (context, req) {
    const products = [
        { id: 1, name: "Product A" },
        { id: 2, name: "Product B" }
    ];

    context.res = {
        body: products,
        headers: {
            'Content-Type': 'application/​json'
        }
    };
};

API with Database

# api/​products/​__init__.py
import azure.functions as func
import os
from azure.cosmos import CosmosClient

def main(req: func.HttpRequest) -> func.HttpResponse:
    client = CosmosClient.from_connection_string(os.environ["COSMOS_CONNECTION"])
    container = client.get_database_client("mydb").get_container_client("products")

    products = list(container.read_all_items())

    return func.HttpResponse(
        json.dumps(products),
        mimetype="application/​json"
    )

GitHub Actions Workflow

# .github/​workflows/​azure-static-web-apps.yml
name: Deploy Static Web App

on:
  push:
    branches: [main]
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches: [main]

jobs:
  build_and_deploy:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/​checkout@v4

      - name: Build And Deploy
        uses: Azure/​static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/"
          api_location: "api"
          output_location: "dist"

  close_pull_request:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    steps:
      - name: Close Pull Request
        uses: Azure/​static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

Custom Domains

# Add custom domain
az staticwebapp hostname set \
  --name mystaticwebapp \
  --resource-group myResourceGroup \
  --hostname www.example.com

# Verify
az staticwebapp hostname list \
  --name mystaticwebapp \
  --resource-group myResourceGroup

Environment Variables

# Set app settings
az staticwebapp appsettings set \
  --name mystaticwebapp \
  --resource-group myResourceGroup \
  --setting-names \
    "API_KEY=secret123" \
    "DATABASE_URL=connection-string"

Linked Backend

# Link to Azure Functions
az staticwebapp backends link \
  --name mystaticwebapp \
  --resource-group myResourceGroup \
  --backend-resource-id /​subscriptions/​{sub}/​resourceGroups/​{rg}/​providers/​Microsoft.Web/​sites/​{functionapp} \
  --backend-region eastus

Bicep Deployment

resource staticWebApp 'Microsoft.Web/​staticSites@2023-01-01' = {
  name: appName
  location: location
  sku: {
    name: 'Standard'
    tier: 'Standard'
  }
  properties: {
    repositoryUrl: repoUrl
    branch: 'main'
    buildProperties: {
      appLocation: '/'
      apiLocation: 'api'
      outputLocation: 'dist'
    }
  }
}

resource customDomain 'Microsoft.Web/​staticSites/​customDomains@2023-01-01' = {
  parent: staticWebApp
  name: 'www.example.com'
  properties: {}
}

Resources

• Static Web Apps Documentation
• Configuration Reference
• API Support