1 comment

PnP SPFx generator 1.6 released – A release to make your developer and team leads life easier

Without a doubt, the SharePoint Framework is one of the most successful adoptions and customisation models that has ever found its way into SharePoint, and there are reasons for this.

Over the past years, I talked and worked together with many developers that haven’t ever touched SharePoint before or found its way into this Application.

Many of those had a background in C# while, especially for a branding project, was more living in the web world. The overall feedback was that it is this kind of development unique in many ways.

SharePoint now is and has become a Software as a Service (I believe even in on-premises scenarios). That also meant that the classical development model was not applicable anymore and needed a rearchitecting that then became what we now know as SharePoint Framework. I found some great website development services, that use the best tools for their websites. With that shift, another paradigm changed too from “you have to do it this way” to “anything is possible”.

The benefits of using this generator

The clear benefit is that any web developer now can bring their end-user stories to life in SharePoint now. Not only that. Besides you can bring new tools to SharePoint that couldn’t use before. This a tremendous opportunity but also carries a great responsibility.

The difference between the Microsoft SharePoint generator is that it only contains the core tools to create SharePoint customisations. After the project finished, you can add additional tools on top of it. Every developer does this in their way. In best case following provided guidance step by step and time-consuming. The result unknown and in the best example as it should be.

One such a tool, for example, is the web pack bundle analyser that allows you to identify possible bloats in your solutions and avoid them. The way to integrate describes the article “Optimise SharePoint Framework builds for production“. Why not prevent those manual steps to open the documentation, reread it copy the required code pieces out and integrate them. Why not automate those steps?

The automated setup

Here the PnP Community generator comes into play because it is capable of adding this analytics tool to any new project without any extra effort for you as a developer and gives your team lead the confidence that it matches the defined guidelines. The current version gives you now for this case precisely this possibility. You can use it during development and especially before you ship your next SharePoint Framework solution.

The current release goes way beyond that and adds additional functionalities to create clean and more comfortable to read CSS files through a tool named StyleLint. This tool provides guidance and identifies optimisation potentials that you otherwise might have overlooked.

Like I have mentioned in blog posts in the past new frameworks such as Angular Elements, Handlebars or VueJS are also possible too. In this version not much has changed.

This release is more on helping you for your ReactJS projects too by add adding unit test capabilities via a testing framework. So you get already configure presets for ReactJS version 15 and 16 and supports SharePoint Online, 2019 and 2016. The name of this tools is JEST. To help you get more familiar with this, you will find some great articles at the end of this blog post.

An umbrella for some of the PnP Tools

With all that said the last thing to mention is that this new version, like the previous version before PnP tools you already use and add to any new project.

Upgrade check uses Office365 CLI

The embedded Office 365 CLI allows you to check if your project uses the latest version of the Microsoft SharePoint Framework. In case it needs an upgrade this gives you details information on how to do it too.

Available options for ReactJS projects

For development, it includes the SharePoint Patterns and Practices Reusable Client-side Libraries or also known as PnP/pnpjs.

If you are looking for some UI components for your property pane controls you get reusable property pane controls for SharePoint Framework solutions for any project, accompanied by reusable controls for SharePoint Framework solutions ReactJS project in specific.

Share your stories

This new version marks the first that helps you, your team and your co-worker to have a consistent setup of all your projects. There are still many possibilities not covered yet. If you miss something important, please let us know on GitHub.

The Microsoft SharePoint Framework generator is the engine. The PnP SPFx generator helps you to have a more advanced and enhanced experience as a developer. For team leads a more advanced setup of your projects.

To get started

The only thing you need to do is install the generator using the following command.

npm install -g @pnp/generator-spfx

Moreover, start a new project right away with:

yo @pnp/spfx

Additional resources

JEST Testing in the community