The SharePoint Framework (SPFx) has become and extremely important part of Web Part development and Modern Site (Team Site, Communication Site) design. It eases development of Web Parts and extensions and our work with SharePoint data. It features user-friendly tools and extensions. SPFx allows us to develop both for SharePoint Online and on-prem (SharePoint 2016 Feature Pack 2).

To create a SPFx project, we need the Yeoman generator, which installs the packages, modules and tools that are necessary for the development, functioning and testing of the project. We run it with the yo@microsoft/sharepoint command. Besides all the mandatory elements, we can also install the KnockoutJS and ReactJS frameworks. All other componets, such as jQuery, must be installed later.

To ease project development, the PnP (Patterns and Practices) team have created a new generator: @pnp/generator-spfx. This is an open-source solution based on the classic Microsoft SPFx Yeoman generator (@microsoft/generator-sharepoint version 1.6.0) with added functions, frameworks and plug-ins, that are downloaded during the project installation.

To use the generator, we must first install it globally. We do this by running npm install-g @pnp/generator-spfx (if we are using Yarn, the command is: yarn install global @pnp/generator-spfx; if we are using pnpm, the command is: pnpm install global-pnpmfile @pnp/generator-spfx).

In contrast with the regular generator (yo @microsoft/sharepoint), we create a new project with the yo @pnp/spfx command. This command runs the PnP SPFx Yeoman generator for a new project and allows us to choose a custom configuration, which download additional modules during installation. Besides the aforementioned KnockoutJS and ReactJS, we can also select HandlebarsJS and VueJs. In the future, they will also add Angular and others. After selecting a framework, we also have the option to select various plug-ins.

It is possible to install jQuery version 2.x and 3.x, @pnp/pnpjs( PnPJS is a JavaScript API for SharePoint and Office 365 REST API’s; it allows us to deal with SharePoint lists more easily), and @pnp/spfx-property-controls (these are additional setting options: a color palette for color selection, date and time selection, list and group selection …). If we select ReactJS as the framework, we can also choose @pnp/spfx-controls-react (ready-to-use controls based on React for Web Parts adresses, icons for data types, views and list selection, navigation and other similar controls). These options save us the trouble of having to install these packages individually later on.

The generator greatly simplifies the creation of a project and replaces the process of installing additional modules and plug-ins later on. But if this generator isn’t the right one for us, we can make our own generator, that will fulfill our specific needs.

Leave a Reply

Your email address will not be published. Required fields are marked *