Streamline SPFx Builds with Azure DevOps CI/CD Pipeline – Part 2: Automating Deployment (CD)

Introduction

In the First Part, we built a Continuous Integration (CI) pipeline to automatically package our SharePoint Framework (SPFx) solution. Now it’s time to automate deployment across multiple SharePoint sites using Continuous Deployment (CD).

This blog covers setting up a CD pipeline in Azure DevOps, triggered automatically after your CI pipeline finishes, to deploy your .sppkg file to all the required sites. 

Step 1: Prepare Your PowerShell Deployment Script

We’ll use PowerShell with PnP.PowerShell to handle the deployment. This script connects to SharePoint Online, uploads the .sppkg package, and publishes it on each target site.

Here's the script:

  Param (  
   [string] $RootPath = $(Throw "Root Path is required."),  
   [string] $ClientId = $(Throw "ClientId is required."),  
   [string] $TenantId = $(Throw "TenantId is required."),  
   [string] $TenantURL = $(Throw "Tenant URL is required."),  
   [string] $ClientSecret = $(Throw "Client Secret is required."),  
   [string] $packagename = $(Throw "Package name is required.")  
 )  
 $SiteURL = "$($TenantURL)/sites/TestSite"  
 $ModernPOPAppPath = "$RootPath\drop\$packagename"  
 $currentPOPSite = ""  
 function ReconnectPNPConnection {  
   Write-Host "Reconnecting to site $($currentPOPSite)"  
   Disconnect-PnPOnline  
   Connect-PnPOnline -Url $currentPOPSite -ClientId $ClientId -ClientSecret $ClientSecret -Tenant $TenantId  
 }  
 function addCustomSPFxApps {  
   $appCatalog = Get-PnPSiteCollectionAppCatalog -CurrentSite -ErrorAction SilentlyContinue  
   while ($null -eq $appCatalog) {  
     Write-Host "Waiting for app catalog creation..."  
     Start-Sleep -Seconds 30  
     $appCatalog = Get-PnPSiteCollectionAppCatalog -CurrentSite -ErrorAction SilentlyContinue  
   }  
   $uploadApp = $false  
   while ($uploadApp -eq $false) {  
     try {  
       Write-Host "Uploading SPFx app..."  
       $App = Add-PnPApp -Path $ModernPOPAppPath -Scope Site -Overwrite -Timeout 900  
       Write-Host "Publishing SPFx app..."  
       Publish-PnPApp -Identity $App.ID -Scope Site -SkipFeatureDeployment -ErrorAction SilentlyContinue  
       Write-Host "SPFx app deployed successfully."  
       Start-Sleep -Seconds 60  
       $uploadApp = $true  
     } catch {  
       Write-Host $_.Exception.Message  
       Write-Host "Retrying after 30 seconds..."  
       Start-Sleep -Seconds 30  
       ReconnectPNPConnection  
     }  
   }  
 }  
 Write-Host -f Cyan "Installing PnP.PowerShell module..."  
 [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12  
 Install-Module PnP.PowerShell -RequiredVersion 2.4.0 -Force -Scope CurrentUser  
 Import-Module -Name "PnP.PowerShell"  
 Write-Host "Connecting to $($SiteURL)..."  
 Connect-PnPOnline -Url $SiteURL -ClientId $ClientId -ClientSecret $ClientSecret -Tenant $TenantId  
 $currentPOPSite = $SiteURL  
 addCustomSPFxApps  
 Write-Host "Disconnecting from $($SiteURL)..."  
 Disconnect-PnPOnline  

We need to upload this PowerShell script to a document folder as shown below and add a step in the CI (Continuous Integration) pipeline to copy this file into the artifacts.

Step 2: Set Up the CD Pipeline in Azure DevOps

1. Create the Release Pipeline:

• Navigate to the Release section in Azure DevOps.
• Click New Pipeline.

2. Add Artifacts:

• Link your CI pipeline’s artifacts (the .sppkg file and related files).test

3. Enable Continuous Deployment Trigger:

• Click the lightning bolt icon next to the artifact and enable the trigger to deploy automatically after CI.

4. Add a Stage:

• Click Add a stage and choose Empty Job.

5. Add PowerShell Task:

• In the stage, click to add a task.

• Choose PowerShell.
• Set the script path to point to your deployment script (e.g., Documents/CDScript.ps1).
• Set the necessary parameters (RootPath, ClientId, TenantId, etc.).

6. Save and Deploy:

• Save the pipeline and test it by running the full CI/CD process.

Conclusion

By integrating both CI and CD pipelines in Azure DevOps, you’ve established a fully automated and reliable deployment process for your SPFx solutions:

• CI Pipeline: Automatically builds and packages your SPFx solution on every code push.
• CD Pipeline: Seamlessly deploys the package to all required SharePoint sites immediately after a successful build.

This setup not only saves time but also ensures consistency and reduces the risk of manual deployment errors across environments.

If you have any questions you can reach out our SharePoint Consulting team here.