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: