# SharePoint Framework - SPFx CI/CD in GitHub

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](https://pnp.github.io/cli-microsoft365/cmd/login/)
    
3. Have an environment set in your repository or organisation with the credentials to log in via PnP CLI
    

## SPFx CI/CD Workflow

```yml
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](https://pnp.github.io/cli-microsoft365/cmd/login/) 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.
    

%%[buymeacoffe-butyellow]