Continuous integration for a SharePoint Framework Project

 

blog ai3 Header-1024x195 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:

blog ai3 Create-Build1-300x211 Continuous integration for a SharePoint Framework Project

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

blog ai3 Create-Build2-300x70 Continuous integration for a SharePoint Framework Project

 

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.

blog ai3 Create-Build3-300x155 Continuous integration for a SharePoint Framework Project

  • Task NPM

Here we’re installing all Node Modules for our project

 

blog ai3 Create-Build4-300x182 Continuous integration for a SharePoint Framework Project

 

  • Task Gulp x2

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

blog ai3 Create-Build5-300x273 Continuous integration for a SharePoint Framework Projectblog ai3 Create-Build6-270x300 Continuous integration for a SharePoint Framework Project

 

  • Task Publish Build Artifacts

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

blog ai3 Create-Build7-279x300 Continuous integration for a SharePoint Framework Project

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/

 

blog ai3 Create-Release1-1024x654 Continuous integration for a SharePoint Framework Project

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 :blog ai3 Create-Release2 Continuous integration for a SharePoint Framework Project

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:blog ai3 Create-Release3 Continuous integration for a SharePoint Framework Project

Add the following tasks :

 

  • Task Node Tool Installer :

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

blog ai3 Create-Release4 Continuous integration for a SharePoint Framework Project

 

  • Task NPM :

We’re installing the Office 365 CLI

 

blog ai3 Create-Release5 Continuous integration for a SharePoint Framework Project

 

  • Task Command Line :

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

blog ai3 Create-Release7 Continuous integration for a SharePoint Framework Project

  • Task Command Line :

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

blog ai3 Create-Release8 Continuous integration for a SharePoint Framework Project

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.