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'