Whenever you start a new SharePoint project, you might depend on external libraries. These libraries are maybe small helper tools such as jQuery or maybe like to go beyond KnockOut or React. Let’s say you want to use Handlebars, VueJS or perhaps Angular 1.x. Everything you perform the same setup steps in the same order. In my case, I start most new projects using Handlebars. Luckily I wrote my documentation to make the configurations pretty smoothly. To be honest, it is proper training but on the other hand a complete waste of time. Why not automate my personal preferences and start a new project from scratch with my settings already applied. This article takes a look at why you might consider writing your own SharePoint generator in future.
On one Friday I tweeted that I was going to change and try to extend SPFx creating my generator based on SPFx.
Just because you and I can. I will write a blog post on how to create your own #SPFx generator –
Make some company wide adjustments and get faster a project running with preferred settings.
— Stefan Bauer (@StfBauer) February 2, 2018
After some exciting responses from the community, I got the most exciting tweet by Vesa Juvonen
How about we work on this together and ensure that we get the documentation and functionality aligned with what we are planning or planned to do in engineering. Will ping you on this privately to get things moving.
— Vesa Juvonen (@vesajuvonen) February 3, 2018
Right now we are working together on scenarios on how to extend SharePoint Framework with your custom settings. You will find right here no full tutorial on how this works, but you learn more about the base concept. One thing you will find at the end of this generator is my proof of concept; A generator that supports the SPFx configuration for HandlebarsJS and jQuery.
DRY your SPFx
I don’t like to make any configurations for my new SPFx projects anymore. Why not automate the whole process to my needs rather than providing a default project. The whole concept of Yeoman is actually to reuse generators that already are available. Just take the primary web app generator for example. This generator uses already others, and not everything is hardcoded in this generator. Another generator provides the test framework Mocha for the web application to develop. So instead of creating a manual implementation of this testing framework the web app generator make direct use of the already set up configuration. For this DRY or don’t repeat yourself approach some goals are attached to this:
- Upgradeability Writing an own generator is not that hard and mostly straightforward. In case of SPFx you can mingle and try to build everything from scratch, but it is not practicable. Not only that you need to be aware of all the changes that happen in the SPFx generator or SharePoint Framework. You even need to adapt your generator with the changed code. By reusing the already built generator, your custom generator is upgradable, and you only have to consider your specifics.
- Customisable to corporate standard I guess every company has tools, standards and pre-built components they reuse for their development. You are not pleased with React nor Knockout and already started to build everything in Angular, VueJS or something else.The “No Framework” option provides a boilerplate that allows you to add your tools. The configuration in many cases may be time-consuming and different developer might configure some things differently. In this case, a custom corporate Yeoman generator can maintain your existing assets and bring them in a defined way to your development workflow.
- DRY – Define a standard set of needed generators I guess two or three custom Yeoman generators are mostly enough to cover corporate scenarios. The good thing about yeoman is that you can embed those scenarios only in one Yeoman generator.The provided sample I created comes with support for jquery or Handlebars support both configurations make use of so-called sub-generator in the master yeoman generator.
Does this work?
Right now it is possible to create your SharePoint project generator base on SPFx. I wrote one myself that I’d like to share with you, as mentioned before it supports two specific scenarios. During building this generator, I recognised some smaller issue I was able to solve. This issues should be covered and fixed in future releases of SPFx. The provided generator is just an early alpha prototype but offers a reliable solution already.
In future, some official guidance on how to create your custom SharePoint generator base on SPFx becomes available. For now, you can get familiar with the core concepts. In some upcoming articles, I will also explain more on the base ideas that will share more technical insights. A mentioned earlier this is currently work in process. For now stay tuned and please check out my Yeoman generator
Sharing is caring – Pattern and Practices for SharePoint and Office 365