🎯 Azure Static Web Apps

Introduction

Azure Static Web Apps automatically builds and deploys static sites and SPAs with custom domain and SSL.

Key Learning Outcomes

By the end of this lesson, you'll understand:

• Creating Static Web Apps

• Connecting to Git repositories

• Configuring build and deployment

• Custom domains and SSL

• Adding backend APIs

• Monitoring and analytics

Creating Static Web App

# Create Static Web App
az staticwebapp create \
  --name myStaticApp \
  --resource-group myResourceGroup \
  --source https://github.com/myusername/myrepo \
  --location eastus \
  --branch main \
  --app-location "src" \
  --output-location "build"

Configuration

staticwebapp.config.json:

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    },
    {
      "route": "/api/*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/...",
          "clientIdSettingName": "AZURE_CLIENT_ID"
        }
      }
    }
  }
}

Adding Backend API

# Deploy function as backend
az functionapp create \
  --resource-group myResourceGroup \
  --consumption-plan-location eastus \
  --runtime node \
  --name myStaticAppApi

Custom Domain

# Add custom domain
az staticwebapp custom-domain set \
  --name myStaticApp \
  --resource-group myResourceGroup \
  --domain-name mycompany.com

Key Takeaways

• **Static Web Apps** hosts static sites and SPAs

• **Git integration** enables CI/CD

• **Custom domains** and SSL included

• **Backend APIs** via Azure Functions

• **Automatic scaling** handles traffic

Next Steps

Learn about cost optimization strategies, or explore advanced deployment patterns.