Continuous integration and deployment for your SharePoint Framework solutions

In case you missed my previous article you can go here “Automated deployment of your SharePoint Framework solution on Office 365 CDN“.
In this article I’d like to extend this topic, showing how to configure the continuous integration and deployment through Visual Studio Team Services for a SharePoint Framework solution.
As I mentioned in my previous article there are two Powershell scripts in order to upload the bundle on Office 365 CDN and the solution’s package into the App Catalog, additionally, I added two others scripts optimized for Visual Studio Team Services in my GitHub repository.

Prerequirements

First of all I have to say that I used Git repository such source control, but obviously, you are free to use what you prefer, before to start you have to include three files in your SharePoint Framework solution root, that you can find in my GitHub repository:

  1. VSTS.DeploySPFxToAppCatalog.ps1
  2. VSTS.DeploySPFxToO365CDN.ps1
  3. DeploySPFxToAppCatalogRequestBody.xml

Create the build definition

When you create a new build definition there is the possibility to select NodeJS With Gulp (PREVIEW) this represent a shortcut for our goal because we can reuse the tasks or you can also create an empty definition.
At the end this will be our build definition:

Giuliano De Luca | Blog | Build definition template

NPM Install

This task as you can presume permit to install all the dependencies:

Giuliano De Luca | Blog | Build definition template
npm install

Create the SPFx bundle

It’s time to specify the path of gulpfile.js passing the argument “–ship” in order to generate the SPFx bundle:

Giuliano De Luca | Blog | Build definition template
gulp bundle –ship

Create the SPFx package

In this task you have to set up the display name, gulp file path, gulp task and arguments:

Giuliano De Luca | Blog | Build definition template
npm package-solution –ship

Archive files

This task prepares a zip file before the last step:

Giuliano De Luca | Blog | Build definition template
Archive files

The last task creates a drop artifact:

Giuliano De Luca | Blog | Build definition template
Create publish artifact drop

Enable the continuous integration

Go to the “Triggers” tab and enabling the trigger status for configuring the continuous integration properly, this means that, every time the code is pushed, the build will start:

Giuliano De Luca | Blog | Build definition template
Continuous integration

Regarding the agent I used “Hosted” this will be available and selected by default:

Giuliano De Luca | Blog | Build definition template
Agent

The first part of the VSTS configuration is completed, now we can start to create the release definition.

Create the release definition

The release definition is something like that:

Giuliano De Luca | Blog | release definition
Release definition

As you can see from the lightning icon, the continuous deployment is enabled allowing to trigger the release every time that the build definition is completed successfully, we have 4 tasks and the environment name is “Production“.

Extract files

Firstly we have to extract the our zip file previously finalized from the build, set up the following parameters “Display name“, “Archive file patterns” with the value **/*.zip , the “Destination folder” with the value $(System.DefaultWorkingDirectory)/release/ and finally enable the checkbox “Clean destination folder before extracting”:

Giuliano De Luca | Blog | release definition
Extract files

Install PnP Powershell

In order to be able to run the Deploy build and Deploy package scripts, we need before to install PnP Powershell during the release, fill out a “Display name”, select Inline Script for “Type” and in the field “Inline Script” insert these two lines of code as described also here:

Giuliano De Luca | Blog | release definition
Install PnP Powershell

Deploy bundle

In this task we make use of the file VSTS.DeploySPFxToO365CDN.ps1 that you can find on my GitHub repository.
Fill out the “Display Name”, “Type” with the value File Path, “Script Path” with the value $(System.DefaultWorkingDirectory)/release/VSTS.DeploySPFxToO365CDN.ps1 and finally the last “Arguments” with these parameters -username “$(username)” -psw “$(psw)” -cdnSite “$(cdnSite)” -cdnLib “$(cdnLib)” -releaseFolder “$(releaseFolder)” that we will see later:

Giuliano De Luca | Blog | release definition
Deploy bundle

Deploy package solution

The last task will run the Powershell file VSTS.DeploySPFxToAppCatalog.ps1, in order to upload and deploy the SSPKG file into the Office 365 app catalog, that file is always available on my GitHub repository.
Let’s start filling out the “Display name”, “Type” with the value File Path, “Script Path” with the value $(System.DefaultWorkingDirectory)/release/VSTS.DeploySPFxToAppCatalog.ps1 and as “Arguments” the parameters -username “$(username)” -psw “$(psw)” -catalogSite “$(catalogSite)” -catalogRelativePath “$(catalogRelativePath)” -releaseFolder “$(releaseFolder)”

Giuliano De Luca | Blog | release definition
Deploy SPFx package

Release definition variables

We have to configure the release definition variables that the Powershell scripts will use as arguments:

Giuliano De Luca | Blog | release definition
Release definition variables

Work finished, then it’s time to push your code and looking your build and release process at work.

My solution is available on Github:
https://github.com/giuleon/AutomatedDeploymentForSPFx