dzervoudakes / react-scaffolder

Scaffolding for new enterprise scale React applications on the fly.

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.

react-scaffolder's Issues

Future enhancement: Yarn Berry support

Wire up the scaffolder to support Yarn 2-3+ (Berry).

Upgrade: Node 16 Minimum Requirement

Require Node LTS 16 or greater.

this[method] is not a function

msomething@DESKTOP-K34VJ99:~/GitHub/mcc/generators$ npm install -g generator-react-scaffolder

added 108 packages, and audited 109 packages in 7s

12 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
msomething@DESKTOP-K34VJ99:~/GitHub/mcc/generators$ yo react-scaffolder --ts
? What is the name of the application? test
? Yarn? (Y/n) y
   create test/.DS_Store
   create test/.editorconfig
   create test/.eslintignore
   create test/.eslintrc.js
   create test/.lintstagedrc.js
   create test/.npmrc
   create test/.postcssrc.js
   create test/.prettierignore
   create test/.prettierrc.js
   create test/.stylelintignore
   create test/.stylelintrc.js
   create test/jest.config.js
   create test/tsconfig.json
   create test/typedoc.json
   create test/webpack.config.js
   create test/build/webpack.base.js
   create test/build/webpack.dev.js
   create test/build/webpack.prod.js
   create test/public/favicon.ico
   create test/scripts/build.ts
   create test/scripts/eslint.ts
   create test/scripts/stylelint.ts
   create test/scripts/test.ts
   create test/src/App.tsx
   create test/src/globals.d.ts
   create test/src/index.tsx
   create test/src/jest-dom.d.ts
   create test/src/polyfills.ts
   create test/src/__tests__/App.test.tsx
   create test/src/routes/Routes.tsx
   create test/src/routes/index.ts
   create test/src/scss/_constants.scss
   create test/src/scss/_default.scss
   create test/src/scss/style.scss
   create test/src/components/Footer/Footer.scss
   create test/src/components/Footer/Footer.tsx
   create test/src/components/Footer/index.ts
   create test/src/components/Header/Header.scss
   create test/src/components/Header/Header.tsx
   create test/src/components/Header/index.ts
   create test/src/components/Layout/Layout.scss
   create test/src/components/Layout/Layout.tsx
   create test/src/components/Layout/index.ts
   create test/src/components/SectionHeader/SectionHeader.scss
   create test/src/components/SectionHeader/SectionHeader.tsx
   create test/src/components/SectionHeader/index.ts
   create test/src/pages/Home/Home.tsx
   create test/src/pages/Home/index.ts
   create test/src/pages/Missing/Missing.tsx
   create test/src/pages/Missing/index.ts
   create test/src/routes/__tests__/Routes.test.tsx
   create test/src/components/Footer/__tests__/Footer.test.tsx
   create test/src/components/Header/__tests__/Header.test.tsx
   create test/src/components/Layout/__tests__/Layout.test.tsx
   create test/src/components/SectionHeader/__tests__/SectionHeader.test.tsx
   create test/src/pages/Home/__tests__/Home.test.tsx
   create test/src/pages/Missing/__tests__/Missing.test.tsx
   create test/.gitignore
   create test/package.json
   create test/README.md
   create test/public/index.html

Installing dependencies with yarn...

Error react-scaffolder --ts

this[method] is not a function