VIDEO – Azure CICD Pipeline with SP Framework (SPFX)
Below end to end demonstration of creating SharePoint Framework (SPFX 1.9) with Azure Dev Ops (ADO) code repository to hold original source. ADO uses for source code repositry (repo) to hold the SPFX project code.
From there, ADO “Build” creates SPPKG dynamically with a Ubuntu container VM that employs NODE and NPM install to load all dependency. Centralized container build has the benefit of uniform consistency. No developer workstation configurations. No server setting inconsistency.
Finally ADO “Release” copies the SPPKG into SharePoint Online App Catalog with Office 365 Command Line Interface (CLI). From there, it can be added to page on sites across the O365 Tenant.
Cheers.
Video
Screenshots
References
- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/implement-ci-cd-with-azure-devops
- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
Code – Build Pipeline YAML
pool:
name: Azure Pipelines
steps:
- task: NodeTool@0
displayName: 'Use Node 10.x'
inputs:
versionSpec: 10.x
checkLatest: true
- task: Npm@1
displayName: 'npm install'
inputs:
verbose: false
- task: Npm@1
displayName: 'npm test'
inputs:
command: custom
verbose: false
customCommand: test
- task: PublishTestResults@2
displayName: 'Publish Test Results temp/test/junit/junit.xml'
inputs:
testResultsFiles: temp/test/junit/junit.xml
searchFolder: '$(Build.SourcesDirectory)'
- task: PublishCodeCoverageResults@1
displayName: 'Publish code coverage from $(Build.SourcesDirectory)/temp/test/cobertura-coverage.xml'
inputs:
codeCoverageTool: Cobertura
summaryFileLocation: '$(Build.SourcesDirectory)/temp/test/cobertura-coverage.xml'
reportDirectory: '$(Build.SourcesDirectory)/temp/test'
- task: Gulp@0
displayName: 'gulp bundle'
inputs:
targets: bundle
arguments: '--ship'
publishJUnitResults: true
- task: Gulp@0
displayName: 'gulp package-solution'
inputs:
targets: 'package-solution'
arguments: '--ship'
- script: 'dir sharepoint/solution/*.sppkg'
displayName: DIR
- task: CopyFiles@2
displayName: 'Copy Files to: $(build.artifactstagingdirectory)/drop'
inputs:
Contents: 'sharepoint/solution/*.sppkg'
TargetFolder: '$(build.artifactstagingdirectory)/drop'
- task: PublishBuildArtifacts@1
displayName: 'Publish artifacts: drop'
inputs:
PathtoPublish: '$(Build.ArtifactStagingDirectory)/drop'Code – Release Pipeline YAML
steps:
- task: NodeTool@0
displayName: 'Use Node 10.x'
inputs:
versionSpec: 10.x
steps:
- task: Npm@1
displayName: 'npm custom'
inputs:
command: custom
verbose: false
customCommand: 'install -g @pnp/office365-cli'
#Your build pipeline references a secret variable named ‘password’. Create or edit the build pipeline for this YAML file, define the variable on the Variables tab, and then select the option to make it secret. See https://go.microsoft.com/fwlink/?linkid=865972 variables: tenant: 'spjeff' catalogsite: 'sites/catalog' username: 'spjeff@spjeff.com' steps: - script: 'o365 spo login https://$(tenant).sharepoint.com/$(catalogsite) --authType password --userName $(username) --password $(password)' displayName: 'Command Line Script'
steps: - script: 'o365 spo app add -p $(System.DefaultWorkingDirectory)/SPFX-CICD/drop/sharepoint/solution/code.sppkg --overwrite' displayName: 'Command Line Script'
variables: tenant: 'spjeff' catalogsite: 'sites/catalog' steps: - script: 'o365 spo app deploy --name code.sppkg --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite)' displayName: 'Command Line Script'
