Part 2 of 5 in the SPFx CLI Series

The old SPFx scaffolding workflow required three global installs, an interactive wizard, and several minutes of prompt navigation before a single line of project code appeared. @microsoft/spfx-cli changes that.

One install. One command. No prompts.

This post is a hands-on tutorial covering everything you need to go from zero to a scaffolded, buildable SPFx project using @microsoft/spfx-cli. As of May 2026, the tool is in pre-release (0.1.0-pre.3), but it is stable enough for exploration and new project scaffolding.

If you want the background on why Microsoft built this tool and what problems it solves, see Part 1 of this series.

Prerequisites

Before installing, confirm your Node.js version:

node --version

@microsoft/spfx-cli requires Node 22 or Node 24. These are the currently active LTS and current releases that SPFx 1.23+ supports.

If you are on an older Node version, use nvm or nvm-windows to switch:

nvm install 22
nvm use 22

Installation

npm install -g @microsoft/spfx-cli

That is the complete installation. No yo. No @rushstack/heft global. No @microsoft/generator-sharepoint global.

Verify the installation:

spfx --help

You should see the available commands listed.

The Two Commands

@microsoft/spfx-cli currently exposes two commands:

Listing Available Templates

Start by listing what templates are available:

spfx list-templates

As of May 2026, there are 17 templates across four categories:

Web Parts

Extensions

ACE / Viva Connections

Other

Scaffolding a React Web Part

The most common starting point. Use the webpart-react template with the three required flags:

spfx create \
  --template webpart-react \
  --library-name my-spfx-library \
  --component-name "Hello World"

What each flag means:

• --template — The template to use (required). Must match a name from spfx list-templates.
• --library-name — The npm package name for the solution (required). Used as the library/package identifier. Lowercase, hyphenated.
• --component-name — The display name of the component (required). Used in manifest files and display strings.

The CLI fetches the template from GitHub at runtime and generates the project in the current directory (or in --target-dir if specified).

Specifying a Target Directory

By default, the scaffold is created in the current working directory. To specify a different location:

spfx create \
  --template webpart-react \
  --library-name my-spfx-library \
  --component-name "Hello World" \
  --target-dir ./projects/hello-world

Choosing a Package Manager

@microsoft/spfx-cli supports npm, pnpm, yarn, or skipping installation entirely:

spfx create \
  --template webpart-react \
  --library-name my-spfx-library \
  --component-name "Hello World" \
  --package-manager pnpm

Valid options: npm, pnpm, yarn, none.

Using none skips the dependency installation step — useful in CI environments where you want to control when npm install runs.

Pinning to a Specific SPFx Version

If you need to scaffold against a specific SPFx version (for example, to match an environment that has not yet upgraded to the latest):

spfx create \
  --template webpart-react \
  --library-name my-spfx-library \
  --component-name "My Web Part" \
  --spfx-version 1.22

The CLI fetches the templates from the GitHub repo at the corresponding version branch. Available version branches are version/latest, version/1.22, and so on.

Scaffolding an Extension

Extensions use the same spfx create command pattern:

# Application customizer
spfx create \
  --template extension-application-customizer \
  --library-name my-app-customizer \
  --component-name "Site Header Customizer"
# List view command set
spfx create \
  --template extension-listviewcommandset \
  --library-name my-lvcs \
  --component-name "Document Actions"

Scaffolding an ACE Component

spfx create \
  --template ace-generic-primarytext-card \
  --library-name my-ace-card \
  --component-name "Team Updates Card"

Scaffolding a Library Component

spfx create \
  --template library \
  --library-name my-shared-library \
  --component-name "Shared Utilities"

From Scaffold to Build

After scaffolding completes, navigate into the generated project:

cd my-spfx-library

Install dependencies if you used --package-manager none or if you want to run install manually:

npm install

Build the project:

npm run build

For a production bundle:

npm run bundle -- --ship
npm run package-solution -- --ship

The standard SPFx build and package commands work exactly as they do in Yeoman-scaffolded projects. The scaffold output is structurally identical.

Complete spfx create Flag Reference

Environment variables:

The Scaffold Log

Every time you run spfx create, the CLI appends a structured entry to .spfx-scaffold.jsonl in the project directory. This is a JSONL (newline-delimited JSON) file that records each scaffold run — useful for auditing, debugging, and tracing scaffold history in team environments.

What Gets Generated

The scaffold output from @microsoft/spfx-cli is structurally identical to what yo @microsoft/sharepoint produces. You get:

• config/ — Build and packaging configuration
• src/ — Component source files
• sharepoint/assets/ — Deployment assets
• package.json — Dependencies and scripts
• tsconfig.json — TypeScript configuration
• .yo-rc.json — SPFx project metadata (retained for tool compatibility)
• gulpfile.js — Heft-based build pipeline entry

Existing tooling, documentation, and build patterns that work with Yeoman-scaffolded projects work identically with @microsoft/spfx-cli-scaffolded projects.

Pre-Release Notes

As of May 2026, @microsoft/spfx-cli is in pre-release. A few things to be aware of:

• The --version flag is not yet implemented. You cannot check the installed CLI version this way yet (tracked in issue #237).
• Adding components to an existing project is not yet supported. Use yo @microsoft/sharepoint for this workflow until merge helpers land in Phase 2.
• JSON output mode for scripting is planned but not yet available (issue #235).

For new project scaffolding, the tool is stable and ready to use.

Next in This Series

• Part 3: Yeoman vs. @microsoft/spfx-cli — The Complete Comparison
• Part 4: Custom Templates and CI/CD with @microsoft/spfx-cli
• Part 5: The Future of SPFx Scaffolding — Roadmap and What’s Next

Resources

• GitHub: https://github.com/SharePoint/spfx
• Short URL: https://aka.ms/spfx/cli
• npm: https://www.npmjs.com/package/@microsoft/spfx-cli
• Official Docs: SharePoint Framework CLI on Microsoft Learn