Implement CI/CD For SharePoint Framework

Overview

Implementing SharePoint Framework solutions is easy. However, maintaining the SPFx solutions for their integrity as they grow is always challenging. When an SPFx solution is being worked on by a team of considerable size and it undergoes continuous development efforts, testing and deployment of the latest released package is a huge task. Setting up CI (Continuous Integration) and CD (Continuous Deployment) helps to automate the process.

Continuous Integration

Continuous Integration (CI) is the process of automating the build and testing of code when a developer commits changes to source control. Commit to source control triggers an automated build which grabs the latest code from version control, builds it, and runs tests on it (if configured). Below are a few benefits of implementing CI.

Improved productivity of dev team
Reduced number of bugs
Early detection of bugs
Early to market release

Build Pipeline

Build pipeline includes the below major steps,

Create a build definition
Install NodeJS
Restore npm packages
Build the solution
Package the solution
Prepare the Artifacts
Publish the Artifacts

Create a Build Definition

Build definition contains the definition and configuration for the build. Follow the below steps to create a new build definition.

Login to Visual Studio Online (Azure DevOps) at https://visualstudio.microsoft.com/vso/
Select your project to set up a build definition.
From the left navigation, click Pipelines > Builds.
Click “New pipeline”.

Implement CI / CD For SharePoint Framework

Select the source to connect to your source repository. Select your project and branch to build. Click "Continue".

Under “Select a template”, select “Empty Pipeline”.

The build definition has a default agent. We can add multiple tasks to the agent to define our build.

Install Node JS

On the default agent, click the + sign.
Search for “Node”.
Add Node.js tool installer.

Specify the version as 8.x, since SharePoint Framework supports Node version 8.x.

Restore npm Packages

SharePoint Framework solution uses third-party npm packages. We need to restore those before starting the build process.

Add npm task.
Verify if the command is set to install.

Build the Solution

Build the SPFx solution to minify the required assets to upload to CDN.

Add gulp task.
Set Gulp file path to gulpfile.js.
Set Gulp task as bundle.
Set Gulp arguments to --ship.

Package the Solution

The next step is to combine the assets into a package.

Add gulp task.
Set Gulp file path to gulpfile.js.
Set Gulp task as package-solution.
Set Gulp arguments to --ship.

Prepare the Artifacts

Azure DevOps build does not retain any files. The .sppkg file created from the above step needs to be copied to the staging directory to be published to release pipeline.

Add “Copy Files” task.
Set “Source Folder” to $(Build.Repository.LocalPath)/sharepoint/solution.
Set “Contents” to *.sppkg.
Set target folder to $(Build.ArtifactStagingDirectory)/drop.

Publish the Artifacts

Instruct Azure DevOps to keep the files after build execution.

Add “Publish Build Artifacts” task.
Set “Path to publish” to $(Build.ArtifactStagingDirectory)/drop.
Set “Artifact name” to drop.

Save the build configuration. In the next article, we will provide the output of the build to Release Management so as to deploy the artifacts to the SharePoint.

Summary

Continuous Integration helps to automate the build process when a solution being worked on by a team is undergoing continuous changes. Azure DevOps helps to automate SPFx solution builds.

5 Comments

Join the conversation! Your thoughts help the community grow.

njr spo6y ago
Good one. Question: this works for a single webpart or an extension. If I have 10 spfx webparts, do we need to add different pipelines? And if I plan to add a 11th one, do we have to add a new one?
- Nanddeep Nachan6y ago
  The pipeline is for package (not for single webpart or an extension)
Gaurav S7y ago
Nicely written article
Ano Mepani7y ago
Superb article and way you described is just awesome.
Ravishankar Singh7y ago
Nice Article Nanddeep. Good Work :)