Azure Static Web Apps: The New JAMstack Platform

Azure Static Web Apps (ASWA) simplifies hosting JAMstack applications by coupling a static frontend (React, Vue, Blazor) with a serverless backend (Azure Functions) in a single resource. Announced at Build 2020, it provides a seamless GitHub Actions integration out of the box.

Architecture

flowchart TB
    GitHub[GitHub Repo] -->|Push| Actions[GitHub Actions]
    Actions -->|Build| Static[Static Content]
    Actions -->|Build| API[Azure Functions API]
    
    Static --> CDN[Global CDN]
    API --> Backend[Serverless Endpoint]
    
    App[Browser] --> CDN
    App -->|/api/*| Backend
    
    style Actions fill:#E1F5FE
    style CDN fill:#FFF3E0

Routing and Security

Configure routing rules in `staticwebapp.config.json` (formerly `routes.json`).

{
  "routes": [
    {
      "route": "/admin/*",
      "allowedRoles": ["administrator"]
    },
    {
      "route": "/login",
      "rewrite": "/.auth/login/github"
    },
    {
      "route": "/api/*",
      "methods": ["GET", "POST"]
    }
  ],
  "responseOverrides": {
    "404": {
      "rewrite": "/404.html"
    }
  }
}

Key Takeaways

• Free SSL and Global CDN included.
• Automatic staging environments for Pull Requests.
• Built-in authentication (Twitter, GitHub, AAD).