spacer Skip to content

PnP SPFx Yeoman generator

This Yeoman generator provides improved governance for SharePoint Framework projects. It extends the out of the box Yeoman generator from Microsoft (@microsoft/generator-sharepoint) with recommended patterns and additional capabilities.

For an optimized development workflow, it extends the capabilities for ReactJS, and Knockout projects and support for additional frameworks, such as HandlebarsJS, VueJS and Angular Elements. It also includes includes advanced code analysis and testing tools, which you can take advantage of in your development work.

PnP SPFx Generator

All projects generated by this generator are 100% compliant with the out-of-the-box Yeoman generator from Microsoft. After the creation of a new solution, you can use either this generator or @microsoft/generator-sharepoint to add additional assets to your solution.

SPFx Generator Version

Base Generator
@microsoft/generator-sharepoint 1.8.1

Features

This generator supports a variaty of of frameworks and features such as:

  • VueJS
  • Handlebars
  • Angular Elements
  • Addons such as JEST, StyleLint or WebPack Bundle analyser

More on that in the features section.

Installation

via NPM

npm install -g @pnp/generator-spfx

via YARN

yarn global add @pnp/generator-spfx

via PNPM

pnpm install -g @pnp/generator-spfx

For Evaluation and Testing

This generator can be also tested via npx and the following command:

npx -p yo -p @pnp/generator-spfx yo @pnp/spfx

It will create a new project without installation of the generator. To add other assets the same command line can be executed again on the project folder.

Start a new project

To start a new project execute the following command:

yo @pnp/spfx

This will start the PnP SPFx Yeoman generator for a new project that gives you all the options to choose from.

Watch it in action

asciicast

Command line options

The following options provide a complete list of available switches.

Usage:
  yo @pnp/spfx [options]

Options:
  -h,    --help                     # Print the generator's options and usage
         --skip-cache               # Do not remember prompt answers - Default: false
         --skip-install             # Do not automatically install dependencies - Default: false
         --force-install            # Fail on install dependencies error - Default: false
         --component-description    # Web part description
         --component-name           # Web part name
         --component-type           # The type of component:
                                        - "webpart"
                                        - "extension"
         --environment               # The target environment for the solution:
                                        - "onprem"
                                        - "onprem19"
                                        - "spo"
         --extension-type           # The type of extension:
                                        - "ApplicationCustomizer",
                                        - "FieldCustomizer"
                                        - "ListViewCommandSet"
  -pm,   --package-manager          # Let you choose the package manager:
                                        - "npm"
                                        - "yarn"
                                        - "pnpm"
         --plusbeta                 # Use the beta packages
         --skip-feature-deployment  # If specified, allow the tenant admin the choice of being able
                                      to deploy the components to all sites immediately without running any
                                      feature deployment or adding apps in sites
         --solution-name            # Solution name, as well as folder name

Further information