← 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 72
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 vs App Service | Need | Use | |------|-----| | CRUD REST API, React frontend, HTTP-only, < 30s requests, build output < 250 MB per environment (500 MB total on Free) | **SWA managed functions** (this skill) | | Timer triggers, queue triggers, AI workloads, > 30s execution, managed identity / Key Vault refs | [FC1 Flex Consumption](../deploying-fc1-flex-consumption-functions/SKILL.md) | | Long-running server, WebSocket/SSE, custom Docker runtime, Next.js with middleware | [Container Apps](../deploying-azure-container-apps/SKILL.md) | | Next.js ISR / SSR that outgrew SWA's **app-size ceiling** (250 MB/env Free, 500 MB/env Standard), always-on with no cold start | App Service **B1** (~US$13/mo/env; share the plan with a Function App). Proven: `trg-directory-website`. Not a pack skill yet — a deliberate fixed-cost trade, documented in cost-guardrails "Known floors". | SWA's Next.js hybrid (SSR) support is preview and breaks with middleware on Next ≥13.4; `BC-Quick Check In` (Next 16 + middleware) moved to Container Apps for that reason. ## Project structure ``` frontend/ — React 19 + Vite 8 + TypeScript ├── src/ │ ├── App.tsx │ └── services/api.ts ├── public/ │ └── staticwebapp.config.json — routing + security headers ├── vite.co