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
.sppkgfile 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.
