Create an Azure Static Web App

Azure Static Web Apps (SWA) is a fully managed static hosting service with global CDN, free SSL, auth, and API integration.

Prerequisites

• A GitHub repository with your static site (e.g., Astro, React, Vue, Svelte, Vite, Next static export, Hugo).
• A build command that outputs a production folder (e.g., dist/).

Option A: Azure Portal (GitHub Actions)

1. Go to Azure Portal → Create resource → Static Web App.
2. Basics: Select subscription, create/select a resource group, name your app, and select a region.
3. Deployment details:
   • Source: GitHub; authorize Azure to your GitHub account.
   • Choose org, repo, and branch.
   • Build Presets: pick the right framework (e.g., Astro, Vite, React, etc.).
   • App location: usually /.
   • Output location: typically dist (or .output/public depending on framework).
4. Create. Azure generates a GitHub Actions workflow file (in .github/workflows/).
5. Pushes to the selected branch will build and deploy automatically.

Option B: Azure CLI

# Login and set subscription
az login
az account set --subscription "<subscription-id>"

# Variables
RG=rg-swa-demo
LOCATION=eastus2
APP_NAME=swa-demo-$RANDOM

# Create resource group
az group create -n $RG -l $LOCATION

# Create Static Web App; provide repo details for CI/CD
az staticwebapp create \
  -n $APP_NAME \
  -g $RG \
  -s https://github.com/<org>/<repo> \
  -b main \
  --login-with-github \
  --location $LOCATION \
  --app-location "/" \
  --output-location "dist"

Notes:

• The CLI will create the SWA resource and a GitHub Actions workflow.
• For frameworks with server rendering, ensure you’re doing a static export.

Local dev with SWA CLI (optional)

npm i -D @azure/static-web-apps-cli
# Example for a Vite/Astro dev server running on port 4321
swa start http://localhost:4321

Verification

• After your first CI run completes, open the SWA default URL (e.g., https://<app-name>.azurestaticapps.net).
• Set custom domains next (see “Add Custom Domain to Static Web Apps”).