Build a killer starter template: Using yeoman to create your custom SPFx generator Rodrigo Silva SharePoint / Office 365 Developer & Technical Architect @Spinex Solutions Ltd.

Rodrigo Silva SharePoint Developer and Technical Architect @RodResendeSilva Rodrigo Resende Silva https://rodcoder.blogspot RodCoder

How many times did you find yourself copying the same code across solutions and performing the same manual actions?

Examples of repetitive tasks… Create data providers (Office graph, SharePoint, ...) Create interfaces (Document, People, ...) Implement utility methods Copy previously developed webparts across Extend gulp (sp sync, version sync, …)

Examples of repetitive tasks… Add tslint.json file to the project’s root folder Install PnP.js npm packages Install PnP React Controls npm packages Install PnP Property Controls npm packages

“There’s gotta be a better way! …Right?”

Writing your own generator: Generators are the building blocks of the Yeoman ecosystem. They're the plugins run by yo to generate files for end users. We can create and distribute our own generator to: Initialize the SPFx generator as parent generator using composability Prompting the user and gather the information to install optional components Modify configuration files in the project folder (config.json, gulpfile.js) Copy files to the project folder (models, services, utilities and webparts) Install additional NPM packages

Writing your own generator: Yeoman generators have a specific call order of functions defined. The run loop: initializing() – Your initialization methods prompting() – Where you prompt users for options configuring() – Saving configurations and configure the project writing() – Where you write the generator specific files install() – Where installations are run end() – Called last, cleanup, say good bye

Demo Create your first generator Move files into the templates folder Initialize SPFx generator Prompt user to install additional webparts Apply custom configuration Copy files into the project folder Install NPM packages

Resources Writing your own Yeoman generator http://yeoman.io/authoring/index.html Custom SPFx generator: Make Yarn your default package manager https://n8d.at/blog/custom-spfx-generator-make-yarn-your-default- package-manager/

Thank you! Questions? Rodrigo Silva @RodResendeSilva Rodrigo Resende Silva RodCoder Rodrigo Silva SharePoint / Office 365 Developer & Technical Architect @Spinex Solutions Ltd.