A Simple Analogy

Azure Static Web Apps is like a global CDN for your website. Your content is served from servers near users, incredibly fast.

---

Why Static Web Apps?

• Global CDN: Instant worldwide delivery
• Free SSL: Built-in HTTPS
• Serverless APIs: Integrate Azure Functions
• Authentication: Built-in identity providers
• Free tier: Generous free usage limits

---

GitHub Integration

# Push your repo to GitHub
git push origin main

# Login to Azure Portal
# Create Static Web App
# Connect GitHub account
# Select repository and build preset

---

staticwebapp.config.json

{
  "routes": [
    {
      "route": "/api/*",
      "methods": ["GET", "POST"],
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "responseOverrides": {
    "404": {
      "rewrite": "/404.html"
    }
  },
  "auth": {
    "identityProviders": {
      "google": {
        "registration": {
          "openIdConnectConfiguration": {}
        }
      }
    }
  }
}

---

GitHub Actions Workflow

name: Deploy to Static Web Apps

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 18
    - run: npm ci
    - run: npm run build
    - uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
        repo_token: ${{ secrets.GITHUB_TOKEN }}
        action: 'upload'
        app_location: '/'
        api_location: 'api'
        output_location: 'dist'

---

API Functions

// api/greet/index.ts
import { AzureFunction, Context, HttpRequest } from "@azure/functions";

const httpTrigger: AzureFunction = async function (
  context: Context,
  req: HttpRequest
): Promise<void> {
  context.log("HTTP trigger function processed a request.");

  const name = req.query.name || req.body?.name;

  context.res = {
    body: `Hello, ${name}!`,
  };
};

export default httpTrigger;

---

Deployment Environments

Production: Pushed to main branch
Staging: Automatically created for pull requests

---

Best Practices

1. Optimize builds: Cache dependencies
2. Monitor performance: Use Application Insights
3. Use CDN: Already included globally
4. Security: Protect sensitive API routes
5. Review PRs: Staging environment preview

---

Related Concepts

• Netlify
• Vercel
• AWS Amplify
• GitHub Pages

---

Summary

Azure Static Web Apps combines global CDN hosting with serverless API capabilities. Perfect for modern JavaScript frameworks.