Azure Static Web Apps Deployment

Deploy React/Vite applications to Azure Static Web Apps with GitHub Actions CI/CD.

Deployment Workflow

1. Create Azure Static Web App

bash

# Login to Azure
az login

# Create resource group (if needed)
az group create --name <resource-group> --location eastus2

# Create Static Web App (free tier)
az staticwebapp create \
  --name <app-name> \
  --resource-group <resource-group> \
  --source https://github.com/<owner>/<repo> \
  --location eastus2 \
  --branch main \
  --app-location "/" \
  --output-location "dist" \
  --login-with-github

For Vite projects, use --output-location "dist". For Create React App, use "build".

2. Get Deployment Token

bash

az staticwebapp secrets list --name <app-name> --query "properties.apiKey" -o tsv

Add this token as AZURE_STATIC_WEB_APPS_API_TOKEN in GitHub repo Settings → Secrets → Actions.

3. Add GitHub Actions Workflow

Copy assets/azure-swa.yml to .github/workflows/azure-swa.yml in the project.

Configure these values in the workflow:

•app_location: Source code folder (usually / or /src)
•output_location: Build output folder (dist for Vite, build for CRA)

4. Verify Build Configuration

Ensure package.json has a build script:

json

{
  "scripts": {
    "build": "vite build"
  }
}

For Vite, ensure vite.config.ts has the correct base path if deploying to a subdirectory:

typescript

export default defineConfig({
  base: '/', // or '/subdirectory/' if needed
})

Troubleshooting

Issue	Solution
Build fails	Check `output_location` matches actual build output folder
404 on routes	Add `staticwebapp.config.json` with navigation fallback
Assets not loading	Verify `base` path in vite.config.ts

Navigation Fallback for SPAs

Create staticwebapp.config.json in project root:

json

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/assets/*", "*.{css,js,png,jpg,svg}"]
  }
}

Quick Reference

•Azure Portal: https://portal.azure.com → Static Web Apps
•GitHub Actions: Runs on push to main branch
•Preview environments: Automatically created for PRs
•Custom domains: Configure in Azure Portal → Custom domains