Azure Static Web Apps Is the Most Underrated Service for Developers

# Step 1: Create an App Service Plan
az appservice plan create \
  --name my-frontend-plan \
  --resource-group my-rg \
  --sku B1 \
  --is-linux
 
# Step 2: Create the Web App
az webapp create \
  --name my-frontend-app \
  --resource-group my-rg \
  --plan my-frontend-plan \
  --runtime "NODE:20-lts"
 
# Step 3: Configure deployment source
az webapp deployment source config \
  --name my-frontend-app \
  --resource-group my-rg \
  --repo-url https://github.com/you/your-repo \
  --branch main
 
# Step 4: Configure custom domain
az webapp config hostname add \
  --webapp-name my-frontend-app \
  --resource-group my-rg \
  --hostname www.yourdomain.com
 
# Step 5: Add SSL
az webapp config ssl bind \
  --name my-frontend-app \
  --resource-group my-rg \
  --certificate-thumbprint <thumbprint> \
  --ssl-type SNI

# Login if you haven't
az login
 
# Create a resource group (or use an existing one)
az group create \
  --name swa-demo-rg \
  --location eastus2
 
# Create the Static Web App
az staticwebapp create \
  --name my-first-swa \
  --resource-group swa-demo-rg \
  --source https://github.com/your-username/your-repo \
  --location eastus2 \
  --branch main \
  --app-location "/" \
  --output-location "build" \
  --login-with-github

# Install the SWA CLI
npm install -g @azure/static-web-apps-cli
 
# Start local dev server with auth + API emulation
swa init
swa start ./build --api-location ./api
 
# Deploy directly from CLI (alternative to GitHub Actions)
swa deploy ./build --deployment-token <your-token> --env production

{
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<TENANT_ID>/v2.0",
          "clientIdSettingName": "AAD_CLIENT_ID",
          "clientSecretSettingName": "AAD_CLIENT_SECRET"
        }
      }
    }
  },
  "routes": [
    {
      "route": "/login",
      "rewrite": "/.auth/login/aad"
    },
    {
      "route": "/dashboard/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/admin/*",
      "allowedRoles": ["admin"]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/login"
    }
  }
}

// In your frontend code
async function getUserInfo() {
  const response = await fetch('/.auth/me');
  const { clientPrincipal } = await response.json();
 
  if (clientPrincipal) {
    console.log(`Logged in as: ${clientPrincipal.userDetails}`);
    console.log(`Provider: ${clientPrincipal.identityProvider}`);
    console.log(`Roles: ${clientPrincipal.userRoles.join(', ')}`);
  }
 
  return clientPrincipal;
}

// api/GetProducts/index.js
module.exports = async function (context, req) {
  const products = [
    { id: 1, name: "Azure Fundamentals Lab", price: 0, tier: "free" },
    { id: 2, name: "Advanced Networking Lab", price: 29, tier: "premium" },
    { id: 3, name: "Security Operations Lab", price: 29, tier: "premium" }
  ];
 
  // Access authenticated user info (passed automatically by SWA)
  const header = req.headers["x-ms-client-principal"];
  let user = null;
 
  if (header) {
    const encoded = Buffer.from(header, "base64");
    user = JSON.parse(encoded.toString("ascii"));
  }
 
  // Filter based on user role
  const filtered = user?.userRoles?.includes("premium")
    ? products
    : products.filter(p => p.tier === "free");
 
  context.res = {
    status: 200,
    headers: { "Content-Type": "application/json" },
    body: filtered
  };
};

// api/GetProducts/function.json
{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

# .github/workflows/azure-static-web-apps-<random-name>.yml
name: Azure Static Web Apps CI/CD
 
on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
 
jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          lfs: false
 
      - name: Build And Deploy
        id: builddeploy
        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 source code path
          app_location: "/"
          # API source code path - optional
          api_location: "api"
          # Built app content directory
          output_location: "build"
 
  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"