Implement SPFx (SharePoint Framework) deployment with Azure DevOps Pipeline using Office 365 CLI
Azure DevOps (Visual Studio Team Services / Team Foundation Server) consists of a set of tools and services that help developers implement DevOps, Continuous Integration, and Continuous Deployment processes for their development projects.
This article explains the steps involved in setting up your Azure DevOps environment with Continuous Integration and Continuous Deployment to automate your SharePoint Framework builds, unit tests, and deployment.
Continuous Integration
Continuous Integration (CI) helps developers integrate code into a shared repository by automatically build and packaging the solution each time new code changes are submitted.
Setting up Azure DevOps for Continuous Integration with a SharePoint Framework solution requires the following steps:
- Office 365 CLI Build Definition
- Node 10.x
- Gulp Clean
- Gulp Build
- Gulp Bundle --ship
- Gulp Package-Solution --ship
- Copy Files
- "Display Name" -> Copy Files To: Copy Files to: $(Build.ArtifactStagingDirectory)/drop
- "Contents" -> **/*.sppkg
- "Target Folder" -> $(Build.ArtifactStagingDirectory)/drop
- Publish Build Artifact
- "Display Name" -> Publish Artifact: drop
- "Publish To Path" -> $(Build.ArtifactStagingDirectory)
- "Artifact Name" -> Drop
- "Artifact Publish Location" -> Azure Pipelines
Continuous Deployment
Continuous Deployment (CD) takes validated code packages from build process and deploys them into a staging or production environment. Developers can track which deployments were successful or not and narrow down issues to specific package versions.
Setting up Azure DevOps for Continuous Deployments with a SharePoint Framework solution requires the following steps:
- Office 365 CLI Release Pipeline
- Node 10.x
- NPM
- "Display Name" -> npm custom
- "Command" -> custom
- "command and arguments" -> install -g @pnp/office365-cli
- Command Line
- "Display Name" -> Connect to SPO
- "Scripts" ->
- o365 login https://$(tenant).sharepoint.com/$(catalogsite) --authType password --userName $(username) --password $(password)
- Command Line
- "Display Name" ->SP add solution
- "Scripts" ->
- o365 spo app add -p $(System.DefaultWorkingDirectory)/_SPFx-AutomateDeployment-CI/drop/drop/sharePoint/solution/clidemo-02.sppkg --overwrite --appCatalogUrl https://$(tenant).sharepoint.com/$(Devcatalogsite) --scope sitecollection
- Command Line
- "Display Name" -> Deploy Solution
- "Scripts" ->
- o365 spo app deploy --name clidemo-02.sppkg --appCatalogUrl https://$(tenant).sharepoint.com/$(Devcatalogsite) --scope sitecollection
End to End implementation SPFx deployment with Azure DevOps using Office 365 CLI