Using PnP SPFx Yeoman Generator For Creating SPFx Projects

Yeoman SharePoint generator

A simple definition - Yeoman SharePoint generator helps us to create SPFx project solutions and provides boilerplate code. We can install different generators depends on our requirements. For SPFx we use Yoeman SharePoint generator and this will be installed using the below npm command.

npm install @microsoft/generator-sharepoint -g

The above command will install the required generator and we can create our SPFx solution using the below command.

yo @microsoft/sharepoint 

The above command asks so many questions and based on our answers it generates a solution for us.

PnP SPFx Yeoman generator 

This generator got some extended capabilities such as it allows us to create projects using different frameworks which includes Angular, VueJS, Handlebar, etc.

Also, it provides an option for selecting some libraries while creating the solution itself instead of installing separately after solution creation. Use the below command for installing the PnP generator.

npm install -g @pnp/generator-spfx 

After the successful installation, type yo and press enter. This will list all the installed yeoman solution generators under Run a generator. Select @pnp/spfx or use the command yo @pnp/spfx.

Select the framework as SharePoint online in the first question which gives the below screen.

Angular Elements is disabled because Angular CLI is not installed. Install Angular CLI using the below command.

npm install -g @angular/cli

I selected React and it ask for the libraries required which is optional.

Select all the required option and once it is done it displays the default SharePoint solution generator screen with the default questions.

Reference - https://pnp.github.io/generator-spfx/