React Scaffolder

Yeoman generator for scaffolding new React applications.

A Homegrown React Template Generator

While tools like Create React App and Next.js are objectively awesome, over time I've decided that I want to learn more about the engine behind the application. As such, I started building and evolving my own React + Webpack configuration over time as a learning experience.

I have since decided to share this tool with the open source community. Love it or loathe it, I will not be happy or offended either way. 🤷‍♂️

Prerequisites

• Node version: While each template should still work with node ^14.6.0, moving forward the default version is >= 16.13.1.
• NPM users: Updates to each template moving forward will be focused on optimizing for npm >= 7.x, though it should remain backwards compatible with npm ^6.14.7.
• Yarn users: Current templates are optimized for yarn ^1.22.4, and no testing has been done for yarn >= 2.x as of yet.

Using the Generator

This scaffolding tool is a yeoman generator, and requires that yo be installed. After installing yo, run the following commands.

Install the Generator

NPM

npm install -g generator-react-scaffolder

Yarn

yarn global add generator-react-scaffolder

Scaffold a New React Template

To begin the scaffolding process:

yo react-scaffolder

At this stage, you will be prompted to provide the following:

• Application name, any text of your choosing
• Yarn, yes or no

With Options

Generate with TypeScript:

yo react-scaffolder --typescript

// alternatively
yo react-scaffolder --ts

The generator will attempt to install dependencies for you by default, though this operation can be disabled:

yo react-scaffolder --skip-install

What's Included

✅ Rendering: client-side only
✅ Syntax: react, js, jsx, ts, tsx
✅ Tooling: eslint, stylelint, editorconfig, babel (non-TypeScript template only)
✅ Styling: scss, css, postcss, css module syntax (*.module.scss and *.module.css nomenclature supported)
✅ Testing: jest, react testing library
✅ Build instructions: provided via the README.md file generated with each new scaffold

What's Not Included

❌ Script ejection: There are links to the default webpack config on github in each webpack.*.js file.
❌ Environment variables: The boilerplate is agnostic to your preferred implementation for consuming environment variables.

Disclaimers

• Internet Explorer: Quite frankly, if you are still supporting IE in the 2020s, you are wrong. The templates this tool will generate have not been tested in IE, and they never will be, so use at your own risk there.