
Azure Static Web Apps
Stand up Azure Static Web Apps with SWA CLI, local emulator, staticwebapp.config.json, Functions APIs, and GitHub Actions deploy.
Overview
azure-static-web-apps is an agent skill most often used in Ship (also Build integrations) that creates, configures, and deploys Azure Static Web Apps with the SWA CLI and optional Functions APIs.
Install
npx skills add https://github.com/github/awesome-copilot --skill azure-static-web-appsWhat is this skill?
- Mandatory flow: `swa init` first—never hand-author `swa-cli.config.json`
- Local emulator via `swa start` at http://localhost:4280 with API proxy and auth simulation
- Deploy path: `swa login` then `swa deploy` to Azure
- Separates `swa-cli.config.json` (CLI, from init) vs `staticwebapp.config.json` (routes, auth, headers, API runtime)
- Covers optional Azure Functions APIs, framework auto-detection, and GitHub Actions CI/CD for SWA
- Quick start lists 4 CLI steps: swa init, swa start, swa login, swa deploy
- Local emulator default URL documented as http://localhost:4280
Adoption & trust: 8.7k installs on skills.sh; 34.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a static site or Jamstack app but lack a repeatable Azure path from local SWA emulator to deployed SWA with correct config files and CI/CD.
Who is it for?
Indie builders shipping static or Jamstack frontends to Azure who want SWA CLI init/start/deploy instead of portal-only setup.
Skip if: Full container/Kubernetes backends, non-Azure clouds only, or teams that refuse Node/npm for `@azure/static-web-apps-cli`.
When should I use this skill?
Creating, configuring, or deploying Azure Static Web Apps; SWA local development; staticwebapp.config.json; Azure Functions APIs on SWA; or GitHub Actions CI/CD for Static Web Apps.
What do I get? / Deliverables
You get an init-driven SWA CLI setup, working local emulator, authenticated deploy commands, and guidance for staticwebapp.config.json plus GitHub Actions when needed.
- swa-cli.config.json produced by `swa init`
- Configured staticwebapp.config.json for routes, auth, and headers
- Deployed Azure Static Web App and optional GitHub Actions workflow guidance
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Ship/launch is the canonical shelf because the skill’s payoff is authenticated deploy and CI/CD to Azure, even though local `swa init` starts earlier in build. Launch subphase fits first production URL, deployment tokens, and release automation—not just coding the static frontend.
Where it fits
Run `swa init` and `swa start` to proxy a new Azure Functions API beside your static frontend on localhost:4280.
Authenticate with `swa login` and `swa deploy` to push the first production SWA after validating routes in staticwebapp.config.json.
Let SWA CLI auto-detect your framework output folder before tightening emulator settings for local auth testing.
How it compares
Skill-guided SWA CLI workflow—not a generic Terraform/IaC pack or an MCP server for Azure Resource Manager.
Common Questions / FAQ
Who is azure-static-web-apps for?
Solo developers deploying static sites or SWA plus Azure Functions to Azure with local emulation and GitHub Actions CI/CD.
When should I use azure-static-web-apps?
Use it in Build (integrations) while wiring SWA and Functions locally, and in Ship/Launch when running `swa deploy`, configuring routes/auth in staticwebapp.config.json, or adding GitHub Actions.
Is azure-static-web-apps safe to install?
Review the Security Audits panel on this page; deploy and login steps touch Azure credentials and npm-installed CLI tooling.
SKILL.md
READMESKILL.md - Azure Static Web Apps
## Overview Azure Static Web Apps (SWA) hosts static frontends with optional serverless API backends. The SWA CLI (`swa`) provides local development emulation and deployment capabilities. **Key features:** - Local emulator with API proxy and auth simulation - Framework auto-detection and configuration - Direct deployment to Azure - Database connections support **Config files:** - `swa-cli.config.json` - CLI settings, **created by `swa init`** (never create manually) - `staticwebapp.config.json` - Runtime config (routes, auth, headers, API runtime) - can be created manually ## General Instructions ### Installation ```bash npm install -D @azure/static-web-apps-cli ``` Verify: `npx swa --version` ### Quick Start Workflow **IMPORTANT: Always use `swa init` to create configuration files. Never manually create `swa-cli.config.json`.** 1. `swa init` - **Required first step** - auto-detects framework and creates `swa-cli.config.json` 2. `swa start` - Run local emulator at `http://localhost:4280` 3. `swa login` - Authenticate with Azure 4. `swa deploy` - Deploy to Azure ### Configuration Files **swa-cli.config.json** - Created by `swa init`, do not create manually: - Run `swa init` for interactive setup with framework detection - Run `swa init --yes` to accept auto-detected defaults - Edit the generated file only to customize settings after initialization Example of generated config (for reference only): ```json { "$schema": "https://aka.ms/azure/static-web-apps-cli/schema", "configurations": { "app": { "appLocation": ".", "apiLocation": "api", "outputLocation": "dist", "appBuildCommand": "npm run build", "run": "npm run dev", "appDevserverUrl": "http://localhost:3000" } } } ``` **staticwebapp.config.json** (in app source or output folder) - This file CAN be created manually for runtime configuration: ```json { "navigationFallback": { "rewrite": "/index.html", "exclude": ["/images/*", "/css/*"] }, "routes": [ { "route": "/api/*", "allowedRoles": ["authenticated"] } ], "platform": { "apiRuntime": "node:20" } } ``` ## Command-line Reference ### swa login Authenticate with Azure for deployment. ```bash swa login # Interactive login swa login --subscription-id <id> # Specific subscription swa login --clear-credentials # Clear cached credentials ``` **Flags:** `--subscription-id, -S` | `--resource-group, -R` | `--tenant-id, -T` | `--client-id, -C` | `--client-secret, -CS` | `--app-name, -n` ### swa init Configure a new SWA project based on an existing frontend and (optional) API. Detects frameworks automatically. ```bash swa init # Interactive setup swa init --yes # Accept defaults ``` ### swa build Build frontend and/or API. ```bash swa build # Build using config swa build --auto # Auto-detect and build swa build myApp # Build specific configuration ``` **Flags:** `--app-location, -a` | `--api-location, -i` | `--output-location, -O` | `--app-build-command, -A` | `--api-build-command, -I` ### swa start Start local development emulator. ```bash swa start # Serve from outputLocation swa start ./dist # Serve specific folder swa start http://localhost:3000 # Proxy to dev server swa start ./dist --api-location ./api # With API folder swa start http://localhost:3000 --run "npm start" # Auto-start dev server ``` **Common framework ports:** | Framework | Port | |-----------|------| | React/Vue/Next.js | 3000 | | Angula