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
- 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
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.
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 !