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.
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¶
This generator supports a variaty of of frameworks and features such as:
- Angular Elements
- Addons such as JEST, StyleLint or WebPack Bundle analyser
More on that in the features section.
npm install -g @pnp/generator-spfx
yarn global add @pnp/generator-spfx
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:
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¶
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