SPFX with DevOps using SharePoint ALM & Blob Storage

Implement SPFx (SharePoint Framework) deployment with DevOps using SharePoint ALM Commands & Blob Storage

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.

SharePoint ALM (Application Life Cycle Management) APIs provide simple APIs to manage deployment of your SharePoint Framework solutions and add-ins across your tenant or Site Collection level.

ALM APIs can be used to perform exactly the same operations that are available from a UI perspective

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 Azure & SharePoint ALM - Build Pipeline

• Node 10.x
• Gulp Clean
• Gulp Build
• Gulp Bundle --ship
• Gulp Package-Solution --ship
• Publish Build Artifacts  (Task Version 1)
• "Display Name" -> Publish Artifact: CDN
• "Path to Publish" -> temp/deploy
• "Artifact Name" -> CDN
• "Artifact Publish Location" -> Azure Pipeline
• Publish Build  Artifact
• "Display Name" -> Publish Artifact: App
• "Path to Publish" -> sharepoint/solution
• "Artifact Name" -> App
• "Artifact Publish Location" -> Azure Pipeline

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 Azure & SharePoint ALM - Build Pipeline
• Azure file copy (Task Version 2)
• "Display name"-> AzureBlobFileCopy
• "Source"->  $(System.DefaultWorkingDirectory)/_AzureDevOpsCI/CDN
• "AzureConnectionType"-> Azure Resource Manager
• "Azure Subscription"
• "Destination Type"-> Azure Blob
• "RM Storage Account"- > 
• "Container Name"->
• SharePoint ALM: Catalog Scoped Actions
• "Display name"->SharePoint ALM: Add Solution Package
• "Connection to SharePoint" -> commsite01
• "Action"-> Add Solution  Package
• "Path to SharePoint Solution Package"-> $(System.DefaultWorkingDirectory)/_AzureDevOpsCI/App/devops-01.sppkg
• "
• "PackageId output variable"-> AppPackageId
• SharePoint ALM: Catalog Scoped Actions
• "Display name"->SharePoint ALM: Deploy Solution Package
• "Connection to SharePoint" -> commsite01
• "Action"-> Deploy Solution Package
• "Id of the package in the SharePoint App Catalog"  -> $(AppPackageId)

End to End implementation SPFx deployment using Azure DevOps with SharePoint (Application Life Cycle Management) & Blob Storage for Static files.

SPFX with DevOps using Office 365 CLI

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