skills.rest
taiki-yoshida
taiki-yoshidaCOMMUNITY
Explore all skills by this author →
Website𝕏@TaikiYoshidaENGitHub

azure-swa-functions-stack

Builds a React + Vite frontend with standalone Azure Functions backend on SWA.

12|Updated Apr 12, 2026
Search Tags:#deployment#react#azure#vite#functions#cors#swa
One-click install
npx skills add https://github.com/taiki-yoshida/claude-code-skills --skill azure-swa-functions-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: azure-swa-functions-stack
Source: https://github.com/taiki-yoshida/claude-code-skills/tree/main/azure-swa-functions-stack
Command: npx skills add https://github.com/taiki-yoshida/claude-code-skills --skill azure-swa-functions-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Azure SWA + Functions provides a pattern for hosting a React + Vite frontend alongside a standalone Azure Functions backend, but getting this setup right (CORS, deployment workflow, and build-time config) is non-trivial without a blueprint.

Core Features & Use Cases

  • Project layout: frontend + functions directories with a clear separation for frontend assets and backend APIs.
  • Dev/production patterns: Vite proxy for local development and production build steps that point the frontend to the Functions API; proper staticwebapp.config.json for SPA routing; CORS configuration guidance.
  • Use case: teams wanting a cheap hosting option for admin tools or demos, or needing a full-stack pattern with a standalone Functions backend.

Quick Start

Copy azure-swa-functions-stack into your Claude Code skills directory and start deploying a React + Vite frontend with a standalone Functions backend.

Frequently Asked Questions about azure-swa-functions-stack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I deploy a React and Vite frontend on Azure Static Web Apps with a standalone Functions backend?▼

To deploy a React and Vite frontend on Azure Static Web Apps with a standalone Functions backend, you need a clear project layout separating frontend assets and APIs, a staticwebapp.config.json for SPA routing, and SWA CLI tooling to manage production builds and deployment workflows.

What's the best way to configure CORS for an Azure Functions backend used by a React Vite frontend?▼

Configuring CORS for an Azure Functions backend and React Vite frontend requires setting up a Vite dev proxy for local development and applying production CORS configuration to allow the deployed Static Web Apps frontend to securely communicate with the standalone Functions API.

Why does my Vite proxy fail when connecting to a standalone Azure Functions backend locally?▼

A Vite proxy fails connecting to a standalone Azure Functions backend when local development proxy settings are misconfigured or the Functions app is not running, requiring correct proxy targets in the Vite config to match the local API endpoints.

Do I need to use the built-in SWA API or can I use a standalone Azure Functions app?▼

You can use a standalone Azure Functions app instead of the built-in SWA API. This pattern requires configuring production CORS, build-time environment variables, and separate deployment workflows, providing a full-stack setup for admin tools or demos.

How does staticwebapp.config.json handle SPA routing for a Vite frontend on Azure SWA?▼

The staticwebapp.config.json file handles SPA routing for a Vite frontend on Azure SWA by defining navigation fallback rules, ensuring client-side routes resolve correctly without server-side routing errors during production deployment.

Related Skills

Explore More Software Engineering Skills→
githubgithub
37.6k

azure-static-web-apps

Automate Azure Static Web Apps setup and deployment using the SWA CLI.

Official
Intermediate
unthinkmediaunthinkmedia

share-experiment

Deploy Coherence preview experiments to Azure Static Web Apps with GitHub Actions.

Community
Advanced
vertivolatamvertivolatam
1

Microsoft Azure Backend

Deploy Flutter application backends on Microsoft Azure with AKS, Functions, SQL, Cosmos DB, Blob Storage, and Key Vault.

Official
Advanced
ArroganceGArroganceG

fullstack-developer

Automate full-stack web development tasks across React/Next.js, Node.js, and databases.

Community
Advanced