SPFx CICD with PnP PowerShell OIDC

spfx-cicd-with-pnp-poweshell-oidc.yml

name: SPFx CICD with PnP PowerShell OIDC

on:
  workflow_dispatch:
  push:
    branches:
      - main

permissions:
  id-token: write
  contents: read

# Variables that are available for all the jobs in the workflow
env:
  SPPKG_FILE_NAME: 'spfx-helloworld.sppkg'

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    # Checkout code
    - name: Checkout code
      uses: actions/checkout@v3
      
    # Setup node.js runtime
    - name: Use Node.js 16
      uses: actions/setup-node@v3
      with:
        node-version: 16
    
    # npm install
    - name: Run npm ci
      run: npm ci
    
    # install gulp if mac
    - name: Run npm i -g gulp
      run: npm i -g gulp
      if: runner.os == 'macOS'
    
    # gulp bundle and package solution
    - name: Bundle and package
      run: |
        gulp bundle --ship
        gulp package-solution --ship

    # Execute PnP PowerShell script for deployment
    - name: PnP PowerShell script
      uses: anoopt/action-pnp-powershell-with-oidc@v1.3.0
      with:
        TENANT_ID: "GUID of the tenant - use ${{secrets.TENANT_ID}}"
        TENANT_NAME: "Name of the tenant e.g. contoso"
        CLIENT_ID: "GUID of the app registration - use ${{secrets.CLIENT_ID}}"
        SITE_URL: "URL of the site to connect to"
        PNP_POWERSHELL_SCRIPT: |
          $addedApp = Add-PnPApp -Path 'sharepoint/solution/${{ env.SPPKG_FILE_NAME }}' -Scope Site -Overwrite
          $installedApp = Install-PnPApp -Identity $addedApp.Id -Scope Site