Skip to content
Skillpedia
Deploy & cloud (DevOps)40k · #5031

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

https://github.com/github/awesome-copilot/blob/main/skills/azure-static-web-apps/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/github/awesome-copilot/blob/main/skills/azure-static-web-apps/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
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-apps

Or download just the file:

curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/azure-static-web-apps/SKILL.md -o SKILL.md
Technical 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 by swa 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.

  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):

{
  "$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

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills