Continuous integration for a SharePoint Framework Project

SharePoint Framework is the development tooling used for the new SharePoint Modern Pages, it allow to create WebPart, List Field Customiser or Page extensions.

In the context of a development project, you may be need to increase the speed of your deployment and testing by using the Azure DevOps Tool Suite. You’ll find below a small tutorial to automate your build and release with Azure DevOps.

The SharePoint Framework package creation with Azure DevOps is splitted in two parts: the creation of the package itself and its deployment to the SharePoint Online App Catalog.

Build Setup :

From the Pipelines menu click on Builds and on New Pipeline, the configuration wizard is displayed:

From this screen, you should select your project, the repository and your target branch. On the next screen, you have the possibility to start from a template but we’ll start from a fresh template, so click one Empty Job

To do this job you should had the following steps :

Task Node Tool Installer

Here we will install the recommended Node Version for SharePoint Framework : 8.11.

Task NPM

Here we’re installing all Node Modules for our project

Task Gulp x2

Here we’re adding 2 gulp task to bundle and package our SPFX project

Task Publish Build Artifacts

Finally we’re publishing the build package to use it in the release pipeline

Release Setup:

There’s several ways to publish a SPFX package : Gulp, PowerShell and the Office 365 CLI. For this tutorial I’ll use the latest method because it is system agnostic ( based on NodeJS ) and easier to use.

First of All, you’ll have to grant the permissions on your tenant to the Office 365 CLI ( just connect to your tenant through this CLI from your computer ).
You can find an installation guide of Office 365 CLI here : https://pnp.github.io/office365-cli/

Once it’s done, we’re ready to create our Release Pipeline.

From the Pipelines menu click on Releases, New, and then Release Pipeline: the Configuration Wizard is appearing :

Click on Empty Job and define a name for your stage ( for our example the stage name will be SharePoint Online ), once it’s done click on the hyperlink below the stage name and access to the task list: