azure-static-web-apps_skill

Overview

This skill helps you create, configure, and deploy Azure Static Web Apps using the SWA CLI. It guides local emulation, runtime configuration, adding Azure Functions APIs, and setting up GitHub Actions CI/CD for Static Web Apps. Use it to streamline build, test, and deploy workflows for static frontends with optional serverless backends.

How this skill works

The skill leverages the @azure/static-web-apps-cli to initialize projects, start a local emulator, build assets, and deploy to Azure. It enforces using swa init to generate the CLI config, explains staticwebapp.config.json for runtime routing and auth, and maps commands and flags for login, start, build, db, and deploy operations. It also provides examples for adding Azure Functions and generating GitHub Actions workflows.

When to use it

• Setting up local development and auth emulation for a static site
• Deploying a static frontend (React, Vue, Angular, Vite, Next) to Azure
• Adding or testing Azure Functions APIs alongside a static frontend
• Configuring routing, auth, or API runtime via staticwebapp.config.json
• Automating CI/CD with GitHub Actions for production or preview environments

Best practices

• Always run swa init to generate swa-cli.config.json; do not create it manually
• Keep staticwebapp.config.json in your app source or output folder for runtime rules
• Use npx swa start to emulate both frontend and API locally before deploying
• Store deployment tokens as GitHub secrets (AZURE_STATIC_WEB_APPS_API_TOKEN) for workflows
• Set platform.apiRuntime in staticwebapp.config.json to match your function runtime

Example use cases

• Initialize a new SWA project for a React app and run the local emulator at http://localhost:4280
• Add a Node Azure Function under api/ and test it via the SWA emulator at /api/*
• Build production assets, run npx swa deploy --env production with a deployment token
• Create a GitHub Actions workflow that builds and deploys preview and production branches
• Configure navigationFallback in staticwebapp.config.json to fix SPA 404s on client routes