Skip to main content

Deploying an Azure Static Web App

This guide provides a complete walkthrough for setting up and deploying a static website to Azure Static Web Apps using Terraform for infrastructure provisioning and GitHub Actions for automated CI/CD.

Overview​

Deploying a static site to Azure Static Web Apps involves two main phases:

  1. Infrastructure Setup: Create the Azure Static Web App resource using Terraform
  2. CI/CD Configuration: Set up automated deployment using GitHub Actions

Prerequisites​

  • An Azure subscription
  • Terraform installed and configured
  • A GitHub repository with your static site code
  • Azure CLI installed (for authentication)

You can set up a fully configured environment using a templated dev container. See Setting Up Dev Containers for details.

Required Permissions and Secrets​

GitHub Actions workflow requires specific permissions and secrets. If you're already using the DX bootstrap module, these are pre-configured aside custom roles for the static web app.

  • Azure Identity Role: Assign PagoPA Static Web Apps List Secrets role
  • Workflow Permissions: Ensure id-token: write, contents: read, pull-requests: write
  • Secrets: Use secrets: inherit or configure Azure authentication secrets

Step 1: Infrastructure Setup with Terraform​

Create the Azure Static Web App resource using Terraform.

Use the official azurerm_static_web_app resource:

resource "azurerm_static_web_app" "example" {
  name = provider::azuredx::resource_name(merge(
    var.naming_config,
    {
      name          = "website",
      resource_type = "static_web_app",
    })
  )
  resource_group_name = var.resource_group_name
  location            = "westeurope"
  sku_size            = "Standard"

  tags = var.tags
}

Step 2: Configure CI/CD with GitHub Actions​

Use the reusable workflow to automate build and deployment.

The workflow automates the entire deployment process:

  1. Detects your package manager (pnpm, yarn, or npm)
  2. Builds the application using turbo build
  3. Deploys using the official Azure Static Web Apps action
  4. Creates preview environments for pull requests

Workflow Configuration​

Create a workflow file in .github/workflows/:

name: Deploy Static App to Azure

on:
  push:
    branches:
      - main
    paths:
      - "apps/my-static-app/**"
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
    paths:
      - "apps/my-static-app/**"

jobs:
  deploy_to_static_web_app:
    uses: pagopa/dx/.github/workflows/release-azure-staticapp-v1.yaml@main
    secrets: inherit
    with:
      workspace_name: "my-static-app" # Matches package.json name
      output_dir: "dist" # Build output directory
      static_web_app_name: "your-static-web-app-name" # From Terraform
      resource_group_name: "your-resource-group-name" # From Terraform
      environment: "app-dev"

Additional Notes​