Are you or teams in your organisation working with SharePoint Framework (SPFx)? Did you know you can create a CI/CD pipeline in GitHub to build, test, and deploy to SharePoint using PnP CLI?

In this post, I will share an example CI/CD workflow I've used when working with SPFx. You will need to follow the prerequisites and then update the workflow, replacing values/variables to suit your needs.

Prerequisites

1. Existing repository containing the code for your SPFx App

2. An authentication method supported by PnP CLI. You can find details by clicking here

3. Have an environment set in your repository or organisation with the credentials to log in via PnP CLI

SPFx CI/CD Workflow

name: "SPFx CICD"
description: "Build, bundle, package, test and deploys sppkg"
on:
  pull_request:
    branches: 
      - main
  push:
    branches:
      - main
  workflow_dispatch:

jobs:

  CI-SPFx:
    runs-on: ubuntu-latest

    steps:

      # Node.js runtime 
      - name: Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x

      # Install npm
      - name: Run npm ci
        shell: bash
        run: npm ci

      # Build
      - name: Build
        shell: bash
        run: gulp build

      # Test
      - name: Test
        shell: bash
        run: npm test

      # Bundle and Package
      - name: Bundle and package
        shell: bash
        run: |
          gulp bundle --ship
          gulp package-solution --ship

      # Publish artifact
      - name: Publish Artifact
        uses: actions/upload-artifact@v2
        with:
          name: sppkg-files
          path: "**/*.sppkg"
          if-no-files-found: error

  CD-SPFx:
    runs-on: ubuntu-latest
    environment: Prod
    if: github.event_name == 'push'
    needs: CI-SPFX

    steps:

      # Download artifact
      - name: Download Artifact
        uses: actions/download-artifact@v2
        with:
          name: sppkg-files

      # Install PnP CLI M365
      - name: Install PnP CLI M365
        shell: bash
        run: sudo npm install --global @pnp/cli-microsoft365

      # Login M365 CLI
      - name: Login to M365 CLI
        shell: bash
        run:  m365 login --authType USERDEFINED

      # Upload SPFx package to Site Collection App Catalog
      - name: Upload SPFx to Collection
        shell: bash
        run: m365 spo app add --filePath ./FILENAME --appCatalogUrl ${{ inputs.sharepoint_app_catalogue_url }} --scope ${{ inputs.sharepoint_app_catalogue_scope }} --overwrite

      # Deploy SPFx package
      - name: Deploy SPFx package
        shell: bash
        run: m365 spo app deploy --name ${{ inputs.sharepoint_app_name }} --appCatalogUrl ${{ inputs.sharepoint_app_catalogue_url }} --scope ${{ inputs.sharepoint_app_catalogue_scope }}

You will need to add the following secrets or replace the values in the above workflow:

• environment: Prod - set environment based on your environment name

• run: m365 login --authType USERDEFINED - select an authentication type and replace USERDEFINED. Click here to view what options are available.

• run: m365 spo add --filePath ./FILENAME - replace the ./FILENAME with the name of the sppkg file, including the path.

• ${{ inputs.sharepoint_app_catalogue_url }} - add the secret sharepoint_app_catalog_url to your GitHub secrets. The value for this will be the full URL to the app catalogue

• ${{ inputs.sharepoint_app_catalogue_scope }} - add the secret sharepoint_app_catalogue_url to your GitHub secrets. The value for this will be either tenant or sitecollection. You will select based on your requirements.

• ${{ inputs.sharepoint_app_name }} - add the secret sharepoint_app_name to your GitHub secrets. The value will be the SharePoint app name, not the sppkg file name.