How to Deploy a React PWA to Azure Static Web Apps with GitHub Actions and Azure DevOps

Deploying your web applications efficiently is crucial for continuous integration and continuous deployment (CI/CD) processes. This post will guide you through deploying a React Progressive Web App (PWA) to Azure Static Web Apps using GitHub Actions and Azure DevOps. Additionally, we'll generate the necessary Azure resources using Bicep.

Setting Up Azure Static Web Apps

Generate Azure Resources with Bicep

First, we need to create the Azure resources required for the Static Web App using Bicep.

Create a Bicep File

Create a file named staticwebapp.bicep:

Copycopy code to clipboard
resource staticSite 'Microsoft.Web/staticSites@2020-12-01' = {
  name: 'myStaticWebApp'
  location: 'West Europe'
  properties: {
    repositoryUrl: 'https://github.com/your-repo/your-project'
    branch: 'main'
    buildProperties: {
      appLocation: '/'
      apiLocation: 'api'
      outputLocation: 'build'
    }
  }
}

Deploy the Bicep File Deploy the Bicep file to create the Azure Static Web App resource:

Copycopy code to clipboard
az deployment group create --resource-group myResourceGroup --template-file staticwebapp.bicep

Integrating GitHub Actions for CI/CD

Set Up GitHub Actions Workflow

Create a GitHub Actions workflow file to automate the deployment.

Create a Workflow File

Create a file named .github/workflows/deploy.yml:

Copycopy code to clipboard
name: Deploy React PWA to Azure Static Web Apps

on:
  push:
    branches:
      - main

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install

      - name: Build the project
        run: npm run build

      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: 'upload'
          app_location: '/'
          api_location: 'api'
          output_location: 'build'

Add Secrets to GitHub

Add the AZURE_STATIC_WEB_APPS_API_TOKEN to your GitHub repository secrets.

Integrating Azure DevOps for CI/CD

Set Up Azure DevOps Pipeline

Create an Azure DevOps pipeline to automate the deployment process.

Create a Pipeline File

Create a file named azure-pipelines.yml:

Copycopy code to clipboard
trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '20.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'Install dependencies and build'

- task: AzureStaticWebApp@0
  inputs:
    app_location: '/'
    output_location: 'build'
    azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN)

Configure Pipeline in Azure DevOps

Go to Azure DevOps, create a new pipeline, and connect it to your repository. Use the azure-pipelines.yml file for the pipeline configuration.

Conclusion

By following these steps, you have set up a robust CI/CD pipeline for deploying your React PWA to Azure Static Web Apps using GitHub Actions or Azure DevOps, with resources generated by Bicep. This setup ensures seamless deployments and continuous integration, enhancing your development workflow.

Feel free to try it and happy coding!