The Toolbox: SPFx, CLI for Microsoft 365 & PnP PowerShell

Lesson 2: The Toolbox โ€” SPFx, CLI for Microsoft 365 & PnP PowerShell

Three tools dominate modern SharePoint work. They overlap just enough to confuse beginners, so here's the honest split before we go deep on any one of them.

The three tools

ToolWhat it isBest forRuns on
SPFx (SharePoint Framework)A build framework + runtime for custom components that render inside SharePoint pages (and Teams/Outlook).Web parts and extensions โ€” the actual UI you build.Node.js + Gulp + TypeScript, bundled by webpack.
CLI for Microsoft 365An open-source, cross-platform command-line tool (Node) for managing Microsoft 365 and SharePoint.Scripting and automation: deploy apps to the catalog, create sites, run site scripts, in CI/CD and dev boxes alike.Node.js โ€” Windows/macOS/Linux. Perfect for GitHub Actions.
PnP PowerShellThe classic PowerShell module (community + Microsoft-supported) for SharePoint administration.Heavy admin and provisioning work, especially in Windows-only automation and existing PS tooling.Windows PowerShell (also works on PowerShell 7 / other OSes for most cmdlets).
One-line rule of thumb: SPFx builds your custom UI; CLI for Microsoft 365 or PnP PowerShell ship and manage it (and everything else in the tenant). You'll use SPFx in your dev loop and a CLI/PowerShell tool in your deployment pipeline.

Where they overlap (and how to choose)

  • Deploying an SPFx package: both CLI for Microsoft 365 (m365 spo app add / deploy / install) and PnP PowerShell (Add-PnPApp / Publish-PnPApp / Install-PnPApp) can upload and activate your .sppkg. In a GitHub Actions world, the cross-platform CLI is usually the smoother fit.
  • Provisioning sites & lists: both can create sites, lists, content types, and apply site scripts. If you already live in PowerShell, stay there; if your automation is node-based or repo-driven, use the CLI.
  • Anything else in M365 (Teams, Entra ID apps, SharePoint search, etc.): CLI for Microsoft 365 is the broadest single tool.

One more: PnP Provisioning Templates

For whole-site structure, look at PnP Provisioning Templates โ€” an XML/JSON description of a site (lists, fields, content types, navigation, files). You can extract a template from a site you designed by hand (m365 spo site template save / Get-PnPSiteTemplate), check it into GitHub, and re-apply it anywhere. That's the closest SharePoint gets to "infrastructure as code," and it composes perfectly with SPFx packages in the same repo.

Don't fall into this trap: using PowerShell/cmdlets to do UI work (like building HTML inside script steps) โ€” that's what SPFx is for. And don't hand-provision lists in the browser when you're already shipping site templates from a repo. Pick the lane per job, not per habit.

๐Ÿง  Knowledge Check

1. Which tool is used to BUILD custom web parts that render inside SharePoint pages?

2. In a GitHub Actions pipeline, which deployment tool is usually the smoothest fit and why?

3. What is a PnP Provisioning Template?

Further Reading