Implement CI/CD For SharePoint Framework - Part One

In this article, we will explore how we can implement Continuous Integration using Azure DevOps to automate the SPFx solution build process.

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,
  1. Create a build definition
  2. Install NodeJS
  3. Restore npm packages
  4. Build the solution
  5. Package the solution
  6. Prepare the Artifacts
  7. 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".
Implement CI / CD For SharePoint Framework
  • Under “Select a template”, select “Empty Pipeline”.
Implement CI / CD For SharePoint Framework
  • The build definition has a default agent. We can add multiple tasks to the agent to define our build.
Implement CI / CD For SharePoint Framework
 

Install Node JS

  • On the default agent, click the + sign.
  • Search for “Node”.
  • Add Node.js tool installer.
Implement CI / CD For SharePoint Framework
  • Specify the version as 8.x, since SharePoint Framework supports Node version 8.x.
Implement CI / CD For SharePoint Framework
 

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.
Implement CI / CD For SharePoint Framework
 

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.
Implement CI / CD For SharePoint Framework
 

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.
Implement CI / CD For SharePoint Framework
 

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.
Implement CI / CD For SharePoint Framework
 

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.
 
Implement CI / CD For SharePoint Framework
 
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.