SharePoint Framework: How to Implement CI/CD

Overview

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

In this article, we will explore how we can implement Continuous Integration and Continuous deployment using Azure DevOps to automate SPFx solution builds and deployment.

Continuous Integration (CI)

Continuous Integration (CI) is process of automating 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 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 below major steps:

1. Create build definition
2. Install Node JS
3. Restore npm packages
4. Build the solution
5. Package the solution
6. Prepare the Artifacts
7. Publish the Artifacts

Create Build Definition

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

1. Login to Visual Studio Online (Azure DevOps) at https://visualstudio.microsoft.com/vso/

2. Select your project to setup build definition.

3. From left navigation, click Pipelines > Builds.

4. Click “New pipeline”.

   

5. Select the source to connect to your source repository. Click continue.

   

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

   

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

   

Install Node JS

1. On the default agent, click + sign.

2. Search for “Node”.

3. Add Node.js tool installer.

   

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

1. Add npm task.

2. Verify command is set to install.

   

Build the Solution

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

1. Add gulp task

2. Set Gulp file path to gulpfile.js

3. Set Gulp task as bundle

4. Set Gulp arguments to --ship

   

Package the Solution

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

1. Add gulp task

2. Set Gulp file path to gulpfile.js

3. Set Gulp task as package-solution

4. Set Gulp arguments to --ship

   

Prepare the Artifacts

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

1. Add “Copy Files” task

2. Set “Source Folder” to $(Build.Repository.LocalPath)/sharepoint/solution

3. Set “Contents” to *.sppkg

4. Set target folder to $(Build.ArtifactStagingDirectory)/drop

   

Publish the Artifacts

Instruct Azure DevOps to keep the files after build execution.

1. Add “Publish Build Artifacts” task

2. Set “Path to publish” to $(Build.ArtifactStagingDirectory)/drop

3. Set “Artifact name” to drop

   

Continuous Deployment (CD)

Continuous Deployment (CD) takes package from build and deploys it to designated environment. Successful and failed deployments can be tracked by developers.

Continuous Deployment with SharePoint Framework involves below steps

1. Create the Release Definition
2. Link the Build Artifact
3. Create the Environment
4. Install NodeJS
5. Install Office 365 CLI
6. Connect to App Catalog
7. Add Solution Package to App Catalog
8. Deploy the App
9. Set Environment Variables

Create the Release Definition

1. From left navigation, click Pipelines > Releases.

2. Click “New pipeline”.

   

3. 3. Create a new release definition with empty template.

   

Link the Build Artifact

1. Click “Add an artifact”

2. Under “Source (build pipeline)”, select the previously created build definition

3. Note down “Source alias” for future use.

4. Click Add.

   

Create the Environment

Define an environment to deploy the build artifacts.

1. Under Stages, click “Stage 1”.

2. Name your environment.

   

Install NodeJS

1. Under environment, click “1 job, 0 task”.

2. The task configuration window will appear, same as in build definition.

3. On the default agent, click + sign.

4. Search for “Node”.

5. Add Node.js tool installer.

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

   

Install Office 365 CLI

Office 365 Common Language Interface (CLI) is an open source project from OfficeDev PnP Community.

1. Add npm task

2. Under “Command”, select custom

3. In the “Command and Arguments”, type install -g @pnp/office365-cli

   

Connect to App Catalog

We need to authenticate against App Catalog of our tenant.

1. Add “Command Line” task.

2. In the “Script” field, type in below command

   o365 spo login https://$(tenant).sharepoint.com/$(catalogsite) --authType password --userName $(username) --password $(password)

   

Add Solution Package to App Catalog

Now, we need to upload the solution package to app catalog.

1. Add “Command Line” task.

2. In the “Script” field, type in below command

   o365 spo app add -p $(System.DefaultWorkingDirectory)/SPFx-CI/drop/SharePoint/solution/spfx-ci.sppkg --overwrite

   Where SPFx-CI is source alias setup during “Link the Build Artifact” step.

   

Deploy the App

We need to deploy the app to App Catalog to make it available to all site collections within the tenant.

1. Add “Command Line” task.

2. In the “Script” field, type in below command

   o365 spo app deploy --name spfx-ci.sppkg --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite)

   

Set Environment Variables

We need to define the process variables used in earlier steps.

1. Click Variables tab.
2. Under Pipeline variables, add below variables.

• 

  Setup Trigger for Deployment

  We can manually trigger the deployment. However the ideal scenario is to trigger the deployment on successful build completion. Follow below steps to setup trigger.

  1. From the left menu, click Pipelines > Releases.

  2. Open our release pipeline, we created earlier.

  3. Click Edit.

     

  4.  Under Artifacts, click Continuous deployment trigger.

  5.  Enable the continuous deployment.

     

  6.  Click Save.

  Test Continuous Deployment

  Follow below steps to test the continuous deployment. 

  1. Under Pipelines click Builds.

  2. Click Queue.

  3.  Select the branch. Click Queue.

     

  4.  Once the build runs, see the logs and fix the issues if any.

      

  5.  Once the build is successful, auto deployment will trigger (if configured). Once the deployment runs, see the logs and fix the issues if any.

     

  6. Verify the app (.sppkg) is deployed to SharePoint app catalog.

  Summary

  CI/CD helps to automate the build and deployment process when a solution being worked on by team and is undergoing continuous changes. Azure DevOps helps to automate SPFx solution builds and deployment.