0 comment

The Community SPFx generator – The ideas, the patterns and possibilities

I am pretty excited that finally the first version of the open source community driven SPFx generator has been released last Thursday and publicly announced and is part of the SharePoint / Office 365 Pattern and Practices Personally, for me, it was a great journey to bring this to life in collaboration with Microsoft engineering.

It was a longer journey than expected but there were some considerations and decisions to make to have a solid fundament for future improvements and to allow fast and easy integrations.

The idea behind composability of Yeoman generators

The compostability model of Yeoman generator is the idea that you first define what you need in your project. Instead of writing the integration, for example, a testing framework yourself, you can use another generator an integrate this instead.

In case of the open source community generator, we use to 100% the Microsoft SPFx generator as the base generator and add additional configurations to it. Things like libraries that gets asked and combined based on your choices.

Current Framework selection of the yeoman generator

It allows to upgrade and stay consistent with new releases of SPFx. Currently, the community generator uses SPFx 1.6 and the initial project provisioning you can choose to use the community generator or the SPFx generator.

Pattern and Practices

To create a Yeoman generator that supports a single framework is straightforward and well documented on the Yeoman web site. The challenge, in this case, was to have a pattern that can be useful and reusable for new generators.

The community generator contains now the main and an add-on generator. Add new libraries to SPFx is all handled by the add-on generator and can be extended through some configuration files.

Add-on and Handlebars generator

The main generator is where most of the logic happens. It handles the inquiry of your project flavours and takes care that the add-on, other framework generators and SPfx get executed in the right order.

One tricky part of the implementation was the installation and adding new npm packages. For optimal performance, user experience and extensibility in the future there is a practice we currently use.

Instead of installing these packages on top of the SPFx installation we directly inject additional dependencies directly in the configuration. This way the installer only has to run once after everything is set up.

Needless to say that this practice helps you to bring your frameworks and tools faster to the community generator.

Plug and Play

Currently, the only framework generator included so far is the one for Handlebars. I consider these generators as a “Plug and Play” generators because those get called dynamically based on the users choice inside the main generator

To add new frameworks it requires to create an additional generator. This generator then has a complete execution set that defines what package dependencies to add, what modifications to add to the gulp file and so on.

Generator template for new ones

In case the generator has additional options theses can be added to the generator too and then wired up in the main generator.

One of the “Plug and Play” generators contains an isolated set of configuration. This way it is faster and easier to integrate a new feature in the main generator. Through some extent of isolation, all generators become more comfortable to test and maintain for future releases.

In case you have the requirement for your company generator that only uses this gives you the possibility to define your unique set of configuration.

People and Possibilities

Last week we already received the first requests for new generators from people in the community, which is terrific. If you use a framework in SPFx that is currently not available please show it to the community.

We tried to create the implementation of new generators as smooth as possible. If you know how to configure your development environment safely, you can bundle the configuration in a new generator. The benefit for you is that you can use your generator in @pnp/spfx.

The possibilities go way beyond this and especially for companies this enables them to set up every new project individually according to their guidelines and development standards. When the generator first got announced Paul Bullock replied to the tweet.

This looks great, imaging having the option to include the PnP libraries or test frameworks, or fork it and have your packages included when you create a new #spfx project. Nice Job! – Paul Bullock @pkbullock

In this tweet, he described precisely all scenarios that we thought of that leaded to this generator and this pattern.

If you use pnpjs, jQuery or libraries we add in next releases we are more than happy if you give it a try and use it.

If you have an idea, questions or challenges share it with us on the GitHub project page.

If you like to start developing right away with a new generator, please stop by at our documentation.

We love to get your feedback and remember – Sharing is caring.