Toolchain¶
Overview¶
From classic to modern¶
- Conquer your dev toolchain in 'Classic' SharePoint – Part 1
- Conquer your dev toolchain in 'Classic' SharePoint – Part 2
- Conquer your dev toolchain in 'Classic' SharePoint – Part 3
- Conquer your dev toolchain in 'Classic' SharePoint – Part 4
Webpack¶
Prepare¶
Commands¶
Gulp¶
- Getting up to speed with Gulp
- Gulp: Basics
- SPFx Automatically Generating Revision Numbers
- SPFx Automatically Generating Revision Numbers + Versioning
- One command to create a clean solution package
gulp dist¶
install npm package
npm install gulp-sequence --save-dev
add to gulpfile.js
if (process.argv.indexOf('dist') !== -1){
process.argv.push('--ship');
}
const gulpSequence = require('gulp-sequence');
gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
Deployment¶
- https://github.com/estruyf/UploadToOffice365SPFx/blob/master/gulpfile.js
- https://github.com/estruyf/gulp-spsync-creds
- https://n8d.at/blog/how-to-version-new-sharepoint-framework-projects/?platform=hootsuite
NPM¶
package-lock.json¶
Optimization packages¶
- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/optimize-builds-for-production
- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/optimize-builds-for-production
- https://rencore.com/sharepoint-framework/script-check/
- https://www.techmikael.com/2018/08/an-adventure-into-optimizing-sharepoint.html
Update packages¶
# check
npm outdated -g
# install
npm -g i npm-check
# interactive update of global packages
npm-check -u -g
# interactive update for a project you are working on
npm-check -u
# unistall package
npm uninstall -g <module>
Check package version¶
List global npm packages versions
npm list -g --depth 0
List detail global npm package versions from one package
npm view @microsoft/generator-sharepoint
PNPM¶
- NPM, Yarn and PNPM: Which Package Manager Should You Use for SharePoint Framework Projects?
- pnpm - Package Manager
- Using pnpm in SPFx projects
Package.json¶
Security¶
- have-you-ever-thought-about-checking-your-dependency-for-vulnerabilities
- 5 ways to manage and monitor your digital workplace
Installation¶
Update SPFx version¶
- go into solution folder
- search für "@micorosoft/sp-"
- update all package (latest or version)
npm outdated
npm install package-name@latest --save
npm install package-name@version --save
gulp clean
gulp build
Test¶
gulp serve --nobrowser
Tips¶
- https://pdemro.com/improve-sharepoint-framework-build-times-by-hacking-gulp-and-webpack
- https://github.com/pdemro/spfx-gulpfile-hack
Deployment¶
npm i
gulp clean
gulp build
gulp --ship
gulp package-solution --ship
Dependencies¶
npm install saves any specified packages into dependencies by default. Additionally, you can control where and how they get saved with some additional flags:
-P, --save-prod: Package will appear in your dependencies. This is the default unless -D or -O are present.
-D, --save-dev: Package will appear in your devDependencies.
-O, --save-optional: Package will appear in your optionalDependencies.
Version Manger (nvm, npx)¶
- How to install Node.js on Windows
- Node Version Manager (nvm) for Windows
- Use SPFx and NVM in an easy way with PowerShell
- How to use specific NodeJS version with your SPFx project
- Better Node.js Install Management with Node Version Manager
- Use Node Version Manager to develop your SPFx apps
// check version
node --version
// list installed versions of node (via nvm)
nvm ls
// To list available remote versions on Windows 10 you can type
nvm list available
// install a specific version of node
nvm install 10.22.1
nvm install 8.17.0
nvm list
// switch version of node
nvm use 10.22.1
# for spfx deployment
npm i -g gulp
npm i -g yo
npm i -g @microsoft/generator-sharepoint
gulp trust-dev-cert
# for spfx advanced
npm i -g @pnp/office365-cli
npm i -g spfx-fast-serve
npm i -g @pnp/generator-spfx
npm i -g npm-check