Azure DevOps: increase the speed of your SharePoint Framework continuous integration and delivery

Reading Time: 4 minutes

Azure DevOps is the next step in terms of evolution for Visual Studio Team Services (VSTS).
I can summarize the benefit with a bullet list:

  • Pipelines
  • Boards
  • Artifacts
  • Repos
  • Test Plans

Please take a look at the official Azure blog in order to go deeper.
In this article, I talked about how to configure the continuous integration and delivery for a SharePoint Framework solution.
Now I’d like to provide some tip in order to speed up the time during the build and release phase.

Build definition overview

Before to start, I show you how looks like the build and release definition with all tasks:

Build Definition | Giuliano De Luca
Build Definition

The SharePoint Framework 1.6 has been released, the latter supports Node 8.
Starting with this assumption, I defined the installation of Node 8.x as the first step, in fact, this will increase the velocity during the command “NPM Install”.
Normally when we run the command NPM install locally without errors, there are good probabilities that this command will succeed on Azure DevOps build as well.
Considering that, we can disable the log during the “NPM install” by creating the task “NPM set progress=false”, this will make us earn about 40 seconds.
Then we have the classic tasks to build and package a SharePoint Framework solution:

  • Npm Install
  • Clean Bundle
  • Create Bundle
  • Package Solution

It’s time to finalize the build by copying the files and publishing the artifact.
All we need are the following files SPPKG, package-solution.json, VSTS.DeploySPFxToAppCatalog.ps1.
The first one is necessary in order to deploy the solution in the App Catalog.
If you decide to adopt the release across Powershell you need to include the package-solution.json to read parameters like “includeClientSideAssets, zippedPackage, skipFeatureDeployment”.
Finally, the last one (VSTS.DeploySPFxToAppCatalog.ps1) that you can include in your solution with the Powershell command:

This script will help you to automate the deploy, we will see it later (more info are available on my GitHub repo).
The total duration of my build is:

Azure DevOps Build Duration | Giuliano De Luca
Azure DevOps Build Duration

Below every steps for the build definition:

Release definition overview

The release definition offers several possibilities of usage.
In fact, we can use different approaches:

I’ll show you two scenarios with Office 365 CLI and Powershell.
Before to start with the second scenario, remember to use Office 365 CLI at least one time on your tenant.
It’s necessary to grant the permissions to this amazing cross-platform tool in order to use it, as explained by Waldek Mastykarz in this article:

Grant the Office 365 CLI | Giuliano De Luca
Grant the Office 365 CLI

Once granted the permissions we can start to configure the release definition that will be something like that:

Office 365 CLI Release Definition | Giuliano De Luca
Office 365 CLI Release Definition

Here the result:

Office 365 CLI-Result | Giuliano De Luca
Office 365 CLI-Result

Regarding the other approach with Powershell, I can say that is fastest, but can only be adopted if you are using a Windows environment:

Azure DevOps: PnP-Powershell-Release
Azure DevOps: PnP-Powershell-Release

As you can see we have only two tasks, with the first is possible to install PnP Powershell with the second I’m going to deploy the sppkg file to the App Catalog by following the instructions in the file package-solution.json.

Here you can see the result:

Azure DevOps: PnP-Powershell-Release-result | Giuliano De Luca
Azure DevOps: PnP-Powershell-Release-result

Both scenarios are valid, therefore feel free to use what you prefer.

Below every single steps for the release definition:

O365 CLI Release Definition:

PnP Release Definition:

Related Article:

Continuous integration and deployment for your SharePoint Framework solutions