Pull Request Previews with Azure App Service & GitHub Actions

pull-request-previews.yml

name: Pull Request Preview

on:
  pull_request:
    types: [opened, synchronize, closed]
    branches:
      - main
    paths:
      - "app/**"
  workflow_dispatch:

jobs:
  create-deployment-preview:
    if: github.event.action == 'opened'
    runs-on: ubuntu-latest

    defaults:
      run:
        working-directory: ./app

    steps:
      - uses: actions/checkout@master

      - name: Initial Deployment Preview Comment
        uses: peter-evans/[email protected]
        id: pr-preview-comment
        with:
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            ### Building Deployment Preview..
            A preview of this Pull Request is being created. Hold tight while it's building ⚒️
            This comment will be automatically updated when the preview is ready.

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Azure Login
        uses: Azure/[email protected]
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Create PR Deployment Slot
        uses: Azure/cli@v1
        with:
          inlineScript: az webapp deployment slot create --name cicd-demo-app --resource-group cicd-demo-rg --slot preview-pr-${{ github.event.pull_request.number }}

      - name: Update PR Preview Comment
        uses: peter-evans/[email protected]
        with:
          comment-id: ${{ steps.pr-preview-comment.outputs.comment-id }}
          edit-mode: replace
          body: |
            ### Deployment Preview
            😎 Preview this PR: https://cicd-demo-app-preview-pr-${{ github.event.pull_request.number }}.azurewebsites.net
            🧑🏼‍💻 Commit SHA: ${{ github.sha }}
          reactions: "rocket"

      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v2
        with:
          app-name: "cicd-demo-app"
          slot-name: preview-pr-${{ github.event.pull_request.number }}
          package: ./app

  update-deployment-preview:
    if: github.event.action == 'synchronize'
    runs-on: ubuntu-latest

    defaults:
      run:
        working-directory: ./app

    steps:
      - uses: actions/checkout@master

      - name: Find PR Preview Comment
        uses: peter-evans/find-comment@v1
        id: deploy-preview-comment
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: "github-actions[bot]"
          body-includes: Deployment Preview

      - name: Update PR Preview Comment
        if: steps.deploy-preview-comment.outputs.comment-id != ''
        uses: peter-evans/[email protected]
        with:
          comment-id: ${{ steps.deploy-preview-comment.outputs.comment-id }}
          edit-mode: replace
          body: |
            ### Building Deployment Preview..
            The Pull Request preview is being updated. Hold tight while it's building ⚒️
            This comment will be automatically updated when the new version is ready.

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Azure Login
        uses: Azure/[email protected]
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v2
        with:
          app-name: "cicd-demo-app"
          slot-name: preview-pr-${{ github.event.pull_request.number }}
          package: ./app

      - name: Update PR Preview Comment
        uses: peter-evans/[email protected]
        with:
          comment-id: ${{ steps.deploy-preview-comment.outputs.comment-id }}
          edit-mode: replace
          body: |
            ### Deployment Preview
            😎 Preview this PR: https://cicd-demo-app-preview-pr-${{ github.event.pull_request.number }}.azurewebsites.net
            🧑🏼‍💻 Commit SHA: ${{ github.sha }}

  delete-deployment-preview:
    if: github.event.action == 'closed'
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@master

      - name: Azure Login
        uses: Azure/[email protected]
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Delete PR Deployment Slot
        uses: Azure/cli@v1
        with:
          inlineScript: |
            az webapp deployment slot delete --name cicd-demo-app --resource-group cicd-demo-rg --slot preview-pr-${{ github.event.pull_request.number }}

      - name: Find PR Preview Comment
        uses: peter-evans/find-comment@v1
        id: deploy-preview-comment
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: "github-actions[bot]"
          body-includes: Deployment Preview

      - name: Update PR Preview Comment
        if: steps.deploy-preview-comment.outputs.comment-id != ''
        uses: peter-evans/[email protected]
        with:
          comment-id: ${{ steps.deploy-preview-comment.outputs.comment-id }}
          edit-mode: replace
          body: |
            ### Deployment Preview
            🏁 This PR has been closed. No deployment preview is available.
          reactions: "hooray"