generator-react-scaffolder
v2.3.3
Published
Scaffolding for new enterprise scale React applications on the fly.
Downloads
36
Maintainers
Readme
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 withnpm ^6.14.7
. - Yarn users: Current templates are optimized for
yarn ^1.22.4
, and no testing has been done foryarn >= 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.