azure-static-web-apps
Has your agent deploy static websites to Azure. It configures and manages static web apps, including APIs and CI/CD.
What it does
Helps create, configure, and deploy static websites to Azure. It allows you to test your site locally before deploying it.
When to use it
- ✓When deploying a static site to Azure.
- ✓When setting up the local development environment for static sites.
- ✓When adding an API (Azure Functions) to your static site.
Example of what to ask your AI
“How do I set up my static site to deploy to Azure?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
You use commands in your terminal to set up, test locally, and deploy your site. It helps create important configuration files automatically.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add github/awesome-copilot --skill azure-static-web-appsOr download just the file:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/azure-static-web-apps/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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 byswa init(never create manually)staticwebapp.config.json- Runtime config (routes, auth, headers, API runtime) - can be created manually
General Instructions
Installation
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.
swa init- Required first step - auto-detects framework and createsswa-cli.config.jsonswa start- Run local emulator athttp://localhost:4280swa login- Authenticate with Azureswa deploy- Deploy to Azure
Configuration Files
swa-cli.config.json - Created by swa init, do not create manually:
- Run
swa initfor interactive setup with framework detection - Run
swa init --yesto accept auto-detected defaults - Edit the generated file only to customize settings after initialization
Example of generated config (for reference only):
{
"$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:
{
"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.
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.
swa init # Interactive setup
swa init --yes # Accept defaults
swa build
Build frontend and/or API.
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.
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 |
| 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.
swa deploy # Deploy using config
swa deploy ./dist # Deploy specific folder
swa deploy --env production # Deploy to production
swa deploy --deployment-token <TOKEN> # Use deployment token
swa deploy --dry-run # Preview without deploying
Get deployment token:
- Azure Portal: Static Web App → Overview → Manage deployment token
- CLI:
swa deploy --print-token
…
FAQ
What is `swa init`?
It's the first command you run. It detects your site and creates a configuration file (`swa-cli.config.json`) so the other tools know how to handle your project.
How do I test my site before deploying?
Use the `swa start` command. It starts a local server that simulates the Azure environment, letting you see your site working before you publish it.
How do I deploy my site to Azure?
First, you log in to Azure with `swa login` and then use `swa deploy` to send your site. The `swa init` command has already set up the necessary information.
Details
Original description by the author
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.
repo: github/awesome-copilot
Popularity
- GitHub stars
- 40k
- Ranking position
- #5031
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
acquire-codebase-knowledge
Helps your agent understand and document an existing code project. It's useful for onboarding new people or getting an overview of the architecture.
github/awesome-copilot
acreadiness-assess
Enables your agent to assess a project's readiness for AI and generate a report. It's useful for understanding how well a project is prepared to use AI tools.
github/awesome-copilot
acreadiness-generate-instructions
Helps your agent create instructions for AI tools based on an assessment. It's useful for improving how AI interacts with code and closing identified gaps.
github/awesome-copilot
acreadiness-policy
Enables your agent to help define or apply policies for AI project assessment. It's useful for standardizing how projects are evaluated and ensuring compliance.
github/awesome-copilot
Similar skills
bun-runtime
Has your agent use Bun to run, organize, and test code. It helps choose Bun over other tools and migrate existing projects.
affaan-m/ECC
database-migrations
Helps your agent make safe changes to databases. It ensures changes can be undone and minimizes downtime.
affaan-m/ECC
deployment-patterns
Sets up deployment and CI/CD workflows, containerization, and rollback strategies to ensure safe releases.
affaan-m/ECC