Post
Ask Question

Implement CI/CD with Office 365 CLI for SPFx Solution for MS Teams

Overview

Setting up CI (Continuous Integration) and CD (Continuous Deployment) helps to automate the process. By now all of us are aware of benefits of CI/CD. SharePoint Framework helps to build tabs for MS Teams.
In this article, we will explore the build and release pipelines for a Microsoft Teams app built with SPFx.
 
 

Prepare O365 Tenant for O365 CLI

Firstly, we will prepare our tenant to use O365 CLI.
1. On the command prompt, type below command.
  1. o365 login https://<tenant>.sharepoint.com  
2. Open the browser with the given link and enter the provided code to authenticate.
 
 
3. Approve the permissions to PnP Office 365 Management Shell app by clicking Accept.

Pipeline Skeleton

Build pipeline:
Build pipeline includes the below major steps,
  1. Package the SPFx solution (.sppkg)
  2. Prepare Teams manifest package (.zip)
  3. Publish SPFx and Teams packages to the Release pipeline
 
Release pipeline:
The release pipeline includes below steps powered by Office 365 CLI
  1. Deploy SPFx package to SharePoint App Catalog
  2. Deploy the Teams manifest package to MS Teams App Catalog
 

Set Up Build Pipeline

To achieve continuous build, create a build definition and add below steps to it.
 
Install Node JS
  • On the default agent, click the + sign.
  • Search for “Node”.
  • Add Node.js tool installer.
  • Specify the version as 8.x, or 10.x, as SharePoint Framework supports these Node versions.
 
 
 
Restore npm Packages
SharePoint Framework solution uses third-party npm packages. We need to restore those before starting the build process.
  • Add npm task.
  • Verify the command is set to install.
 
 
 
Build the Solution
Build the SPFx solution to minify the required assets to upload to CDN.
  • Add gulp task.
  • Set Gulp file path to gulpfile.js.
  • Set Gulp task as bundle.
  • Set Gulp arguments to --ship.
 
 
 
 
Package the Solution
The next step is to combine the assets into a package.
  • Add gulp task.
  • Set Gulp file path to gulpfile.js.
  • Set Gulp task as package-solution.
  • Set Gulp arguments to --ship.

 
 
Prepare the Artifacts
Azure DevOps build does not retain any files. The .sppkg file created from the above step needs to be copied to the staging directory to be published to release pipeline.
  • Add “Copy Files” task.
  • Set “Source Folder” to $(Build.Repository.LocalPath)/sharepoint/solution.
  • Set “Contents” to *.sppkg.
  • Set target folder to $(Build.ArtifactStagingDirectory)/sharepoint.
 
 
Archive for MS Teams App
Prepare a .zip file for the MS Teams app catalog and copy it to the staging directory as well.
  • Add “Archive files” task.
  • Specify the archive file to create as zip file.
 
 
Publish the Artifacts
Instruct Azure DevOps to keep the files after build execution.
  • Add “Publish Build Artifacts” task.
  • Set “Path to publish” to $(Build.ArtifactStagingDirectory)/drop.
  • Set “Artifact name” to drop.
 
  
 

Set Up Release Pipeline

Release Pipeline takes a package from the build and deploys it to a designated environment. To achieve continuous deployment, create a release pipeline.
 
Add below steps to release pipeline.
 
Install Node JS
  • Under environment, click “1 job, 0 task”.
  • The task configuration window will appear, same as in build definition.
  • On the default agent, click + sign.
  • Search for “Node”.
  • Add Node.js tool installer.
  • Specify the version as 8.x, or 10.x, as SharePoint Framework supports these Node versions.
 
 
Install Office 365 CLI
Office 365 Common Language Interface (CLI) is an open source project from OfficeDev PnP Community.
  • Add npm task.
  • Under “Command”, select custom.
  • In the “Command and Arguments”, type install -g @pnp/office365-cli.
 
 
Connect to SharePoint App Catalog and Deploy the App
We need to authenticate against App Catalog of our tenant and upload the solution package to app catalog.
  • Add the “PowerShell” task.
  • In the “Script” field, type in below command.
  1. o365 login "$(spappcatalogsite)" --authType password --userName "$(username)" --password "$(password)"  
  2.   
  3. o365 spo app add -p "$(System.DefaultWorkingDirectory)/_SPFx-MS Teams/drop/sharepoint/$(spfxpackagename)" --overwrite  
  4.   
  5. o365 spo app deploy --name "$(spfxpackagename)" --appCatalogUrl "$(spappcatalogsite)" --skipFeatureDeployment  
Deploy Package to MS Teams app catalog
We need to deploy the archived package (.zip) to MS Teams app catalog.
  • Add the “PowerShell” task.
  • In the “Script” field, type in below command.
  1. o365 login --authType password --userName $(username) --password $(password)  
  2.  
  3. #try to get app with manifest id  
  4. $catalogApps = o365 teams app list -o json | ConvertFrom-Json  
  5. $existingApp = $catalogApps | Where-Object {$_.externalId -eq "$(TeamsManifestId)" }  
  6.   
  7. if($existingApp){  
  8.     #app already exists so update it.  
  9.     #id used to update is the one returned from the teams app list call  
  10.     o365 teams app update --id $existingApp.id --filePath "$(System.DefaultWorkingDirectory)/_SPFx-MS Teams/drop/teams/SPFxTeamsManifest.zip"  
  11. }  
  12. else{  
  13.     #app does not exist so add it.  
  14.     o365 teams app publish --filePath "$(System.DefaultWorkingDirectory)/_SPFx-MS Teams/drop/teams/SPFxTeamsManifest.zip"  
  15. }  
 
 
 
 
Set Environment Variables
We need to define the process variables used in earlier steps.
  • Click the Variables tab.
  • Under Pipeline variables, add below variables.
 
The TeamsManifestId can be referred from manifest.json file in the teams folder of the SPFx solution.
 
After the successful CI and CD, the SPFx web part should be available in SharePoint and MS Teams.
SharePoint Site:
 
MS Teams: 
 
 
 

Summary

Azure DevOps helps to automate build and release pipelines for a Microsoft Teams app built with SPFx. Office 365 CLI helps to publish the SPFx package to SharePoint app catalog and teams manifest to the MS Teams app catalog.
 


Similar Articles