As the SPFx is progressing and changing rapidly, I shall try to update this page as time goes by. I have been dabbling with the SharePoint Framework (SPFx) for a few months and went to a day workshop with Andrew Connell (AC) on SPFX as the SharePoint Conference 2018 North America on 20 May 2018. I would recommend attending Andrew Connell's training (I have gone to a lot of workshops and presentations over the years, and Andrew is excellent). These notes are my summary of items to be aware of.
Last Updated: 12 Mar 2025
Start here for PowerFx controls and scaffolding.
Last Updated: 15 June 2018
SP2016 on-prem. Dev vs No FTC Sp2016 on-prem. vs SPO SPFx
https://www.voitanos.io/
Background:
Node.js - Allows you to create a web server and compile JS on the server-side. It's 2 main functions to use in SP are: 1) Need it for local development workbench and 2) Node.js has npm (package manager) built in, you need node.js that uses npm and webpack to uses gulp to build packages (like we did with MSBuild for WSP's).
webpack - build tool that manages code. Manages styles and JS files.
Last Updated: 15 June 2018
- To use the SPFx on-prem. with SP2016, you need to have feature pack 2. SP2016 only for SPFx web parts does not do SP2019 will be behind SP365 but it shall have all the updates circ May 2018 when it is released circa Sept-Oct 2018.
- Safer to user SPFx on modern pages rather than classic SP pages.
- Development can be done on any laptop with any editor.
- Either build Web Parts in the local or O365 (/_layouts/15/workbench.aspx) Workbench.
- What you need is 1. Node.js, 2. npm, 3. Yeoman, 4. GULP, 5. Webpack (used to check and load dependency JS modules). AC suggests for simplicity install and forget about: Node.js, Yeoman, Gulp and webpack. You'll use them but you don't really need to understand them.
- Language-wise, use JavaScript or you can use TypeScript which obviously converts down into normal JS but makes it easier to program (e.g. type ahead/intelisense).
- Use NVM (allows for multiple versions of Node.js; you may have clients of different versions and NVM allows you to have multiple Node.js versions on a machine) and use the LTS (Long-term support) versions: v8.11.2 or v8.9.4
- Install the following pre-reqs using npm: yomen, gulp and the MSfx template for yeomen scaffolding namely @microsoft/sharepoint…
- VS code makes a good editor, I think Mark Rackly has built a VS template that will do all the scaffolding instead of using yeoman.
| SPFx Tool | C# WSP Tool | Desc |
| Node.js | .NET | Used to run npm and compile the SP package (*.sppkg) using gulp and webpack. Runs a local server to use the tooling |
| npm | Nuget | Download 3rd party packages/frameworks e.g. jQuery or Angular |
| yeoman | Visual Studio | Generates basic SPFx web part files, same as a template built using VSIX in VS. Ensure you have all the basic parts to build a SPFx web part |
| gulp | MSBuild or F5 | Builds the package |
| webpack | NA | checks dependant files are included in the package. AC explained it as shaking the tree (removes unnecessary js libraries and ensure libraries are included) |
SP2016 on-prem. Dev vs No FTC Sp2016 on-prem. vs SPO SPFx
- WSP
- Timer
- Custom Service Apps
- Event Handlers
https://www.voitanos.io/
Background:
Node.js - Allows you to create a web server and compile JS on the server-side. It's 2 main functions to use in SP are: 1) Need it for local development workbench and 2) Node.js has npm (package manager) built in, you need node.js that uses npm and webpack to uses gulp to build packages (like we did with MSBuild for WSP's).
webpack - build tool that manages code. Manages styles and JS files.
