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

TypeScript

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 – Attempt to build Angular CLI with PNP JS

Recently attempted to create a command line interface (CLI) project with Angular 6 and SP-PNP-JS library for data access.  Followed tutorial by @arustacean at https://medium.com/ng-sp/angular-spa-in-sharepoint-3e7195741460 but with using the latest version of each library.

GitHub source code available at https://github.com/spjeff/sp-ng

However, received strange errors on the web pack TypeScript build process.   Attached video shows the troubleshooting process.  Cheers! 

shades_smile

Video

Screenshot

ERROR – Initializers are not allowed in ambient contexts.

image

Reference

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

Generate TypeScript interfaces from JSON data

Autocomplete JSON property names in JavaScript by generating TypeScript interfaces from sample JSON data.  Check out the below video for a live demo.

Huge win for developer productivity.  No more property name guessing or typos!

 

  1. Copy sample JSON from http://json.org/example.html
  2. Paste into http://json2ts.com/ by @Sorskoot to generate TypeScript interfaces
  3. Add TS file to application working folder
  4. Enjoy autocomplete with Visual Studio Code!
    shades_smile

 

VIDEO

 

SOURCE CODE

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲