Implement CI/CD For SharePoint Framework - Part Two

Overview

 

CI and CD are common acronyms in modern software development practices. It helps developers to deliver the product faster with transparency. In the previous article, we learned the CI, CD concepts and set up the build process to achieve Continuous Integration.

 

Continuous Deployment

 

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

 

Continuous Deployment with SharePoint Framework involves the 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

• From left navigation, click Pipelines > Releases.
• Click “New pipeline”.

• Create a new release definition with an 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 the “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 the 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.

• From the left menu, click Pipelines > Releases.
• Open our release pipeline, we created earlier.
• Click Edit.

• Under Artifacts, click Continuous deployment trigger.
• Enable the continuous deployment.

 

• Click Save.

Test Continuous Deployment

 

Follow the below steps to test the continuous deployment.

• Under Pipelines click Builds.
• Click Queue.

 

• Select the branch. Click Queue.

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

 

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

 

• 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 the team is undergoing continuous changes. Azure DevOps helps to automate SPFx solution builds and deployment.