Azure Static Web Apps

SWA CLI

Installing

npm install -g @azure/static-web-apps-cli

Installing the package will make the swa command available on your development machine. To validate your install, you can check the installed version with:

swa --version # Should print out the version number

Basic usage​

The best way to get started is to run the swa command alone and follow the interactive prompts.

swa

It will generate a configuration for you, then build your project and ask if you want to deploy it to Azure.

See swa for more details.

Changing node version

=this.source[1]

We must edit our project’s package.json to specify a node version. Add the following code into your package.json file.

"engines": {
    "node": ">=16.0.0"
}

Updating Ruby

To make the Azure SWA GHA run a newer version of [[Ruby]] declare it at the top of your Gemfile

source "https://rubygems.org"
ruby '>=3.0'

[[Github Actions]]

Publish the URL of a Preview site from a PR as a comment on that PR

By default the Azure SWA GHA lacks the permissions required to post comments on a PR, you need to add the permissions in the build_deploy job

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    permissions:
      pull-requests: write

Workable baseline

# Created using example build configuration that runs on commit or PR and closes the PR if that was the trigger
# https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration?tabs=github-actions#build-configuration
name: Azure Static Web Apps CI/CD

permissions:
  contents: write
  pull-requests: write

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
  workflow_dispatch:

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_YELLOW_DESERT_05082F70F }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations ######
          app_location: "." # App source code path relative to repository root
          api_location: "" # Api source code path relative to repository root - optional
          output_location: "dist" # Built app content directory, relative to app_location - optional
          ###### End of Repository/Build Configurations ######

# This will run on a PR. If the site is built correctly it will merge the PR and close the staging site.
  merge_pr:
    needs: build_and_deploy_job
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - name: Merge PR
        run: gh pr merge --auto --merge "$PR_URL"
        env:
          PR_URL: ${{github.event.pull_request.html_url}}
          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}
      - name: Close Staging Site
        id: closestagingsite
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_YELLOW_DESERT_05082F70F }}
          action: "close"

# This will run on a "close", not a merge. It will close the staging site.
  close_pr:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Staging Site
        id: closestagingsite
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_YELLOW_DESERT_05082F70F }}
          action: "close"

Deployment token

To obtain your deployment token to make your own [[Azure Static Web Apps|SWA]] [[Github Actions|GHA]] open your SWA on the Azure portal page and find “Manage Deployment Token” on the main “Overview” page.

https://github.com/Azure/static-web-apps/issues/1489

---

Sources:

• https://azure.github.io/static-web-apps-cli/docs/use/install/
• https://edi.wang/post/2022/1/27/how-to-specify-nodejs-version-when-building-azure-static-web-app