DEV Community

Guido Zambarda
Guido Zambarda

Posted on • Originally published at iamguidozam.blog on

Getting started with SPFx CLI: install and use

#spfx #cli

Introduction

The SharePoint Framework version 1.23.0 (release note here) introduced a few new features, one of these new features is the introduction of a SPFx CLI.

This new CLI is meant to replace the legacy Yeoman-based generator with also a template system that is versioned independently from the CLI itself!

Getting started

Requirements

To start using the SPFx CLI you just need to install it, but before let’s briefly cover what are the system requirements. Here is the list:

  • Node.js with the following limitations:
    • Version >=22.14.0 and <23.0.0
    • Version >=24.12.0 and <25.0.0
  • A SharePoint Online tenant for testing and deploying solutions.
  • Optionally, you can use one of the following as dependency handling:
    • npm
    • pnpm
    • yarn

Installation

You can install the SPFx CLI globally with the following command:


npm install -g @microsoft/spfx-cli
Enter fullscreen mode Exit fullscreen mode

If needed, you can install the SPFx CLI locally to the current selected folder without specifying the -g parameter

Once the CLI is installed, you can verify the installation using the following command:


spfx -h
Enter fullscreen mode Exit fullscreen mode

This will return something similar to the following:


usage: spfx [-h] <command> ...

CLI for managing SharePoint Framework (SPFx) projects

Positional arguments:
  <command>
    create Scaffolds a new SPFx component
    list-templates
                  Lists available SPFx templates from configured sources

Optional arguments:
  -h, --help Show this help message and exit.

For detailed help about a specific command, use: spfx <command> -h
Enter fullscreen mode Exit fullscreen mode

Scaffold a project

To scaffold a new project you can use the create command, the syntax is like the following:


spfx create --template webpart-react --library-name hello-world-solution --component-name "Hello World"
Enter fullscreen mode Exit fullscreen mode

This will scaffold a web part project written in React named hello-world-solution and with a component named Hello World.

At this point you might be wondering what are the available templates, and for that there is a specific command which I will cover in the following chapter.

Available templates

To know what are the available templates you will simply have to execute the following command:


spfx list-templates
Enter fullscreen mode Exit fullscreen mode

This will return a table with all the available templates, at the time of writing this blog post the available ones are:

  • ace-data-visualization : A SharePoint Framework Adaptive Card Extension with Data Visualization.
  • ace-generic-card : A SharePoint Framework Adaptive Card Extension with Generic Card Template.
  • ace-generic-image-card : A SharePoint Framework Adaptive Card Extension with Image Card Template.
  • ace-generic-primarytext-card : A SharePoint Framework Adaptive Card Extension with Primary Text Card Template.
  • ace-search-card : Adaptive Card Extension with Search Card template.
  • extension-application-customizer : A SharePoint Framework Application Customizer extension template.
  • extension-fieldcustomizer-minimal : A minimal Field Customizer extension for SharePoint Framework without any framework dependencies.
  • extension-fieldcustomizer-noframework : A SharePoint Framework field customizer extension with no framework.
  • extension-fieldcustomizer-react : SharePoint Framework Field Customizer extension with React framework.
  • extension-formcustomizer-noframework : A SharePoint Framework Form Customizer extension with no framework.
  • extension-formcustomizer-react : A SharePoint Framework Form Customizer extension with React.
  • extension-listviewcommandset : SharePoint Framework list view command set extension template.
  • extension-search-query-modifier : A SharePoint Framework search query modifier extension.
  • library : A SharePoint Framework Library Component.
  • webpart-minimal : A minimal web part template (no framework) for SPFx.
  • webpart-noframework : A web part template with no framework (plain TypeScript) for SPFx.
  • webpart-react : A React-based web part template for SPFx.
  • test : A test template for SPFx.

Aside of the template name and description, you will also have the following information listed:

  • Category of the template:
    • ACE (Adaptive Card Extension)
    • Extension
    • Library
    • Web part
  • Version of the template.
  • SPFx version.
  • Number of files that are present in the template.

The available templates are listed from the GitHub repository, you can have a look at the available ones alongside their structure here.

Conclusions

The SPFx CLI is an awesome new addition to the development tooling for us developers. I think that it’s very useful and extensible, in particular I love the idea of allowing developers to create custom templates and that the whole community can benefit from that.

If you want to discover more you can have a look at the official Microsoft learn documentation here or to the GitHub repository here.

Hope this helps!

Top comments (0)