← ClaudeAtlas

deploying-azure-static-web-appslisted

Deploys React + Azure Functions apps to Azure Static Web Apps with managed API functions, including the CommonJS / index.ts import / route-registration gotchas that make new functions 404 silently. Provides the SWA Bicep module, staticwebapp.config.json routing + security headers, and the API entrypoint convention. Use when scaffolding a SWA-based project, adding a new API function, or fixing a deployed function that returns 404 even though it compiled successfully.
alexpizarro/azure-lean-stack-skills · ★ 1 · DevOps & Infrastructure · score 74
Install: claude install-skill alexpizarro/azure-lean-stack-skills
# Deploying Azure Static Web Apps The default deployment target for React + Functions web apps. Free tier, global CDN, managed Functions baked in, zero ongoing cost when idle. ## When to use SWA vs FC1 vs Container Apps | Need | Use | |------|-----| | CRUD REST API, React frontend, HTTP-only, < 30s requests | **SWA managed functions** (this skill) | | Timer triggers, queue triggers, AI workloads, > 30s execution | [FC1 Flex Consumption](../deploying-fc1-flex-consumption-functions/SKILL.md) | | Long-running server, WebSocket/SSE, custom Docker runtime | [Container Apps](../deploying-azure-container-apps/SKILL.md) | ## Project structure ``` frontend/ — React 19 + Vite 6 + TypeScript ├── src/ │ ├── App.tsx │ └── services/api.ts ├── public/ │ └── staticwebapp.config.json — routing + security headers ├── vite.config.ts — proxy /api/* → localhost:7071 └── package.json api/ — Managed Azure Functions v4 (Node 22) ├── src/ │ ├── index.ts — Entry point — IMPORT EVERY FUNCTION FILE HERE │ ├── functions/ │ │ ├── hello.ts — app.http(...) at the bottom registers the route │ │ ├── getItems.ts │ │ └── createItem.ts │ └── lib/ │ └── database.ts — mssql pool, module-level singleton ├── host.json ├── tsconfig.json — "module": "commonjs" required for SWA ├── package.json — "main": "dist/index.js" (specific path, not glob) └── lo