{"id":"444390e2-5f3a-4b52-9e90-89cde4f5d70e","shortId":"NEABCK","kind":"skill","title":"azure-static-web-apps","tagline":"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 App","description":"## Overview\n\nAzure Static Web Apps (SWA) hosts static frontends with optional serverless API backends. The SWA CLI (`swa`) provides local development emulation and deployment capabilities.\n\n**Key features:**\n- Local emulator with API proxy and auth simulation\n- Framework auto-detection and configuration\n- Direct deployment to Azure\n- Database connections support\n\n**Config files:**\n- `swa-cli.config.json` - CLI settings, **created by `swa init`** (never create manually)\n- `staticwebapp.config.json` - Runtime config (routes, auth, headers, API runtime) - can be created manually\n\n## General Instructions\n\n### Installation\n\n```bash\nnpm install -D @azure/static-web-apps-cli\n```\n\nVerify: `npx swa --version`\n\n### Quick Start Workflow\n\n**IMPORTANT: Always use `swa init` to create configuration files. Never manually create `swa-cli.config.json`.**\n\n1. `swa init` - **Required first step** - auto-detects framework and creates `swa-cli.config.json`\n2. `swa start` - Run local emulator at `http://localhost:4280`\n3. `swa login` - Authenticate with Azure\n4. `swa deploy` - Deploy to Azure\n\n### Configuration Files\n\n**swa-cli.config.json** - Created by `swa init`, do not create manually:\n- Run `swa init` for interactive setup with framework detection\n- Run `swa init --yes` to accept auto-detected defaults\n- Edit the generated file only to customize settings after initialization\n\nExample of generated config (for reference only):\n```json\n{\n  \"$schema\": \"https://aka.ms/azure/static-web-apps-cli/schema\",\n  \"configurations\": {\n    \"app\": {\n      \"appLocation\": \".\",\n      \"apiLocation\": \"api\",\n      \"outputLocation\": \"dist\",\n      \"appBuildCommand\": \"npm run build\",\n      \"run\": \"npm run dev\",\n      \"appDevserverUrl\": \"http://localhost:3000\"\n    }\n  }\n}\n```\n\n**staticwebapp.config.json** (in app source or output folder) - This file CAN be created manually for runtime configuration:\n```json\n{\n  \"navigationFallback\": {\n    \"rewrite\": \"/index.html\",\n    \"exclude\": [\"/images/*\", \"/css/*\"]\n  },\n  \"routes\": [\n    { \"route\": \"/api/*\", \"allowedRoles\": [\"authenticated\"] }\n  ],\n  \"platform\": {\n    \"apiRuntime\": \"node:20\"\n  }\n}\n```\n\n## Command-line Reference\n\n### swa login\n\nAuthenticate with Azure for deployment.\n\n```bash\nswa login                              # Interactive login\nswa login --subscription-id <id>       # Specific subscription\nswa login --clear-credentials          # Clear cached credentials\n```\n\n**Flags:** `--subscription-id, -S` | `--resource-group, -R` | `--tenant-id, -T` | `--client-id, -C` | `--client-secret, -CS` | `--app-name, -n`\n\n### swa init\n\nConfigure a new SWA project based on an existing frontend and (optional) API. Detects frameworks automatically.\n\n```bash\nswa init                    # Interactive setup\nswa init --yes              # Accept defaults\n```\n\n### swa build\n\nBuild frontend and/or API.\n\n```bash\nswa build                   # Build using config\nswa build --auto            # Auto-detect and build\nswa build myApp             # Build specific configuration\n```\n\n**Flags:** `--app-location, -a` | `--api-location, -i` | `--output-location, -O` | `--app-build-command, -A` | `--api-build-command, -I`\n\n### swa start\n\nStart local development emulator.\n\n```bash\nswa start                                    # Serve from outputLocation\nswa start ./dist                             # Serve specific folder\nswa start http://localhost:3000              # Proxy to dev server\nswa start ./dist --api-location ./api        # With API folder\nswa start http://localhost:3000 --run \"npm start\"  # Auto-start dev server\n```\n\n**Common framework ports:**\n| Framework | Port |\n|-----------|------|\n| React/Vue/Next.js | 3000 |\n| Angular | 4200 |\n| Vite | 5173 |\n\n**Key flags:**\n- `--port, -p` - Emulator port (default: 4280)\n- `--api-location, -i` - API folder path\n- `--api-port, -j` - API port (default: 7071)\n- `--run, -r` - Command to start dev server\n- `--open, -o` - Open browser automatically\n- `--ssl, -s` - Enable HTTPS\n\n### swa deploy\n\nDeploy to Azure Static Web Apps.\n\n```bash\nswa deploy                              # Deploy using config\nswa deploy ./dist                       # Deploy specific folder\nswa deploy --env production             # Deploy to production\nswa deploy --deployment-token <TOKEN>   # Use deployment token\nswa deploy --dry-run                    # Preview without deploying\n```\n\n**Get deployment token:**\n- Azure Portal: Static Web App → Overview → Manage deployment token\n- CLI: `swa deploy --print-token`\n- Environment variable: `SWA_CLI_DEPLOYMENT_TOKEN`\n\n**Key flags:**\n- `--env` - Target environment (`preview` or `production`)\n- `--deployment-token, -d` - Deployment token\n- `--app-name, -n` - Azure SWA resource name\n\n### swa db\n\nInitialize database connections.\n\n```bash\nswa db init --database-type mssql\nswa db init --database-type postgresql\nswa db init --database-type cosmosdb_nosql\n```\n\n## Scenarios\n\n### Create SWA from Existing Frontend and Backend\n\n**Always run `swa init` before `swa start` or `swa deploy`. Do not manually create `swa-cli.config.json`.**\n\n```bash\n# 1. Install CLI\nnpm install -D @azure/static-web-apps-cli\n\n# 2. Initialize - REQUIRED: creates swa-cli.config.json with auto-detected settings\nnpx swa init              # Interactive mode\n# OR\nnpx swa init --yes        # Accept auto-detected defaults\n\n# 3. Build application (if needed)\nnpm run build\n\n# 4. Test locally (uses settings from swa-cli.config.json)\nnpx swa start\n\n# 5. Deploy\nnpx swa login\nnpx swa deploy --env production\n```\n\n### Add Azure Functions Backend\n\n1. **Create API folder:**\n```bash\nmkdir api && cd api\nfunc init --worker-runtime node --model V4\nfunc new --name message --template \"HTTP trigger\"\n```\n\n2. **Example function** (`api/src/functions/message.js`):\n```javascript\nconst { app } = require('@azure/functions');\n\napp.http('message', {\n    methods: ['GET', 'POST'],\n    authLevel: 'anonymous',\n    handler: async (request) => {\n        const name = request.query.get('name') || 'World';\n        return { jsonBody: { message: `Hello, ${name}!` } };\n    }\n});\n```\n\n3. **Set API runtime** in `staticwebapp.config.json`:\n```json\n{\n  \"platform\": { \"apiRuntime\": \"node:20\" }\n}\n```\n\n4. **Update CLI config** in `swa-cli.config.json`:\n```json\n{\n  \"configurations\": {\n    \"app\": { \"apiLocation\": \"api\" }\n  }\n}\n```\n\n5. **Test locally:**\n```bash\nnpx swa start ./dist --api-location ./api\n# Access API at http://localhost:4280/api/message\n```\n\n**Supported API runtimes:** `node:18`, `node:20`, `node:22`, `dotnet:8.0`, `dotnet-isolated:8.0`, `python:3.10`, `python:3.11`\n\n### Set Up GitHub Actions Deployment\n\n1. **Create SWA resource** in Azure Portal or via Azure CLI\n2. **Link GitHub repository** - workflow auto-generated, or create manually:\n\n`.github/workflows/azure-static-web-apps.yml`:\n```yaml\nname: Azure Static Web Apps CI/CD\n\non:\n  push:\n    branches: [main]\n  pull_request:\n    types: [opened, synchronize, reopened, closed]\n    branches: [main]\n\njobs:\n  build_and_deploy:\n    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - name: Build And Deploy\n        uses: Azure/static-web-apps-deploy@v1\n        with:\n          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}\n          repo_token: ${{ secrets.GITHUB_TOKEN }}\n          action: upload\n          app_location: /\n          api_location: api\n          output_location: dist\n\n  close_pr:\n    if: github.event_name == 'pull_request' && github.event.action == 'closed'\n    runs-on: ubuntu-latest\n    steps:\n      - uses: Azure/static-web-apps-deploy@v1\n        with:\n          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}\n          action: close\n```\n\n3. **Add secret:** Copy deployment token to repository secret `AZURE_STATIC_WEB_APPS_API_TOKEN`\n\n**Workflow settings:**\n- `app_location` - Frontend source path\n- `api_location` - API source path\n- `output_location` - Built output folder\n- `skip_app_build: true` - Skip if pre-built\n- `app_build_command` - Custom build command\n\n## Troubleshooting\n\n| Issue | Solution |\n|-------|----------|\n| 404 on client routes | Add `navigationFallback` with `rewrite: \"/index.html\"` to `staticwebapp.config.json` |\n| API returns 404 | Verify `api` folder structure, ensure `platform.apiRuntime` is set, check function exports |\n| Build output not found | Verify `output_location` matches actual build output directory |\n| Auth not working locally | Use `/.auth/login/<provider>` to access auth emulator UI |\n| CORS errors | APIs under `/api/*` are same-origin; external APIs need CORS headers |\n| Deployment token expired | Regenerate in Azure Portal → Static Web App → Manage deployment token |\n| Config not applied | Ensure `staticwebapp.config.json` is in `app_location` or `output_location` |\n| Local API timeout | Default is 45 seconds; optimize function or check for blocking calls |\n\n**Debug commands:**\n```bash\nswa start --verbose log        # Verbose output\nswa deploy --dry-run           # Preview deployment\nswa --print-config             # Show resolved configuration\n```","tags":["azure","static","web","apps","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest"],"capabilities":["skill","source-github","skill-azure-static-web-apps","topic-agent-skills","topic-agents","topic-awesome","topic-custom-agents","topic-github-copilot","topic-hacktoberfest","topic-prompt-engineering"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/azure-static-web-apps","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add github/awesome-copilot","source_repo":"https://github.com/github/awesome-copilot","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 33270 github stars · SKILL.md body (9,157 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:52:06.104Z","embedding":null,"createdAt":"2026-04-18T20:25:50.626Z","updatedAt":"2026-05-18T18:52:06.104Z","lastSeenAt":"2026-05-18T18:52:06.104Z","tsv":"'/.auth/login':1064 '/api':278,450,807,1074 '/azure/static-web-apps-cli/schema':234 '/css':275 '/dist':432,446,532,803 '/images':274 '/index.html':272,1030 '1':149,657,721,837 '18':817 '2':162,664,745,848 '20':284,784,819 '22':821 '3':171,689,774,972 '3.10':829 '3.11':831 '3000':252,439,457,472 '4':177,697,785 '404':1022,1035 '4200':474 '4280':170,484 '4280/api/message':812 '45':1114 '5':707,796 '5173':476 '7071':499 '8.0':823,827 'accept':208,367,684 'access':808,1066 'action':43,835,928,970 'actions/checkout':902 'actual':1055 'ad':33 'add':717,973,1026 'aka.ms':233 'aka.ms/azure/static-web-apps-cli/schema':232 'allowedrol':279 'alway':137,641 'and/or':373 'angular':473 'anonym':760 'api':36,61,79,115,239,355,374,401,414,448,452,486,489,493,496,723,727,729,776,795,805,809,814,916,922,932,934,962,968,985,994,996,1033,1037,1072,1080,1110 'api-build-command':413 'api-loc':400,447,485,804 'api-port':492 'api/src/functions/message.js':748 'apiloc':238,794 'apiruntim':282,782 'app':5,14,48,53,236,255,338,397,409,523,566,598,751,793,865,915,921,930,961,967,984,989,1005,1013,1093,1104 'app-build-command':408 'app-loc':396 'app-nam':337,597 'app.http':754 'appbuildcommand':242 'appdevserverurl':250 'appli':1099 'applic':691 'apploc':237 'async':762 'auth':82,113,1059,1067 'authent':174,280,291 'authlevel':759 'auto':86,156,210,383,385,462,671,686,854 'auto-detect':85,155,209,384,670,685 'auto-gener':853 'auto-start':461 'automat':358,511 'azur':2,11,25,34,50,93,176,182,293,520,562,601,718,842,846,862,912,958,981,1089 'azure-static-web-app':1 'azure/functions':753 'azure/static-web-apps-cli':128,663 'azure/static-web-apps-deploy':909,955 'backend':62,640,720 'base':348 'bash':124,296,359,375,424,524,610,656,725,799,1125 'block':1121 'branch':869,878 'browser':510 'build':245,370,371,377,378,382,388,390,392,410,415,690,696,881,905,1006,1014,1017,1047,1056 'built':1001,1012 'c':332 'cach':314 'call':1122 'capabl':73 'cd':728 'check':1044,1119 'ci/cd':44,866 'clear':311,313 'clear-credenti':310 'cli':18,65,100,571,580,659,787,847 'client':330,334,1024 'client-id':329 'client-secret':333 'close':877,893,938,946,971 'command':286,411,416,502,1015,1018,1124 'command-lin':285 'common':466 'config':97,111,226,380,529,788,1097,1142 'configur':8,31,89,143,183,235,268,343,394,792,1145 'connect':95,609 'const':750,764 'copi':975 'cor':1070,1082 'cosmosdb':631 'creat':7,102,107,119,142,147,160,186,192,264,634,654,667,722,838,857 'credenti':312,315 'cs':336 'custom':219,1016 'd':127,594,662 'databas':94,608,615,622,629 'database-typ':614,621,628 'db':606,612,619,626 'debug':1123 'default':212,368,483,498,688,1112 'deploy':10,21,72,91,179,180,295,517,518,526,527,531,533,537,540,544,546,549,552,558,560,569,573,581,592,595,650,708,714,836,883,907,976,1084,1095,1133,1138 'deployment-token':545,591 'detect':87,157,202,211,356,386,672,687 'dev':249,442,464,505 'develop':30,69,422 'direct':90 'directori':1058 'dist':241,937 'dotnet':822,825 'dotnet-isol':824 'dri':554,1135 'dry-run':553,1134 'edit':213 'emul':70,77,167,423,481,1068 'enabl':514 'ensur':1040,1100 'env':538,585,715 'environ':577,587 'error':1071 'exampl':223,746 'exclud':273 'exist':351,637 'expir':1086 'export':1046 'extern':1079 'featur':75 'file':98,144,184,216,261 'first':153 'flag':316,395,478,584 'folder':259,435,453,490,535,724,1003,1038 'found':1050 'framework':84,158,201,357,467,469 'frontend':57,352,372,638,991 'func':730,738 'function':35,719,747,1045,1117 'general':121 'generat':215,225,855 'get':559,757 'github':42,834,850 'github.event':885,888,941 'github.event.action':892,945 'github/workflows/azure-static-web-apps.yml':859 'group':323 'handler':761 'header':114,1083 'hello':772 'help':6 'host':55 'http':743 'https':515 'id':305,319,327,331 'import':136 'init':105,140,151,189,196,205,342,361,365,613,620,627,644,676,682,731 'initi':222,607,665 'instal':123,126,658,661 'instruct':122 'interact':198,299,362,677 'isol':826 'issu':1020 'j':495 'javascript':749 'job':880 'json':230,269,780,791 'jsonbodi':770 'key':74,477,583 'latest':899,952 'line':287 'link':849 'local':29,68,76,166,421,699,798,1062,1109 'localhost':169,251,438,456,811 'locat':398,402,406,449,487,806,931,933,936,990,995,1000,1053,1105,1108 'log':1129 'login':173,290,298,300,302,309,711 'main':870,879 'manag':568,1094 'manual':108,120,146,193,265,653,858 'match':1054 'messag':741,755,771 'method':756 'mkdir':726 'mode':678 'model':736 'mssql':617 'myapp':391 'n':340,600 'name':339,599,604,740,765,767,773,861,886,889,904,942 'navigationfallback':270,1027 'need':693,1081 'never':106,145 'new':345,739 'node':283,735,783,816,818,820 'nosql':632 'npm':125,243,247,459,660,694 'npx':130,674,680,704,709,712,800 'o':407,508 'open':507,509,874 'optim':1116 'option':59,354 'origin':1078 'output':258,405,935,999,1002,1048,1052,1057,1107,1131 'output-loc':404 'outputloc':240,429 'overview':49,567 'p':480 'path':491,993,998 'platform':281,781 'platform.apiruntime':1041 'port':468,470,479,482,494,497 'portal':563,843,1090 'post':758 'postgresql':624 'pr':939 'pre':1011 'pre-built':1010 'preview':556,588,1137 'print':575,1141 'print-config':1140 'print-token':574 'product':539,542,590,716 'project':347 'provid':67 'proxi':80,440 'pull':871,890,943 'push':868,887 'python':828,830 'quick':133 'r':324,501 'react/vue/next.js':471 'refer':228,288 'regener':1087 'reopen':876 'repo':924 'repositori':851,979 'request':763,872,891,944 'request.query.get':766 'requir':152,666,752 'resolv':1144 'resourc':322,603,840 'resource-group':321 'return':769,1034 'rewrit':271,1029 'rout':112,276,277,1025 'run':165,194,203,244,246,248,458,500,555,642,695,895,948,1136 'runs-on':894,947 'runtim':110,116,267,734,777,815 'same-origin':1076 'scenario':633 'schema':231 'second':1115 'secret':335,974,980 'secrets.azure':918,964 'secrets.github':926 'serv':427,433 'server':443,465,506 'serverless':60 'set':26,40,101,220,673,701,775,832,988,1043 'setup':199,363 'show':1143 'simul':83 'site':23 'skill' 'skill-azure-static-web-apps' 'skip':1004,1008 'solut':1021 'sourc':256,992,997 'source-github' 'specif':306,393,434,534 'ssl':512 'start':134,164,419,420,426,431,437,445,455,460,463,504,647,706,802,1127 'static':3,12,22,46,51,56,521,564,863,913,919,959,965,982,1091 'staticwebapp.config.json':32,109,253,779,1032,1101 'step':154,900,953 'structur':1039 'subscript':304,307,318 'subscription-id':303,317 'support':96,813 'swa':17,28,38,54,64,66,104,131,139,150,163,172,178,188,195,204,289,297,301,308,341,346,360,364,369,376,381,389,418,425,430,436,444,454,516,525,530,536,543,551,572,579,602,605,611,618,625,635,643,646,649,675,681,705,710,713,801,839,1126,1132,1139 'swa-cli.config.json':99,148,161,185,655,668,703,790 'synchron':875 'target':586 'templat':742 'tenant':326 'tenant-id':325 'test':698,797 'timeout':1111 'token':547,550,561,570,576,582,593,596,917,923,925,927,963,969,977,986,1085,1096 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'trigger':744 'troubleshoot':1019 'true':1007 'type':616,623,630,873 'ubuntu':898,951 'ubuntu-latest':897,950 'ui':1069 'updat':786 'upload':929 'use':15,19,138,379,528,548,700,901,908,954,1063 'v1':910,956 'v3':903 'v4':737 'variabl':578 'verbos':1128,1130 'verifi':129,1036,1051 'version':132 'via':845 'vite':475 'web':4,13,47,52,522,565,864,914,920,960,966,983,1092 'without':557 'work':1061 'worker':733 'worker-runtim':732 'workflow':135,852,987 'world':768 'yaml':860 'yes':206,366,683","prices":[{"id":"b7d37554-2f3d-4354-81a7-ec1b2fc14559","listingId":"444390e2-5f3a-4b52-9e90-89cde4f5d70e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-04-18T20:25:50.626Z"}],"sources":[{"listingId":"444390e2-5f3a-4b52-9e90-89cde4f5d70e","source":"github","sourceId":"github/awesome-copilot/azure-static-web-apps","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/azure-static-web-apps","isPrimary":false,"firstSeenAt":"2026-04-18T21:48:27.513Z","lastSeenAt":"2026-05-18T18:52:06.104Z"},{"listingId":"444390e2-5f3a-4b52-9e90-89cde4f5d70e","source":"skills_sh","sourceId":"github/awesome-copilot/azure-static-web-apps","sourceUrl":"https://skills.sh/github/awesome-copilot/azure-static-web-apps","isPrimary":true,"firstSeenAt":"2026-04-18T20:25:50.626Z","lastSeenAt":"2026-05-07T22:40:18.261Z"}],"details":{"listingId":"444390e2-5f3a-4b52-9e90-89cde4f5d70e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"azure-static-web-apps","github":{"repo":"github/awesome-copilot","stars":33270,"topics":["agent-skills","agents","ai","awesome","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"license":"mit","html_url":"https://github.com/github/awesome-copilot","pushed_at":"2026-05-18T01:26:59Z","description":"Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.","skill_md_sha":"ae34169532159ad0f386c8032921f2b405e0a37d","skill_md_path":"skills/azure-static-web-apps/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/azure-static-web-apps"},"layout":"multi","source":"github","category":"awesome-copilot","frontmatter":{"name":"azure-static-web-apps","description":"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."},"skills_sh_url":"https://skills.sh/github/awesome-copilot/azure-static-web-apps"},"updatedAt":"2026-05-18T18:52:06.104Z"}}