Implement Continuous Integration (CI) in SharePoint Framework Using Azure DevOps

Introduction

 
Continuous Integration means automating the process of building and testing the code whenever a developer commits and pushes the code to source control. This commit will trigger an automated build process in Azure DevOps which will take the latest code from version control, will build it, and also runs tests on it (if configured).
 
The build pipeline in Azure DevOps includes the below steps (testing steps are not included in this article):
  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
Let’s discuss the above steps in detail:
 

Create a Build Definition

 
Log in to the Azure DevOps portal and select the project to set up a build definition. The below image shows the first screen when you log in to Azure DevOps.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
As shown in the below image, from the left navigation, select “Pipelines” and click on “Create Pipeline”.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Selection the location where your code resides, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Select the source to connect to your source or code repository. Select your “Team Project”, “Repository” and “Branch” to build. Click on "Continue" for the next steps.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
The next screen will be to select a template, select “Empty Pipeline” as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Every build definition has a default agent in which you can add multiple tasks:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
You can click on “+” to add multiple tasks in an agent, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 

Install Node JS

 
Add the Node.js Tool installer.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
You can specify Node version as 10.x, or 8.x based on your project requirements, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 

Restore NPM Packages

 
Add an npm task, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Make sure that the command is set to install, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 

Build the Solution

 
Build the SPFx solution using gulp tasks (add gulp task), as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Set the Gulp file path to gulpfile.js. Set the Gulp task as a bundle. Set Gulp arguments to --ship.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 

Package the Solution

 
Add a gulp task to package your SPFx solution.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Set the Gulp file path to gulpfile.js. Set the Gulp task as package-solution. Set Gulp arguments to --ship.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 

Prepare the Artifacts

 
The .sppkg file created from the above steps needs to be copied to a staging directory to be given to release pipeline. For this, add Copy Files task, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
The Source Folder is optional, so you can keep it blank. Set “Contents” to *.sppkg. Set the target folder to $(Build.ArtifactStagingDirectory)/drop.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 

Publish the Artifacts

 
Azure DevOps will keep the files after build execution. Add the “Publish build artifacts” task, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Set “Path to publish” to $(Build.ArtifactStagingDirectory)/drop. Set “Artifact name” to drop.
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Save the build configuration, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Once you will click on “Save”, a pop up will open (as shown in below image) which will ask the folder path where build pipeline should be saved:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Once the pipeline will be saved, it will be visible in the recently added pipelines, as shown below:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Once you will select the pipeline, you will get an option to run the pipeline, as shown in the below image:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
Once you click on “Run Pipeline” button, then the below details will be required to fill the form and run it:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps 
 
The below image shows that the pipeline is running in Azure DevOps:
 
Implement Continuous Integration (CI) In SharePoint Framework Using Azure DevOps
 

Summary

 
In this article, we discussed how you can implement the continuous integration of code using Azure DevOps, which helps to automate SPFx solution builds.