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

2. Rodrigo Silva SharePoint Developer and Technical Architect
@RodResendeSilva
Rodrigo Resende Silva
RodCoder

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

4. 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, …)

5. 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

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

7. 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

8. 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

9. 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

10. Resources
Writing your own Yeoman generator
Custom SPFx generator: Make Yarn your default package manager package-manager/

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