Post
Ask Question

Implement CI/CD with Office 365 CLI for SPFx Library Components

Overview

CI (Continuous Integration) and CD (Continuous Deployment) helps to automate the business processes. With the help of Office 365 CLI, the SPFx solutions can be automated for CI and CD.
In this article, we will explore the build and release pipelines for SPFx library components and a consumer web part.
 

The Solution Structure

Two independent SPFx solutions are set up as below:
  1. spfx-library: The SPFx library component, which is independently versioned and deployed through tenant app catalog.
  2. spfx-library-consumer: The SPFx web part which consumes the above library. 
 
 
 

The Catch for Build Pipeline

There is a difference in the mechanism of how the library is consumed from local and from tenant app catalog.
To consume an SPFx library for local testing:
  1. Run ‘npm link’ from the root directory of the library solution to create a local npm link.
  2. From the root of the web part folder, run the command ‘npm link spfx-library'.
 
To consume an SPFx library from tenant app catalog:
  1. Deploy spfx-library package in the tenant app catalog (tenant wide).
  2. In the web part’s package.json refer library in the dependencies section.
  1. "dependencies": {  
  2.     "spfx-library": "0.0.1", // here we added the reference to the library  
  3.     "@microsoft/sp-core-library": "1.9.0",  
  4.     "@types/webpack-env": "1.13.1",  
  5.     "@types/es6-promise": "0.0.33"  
  6. },  
 
The catch here for setting up the build pipeline is as below:
  1. For the web part to build during the build pipeline, it should have symlink to the library locally.
  2. For the web part to work on SharePoint site post-deployment, it should have library dependency specified in the package.json
  3. However, if we specify the library dependency in pakage.json, during the build it will try to get the package from npm as “GET https://registry.npmjs.org/spfx-library” and the build will fail.
 
 
 
Workaround
To avoid the above issue, I am maintaining a copy of package.json with library dependency inside folder “postinstall”.
 
 
 
 
After the ‘npm install’ and ‘npm link’ on the web part solution, we will replace the web part solution’s package.json file with above file. The subsequent bundle and package solution activities will process this package.json. When the web part is deployed to SharePoint, it will be able to refer the library component.
 
 

Set Up Build Pipeline

We will independently install npm packages, bundle, and package the library and web part. 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 the Node.js tool installer.
  • Specify the version as 10.x.
 
 
 
 
Restore npm Packages (for library component)
SharePoint Framework solution uses third-party npm packages. We need to restore those before starting the build process. This step will restore npm packages for the library component.
  • Add npm task.
  • Verify if the command is set to install.
 
 
 
 
Build the Library Solution
Build the SPFx solution to minify the required assets to upload to CDN.
  • Add gulp task.
  • Set the Gulp file path to gulpfile.js.
  • Set the Gulp task as bundle.
  • Set Gulp arguments to --ship.
 
 
 
Package the Library Solution
The next step is to combine the assets into a package.
  • Add gulp task.
  • Set the Gulp file path to gulpfile.js.
  • Set the Gulp task as package-solution.
  • Set Gulp arguments to --ship.
 
 
 
Reference library component type
Consume an SPFx library in the build definition locally.
  • Add npm task.
  • Under ‘Command’, select custom.
  • In the ‘Command and Arguments’, type ‘link’.
 
 
 
Prepare the artifacts for library component
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 the “Copy Files” task.
  • Set “Source Folder” to $(Build.Repository.LocalPath)/ spfx-library-component/spfx-library/sharepoint/solution.
  • Set “Contents” to *.sppkg.
  • Set target folder to $(Build.ArtifactStagingDirectory)/drop.
 
 
 
Restore npm Packages (for web part)
This step will restore npm packages for the web part component.
  • Add npm task.
  • Verify if the command is set to install.
 
 
 
Create symlink
Create a symbolic link to the locally built library into the web part from the root of the web part folder.
  • Add npm task.
  • Under ‘Command’, select custom.
  • Set the working folder to root of the web part folder as ‘spfx-library-component/spfx-library-consumer’.
  • In the ‘Command and Arguments’, type ‘link spfx-library’.
 
 
 
Replace package.json (Workaround step)
After the ‘npm install’ and ‘npm link’ on the web part solution, replace the web part solution’s package.json file with the copy from the ‘postintall’ folder which refers to the library component.
  • Add the “Copy Files” task.
  • Set “Source Folder” to ‘spfx-library-component/spfx-library-consumer/postintall/’.
  • Set “Contents” to *.json.
  • Set target folder to ‘spfx-library-component/spfx-library-consumer’.
 
 
 
Build the web part
Build the SPFx solution to minify the required assets to upload to CDN.
  • Add gulp task.
  • Set the Gulp file path to gulpfile.js.
  • Set the Gulp task as bundle.
  • Set Gulp arguments to --ship.
 
 
 
Package the Library Solution
The next step is to combine the assets into a package.
  • Add gulp task.
  • Set the Gulp file path to gulpfile.js.
  • Set the Gulp task as package-solution.
  • Set Gulp arguments to --ship.
 
 
 
Prepare the artifacts for library component
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 the “Copy Files” task.
  • Set “Source Folder” to $(Build.Repository.LocalPath)/spfx-library-component/spfx-library-consumer/sharepoint/solution.
  • Set “Contents” to *.sppkg.
  • Set target folder to $(Build.ArtifactStagingDirectory)/drop.
 
 
 
Publish the Artifacts
Instruct Azure DevOps to keep the files after build execution.
  • Add the “Publish Build Artifacts” task.
  • Set “Path to publish” to $(Build.ArtifactStagingDirectory)/drop.
  • Set “Artifact name” to drop.
 
The drop folder will contain .sppkg packages for both library component and web part.
 

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 the 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 the 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 the App Catalog of our tenant and upload the solution package to app catalog.
  • Add the “Command line” task.
  • In the “Script” field, type in below command.
  1. o365 login https://$(tenant).sharepoint.com/$(catalogsite) --authType password --userName $(username) --password $(password)  
 
 
 
Add & Deploy Library Package to App Catalog
Add the library package (.sppkg) to the SharePoint app catalog and deploy tenant wide.
  • Add the “Command line” task.
  • In the “Script” field, type in below command.
  1. o365 spo app add -p $(System.DefaultWorkingDirectory)/SPFx-CI-Library/drop/spfx-library.sppkg --overwrite  
  2.    
  3. o365 spo app deploy --name spfx-library.sppkg --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite)  
 
 
 
Add & Deploy Consumer WP Package to App Catalog
Add the web part package (.sppkg) to the SharePoint app catalog and deploy it.
  • Add the “Command line” task.
  • In the “Script” field, type in below command.
  1. o365 spo app add -p $(System.DefaultWorkingDirectory)/SPFx-CI-Library/drop/spfx-library-consumer.sppkg --overwrite  
  2.    
  3. o365 spo app deploy --name spfx-library-consumer.sppkg --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite)  
 
 
 
Set Environment Variables
We need to define the process variables used in earlier steps.
  • Click the Variables tab.
  • Under Pipeline variables, add the below variables.
 
 

Test the functionality

After the successful CI and CD, the SPFx library package should be deployed tenant wide along with the web part package.
 
 
 
Add the web part to the SharePoint page. The web part should be able to make a call to the library component.
 
 
 
 
 

Summary

Azure DevOps helps to automate the build and release pipelines for SPFx library component. Office 365 CLI helps to connect to SharePoint and publish the SPFx packages to SharePoint app catalog with easy commands.
 

See Also

 


Similar Articles