azure-static-web-apps
Helps create, configure, and deploy Azure Static Web Apps using the SWA CLI. Use when deploying static sites to Azure, setting up SWA local development, configuring staticwebapp.config.json, adding Azure Functions APIs to SWA, or setting up GitHub Actions CI/CD for Static Web Apps.
By github · 8,973 installs
npx skills add github/awesome-copilot --skill azure-static-web-apps
Source repository · Upstream listing
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
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):
staticwebapp.config.json (in app source or output folder) This file CAN be created manually for runtime configuration:
Command line Reference
swa login
Authenticate with Azure for deployment.
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.
swa build
Build frontend and/or API.
Flags: app location, a api location, i output location, O app build command, A api build command, I
swa start
Start local development emulator.
Common framework ports:
Framework Port
React/Vue/Next.js 3000
Angular 4200
Vite 5173
Key flags:
port, p Emulator port (default: 4280)
api location, i API folder path
api port, j API port (default: 7071)
run, r Command to start dev server
open, o Open browser automatically
ssl, s Enable HTTPS
swa deploy
Deploy to Azure Static Web Apps.
Get deployment token:
Azure Portal: Static Web App → Overview → Manage deployment token
CLI: swa deploy print token
Environment variable: SWA CLI DEPLOYMENT TOKEN
Key flags:
env Target environment ( preview or production )
deployment token, d Deployment token
app name, n Azure SWA resource name
swa db
Initialize database connections.
Scenarios
Create SWA from Existing Frontend and Backend
Always run swa init before swa start or swa deploy . Do not manually create swa cli.config.json .
Add Azure Functions Backend
1. Create API folder:
2. Example function ( api/src/functions/message.js ):
3. Set API runtime in staticwebapp.config.json :
4. Update CLI config in swa cli.config.json :
5. Test locally:
Supported API runtimes: node:18 , node:20 , node:22 , dotnet:8.0 , dotnet isolated:8.0 , python:3.10 , python:3.11
Set Up GitHub Actions Deployment
1. Create SWA resource in Azure Portal or via Azure CLI
2. Link GitHub repository workflow auto generated, or create manually:
.github/workflows/azure static web apps.yml :
3. Add secret: Copy deployment token to repository secret AZURE STATIC WEB APPS API TOKEN
Workflow settings:
app location Frontend source path
api location API source path
output location Built output folder
skip app build: true Skip if pre built
app build command Custom build command
Troubleshooting
Issue Solution
404 on client routes Add navigationFallback with rewrite: "/index.html" to staticwebapp.config.json
API returns 404 Verify api folder structure, ensure platform.apiRuntime is set, check function exports
Build output not found Verify output location matches actual build output directory
Auth not working locally Use /.auth/login/<provider to access auth emulator UI
CORS errors APIs under /api/ are same origin; external APIs need CORS headers
Deployment token expired Regenerate in Azure Portal → Static Web App → Manage deployment token
Config not applied Ensure staticwebapp.config.json is in app location or output location
Local API timeout Default is 45 seconds; optimize function or check for blocking calls
Debug commands: