Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

SPFx

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. 

shades_smile

Video

Screenshots

image
image
image
image
image
image
image
SNAGHTMLe61d4d

References

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'

VIDEO – Reduce SPFX Node Modules from 50,000 files to 1,000

Recently discovered an efficient centralized node package manager (PNPM) which leverages “symlinks” or symbolic linked folders to reduce disk storage duplication.  Recued from 50,200 to 1,000.  Demo video below.   Cheers!  

shades_smile

Code

# Install the package globally:
npm install -g pnpm
# In each SPFX project (or nodejs project i believe):
pnpm install

Video

Cool Chart

image

References

VIDEO – Create SharePoint Framework (SPFx) “Hello World” Web Part

The video below demo shows how to create a new SPFx SharePoint Framework web part including Gulp, Visual Studio code, project folder tour, and TypeScript import references.

Great way to start developing for Modern pages (SharePoint Online and SharePoint 2016) running localhost on a developer workstation.  No need for a SharePoint virtual machine.  Cheers! 

shades_smile

Video

References

Reduce SPPKG WebParts Features with Powershell

The below steps will reduce a SPPKG to only select Features and WebParts we want to keep.  Every SPPKG file is actually a ZIP with XML manifest and subfolder for each WebPart and Feature.  Extracting the SPPKG as ZIP allows us to review the internal content, enumerate all Features, and then select ones to keep in a final compressed ZIP file (SPPKG file).

If you want to upload only a few WebParts from a SPPKG package to Office 365’s App Catalog then check out the video below.

Cheers!  

shades_smile

Video

Code

Screenshots

image
image
image

References

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲