Setup CI/CD for Azure Static App with Github

Eric Wei
3 Min To Read
13 Oct, 2024
- Azure
- Jamstack

Create Azure Static App

Select Pricing plan –> Free plan can be used for free in two custom domains and check Github

Screen Shot 2024-10-13 at 22.13.03

Screen Shot 2024-10-13 at 22.13.07

Select you you Github Repo and Branch

Under Build Presets - Select your framewrok –> Select Hugo as an example

Output locattion –> fill in public

Then click Review and Create Button

Screen Shot 2024-10-13 at 22.13.14

After creating Azure Static App with Github, Azure will create azure-static-web-apps-xxx.yml under .github/workflows folder on Github

Screen Shot 2024-10-13 at 21.58.39

2. Setup API Token

azure-static-web-apps-xxx.yml defines azure_static_web_apps_api_token to deploy.

name: Azure Static Web Apps CI/CD

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

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@v3
        with:
          submodules: true
          lfs: false
      - 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_PURPLE_DUNE_0FD681310 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          ç: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PURPLE_DUNE_0FD681310 }}
          action: "close"

For azure_static_web_apps_api_token,

you need to log in Azure Static App –> Click Manage deployment token to generte token

Screen Shot 2024-10-13 at 22.04.50

Then log in to Githhub –> –> Settings –> Security –> Secret and Variables –> Action –> Under Secret –> Repository secrest –> Edit the yaml file with your deployment token

3. Test

You can git push something and check the status in Github’s acction

If it shows green light, it means you successfully set up CI/CD for Azure Static App.

Screen Shot 2024-10-13 at 22.09.18

Summary

In this post, you have learned how to set up CI/CD for Azure Static App with Github’s action.

Remember Azure API Toen, you need to manually generate it from Azure Static App and paste it in variables in Github.

If you found this article beneficial, please show your support by 👏 this article or follow us below to get the latest tutorials in the future.

Thank you for reading!

Visit us at the website: Game Tech Tutorial