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:

Add the following tasks :

 

• Task Node Tool Installer :

We’re installing the recommended Node version for the Office 365 CLI

 

• Task NPM :

We’re installing the Office 365 CLI

 

 

• Task Command Line :

We’re first connecting to the tenant through a user / password authentication method: tenantUrl, password and username are here Custom Variables

• Task Command Line :

Finally we’re adding the app to the app catalog ( _TestIC-CI is the Artifact Name )

To test your work create a new release and your package will be deployed in your tenant catalog !