generator-react-scaffolder/README.md

Scaffolding for new enterprise scale React applications on the fly.

# React Scaffolder

> Yeoman generator for scaffolding new React applications.

[![npm](https://img.shields.io/npm/v/generator-react-scaffolder.svg)](https://www.npmjs.com/package/generator-react-scaffolder)
[![generator](https://github.com/dzervoudakes/react-scaffolder/workflows/Generator/badge.svg)](https://github.com/dzervoudakes/react-scaffolder/actions)
[![typescript](https://github.com/dzervoudakes/react-scaffolder/workflows/TypeScript%20Template/badge.svg)](https://github.com/dzervoudakes/react-scaffolder/actions)
[![javascript](https://github.com/dzervoudakes/react-scaffolder/workflows/JavaScript%20Template/badge.svg)](https://github.com/dzervoudakes/react-scaffolder/actions)
[![codecov](https://codecov.io/gh/dzervoudakes/react-scaffolder/branch/main/graph/badge.svg)](https://codecov.io/gh/dzervoudakes/react-scaffolder)
[![quality](https://api.codacy.com/project/badge/Grade/fb10dc613e7f45e9970de8c61e33aee0)](https://app.codacy.com/gh/dzervoudakes/react-scaffolder?utm_source=github.com&utm_medium=referral&utm_content=dzervoudakes/react-scaffolder&utm_campaign=Badge_Grade)
[![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)
[![license](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/dzervoudakes/react-scaffolder/blob/main/LICENSE)

## 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](https://yeoman.io/) generator, and requires that `yo` be installed. After installing `yo`, run the following commands.

### Install the Generator

#### NPM

```sh
npm install -g generator-react-scaffolder
```

#### Yarn

```sh
yarn global add generator-react-scaffolder
```

### Scaffold a New React Template

To begin the scaffolding process:

```sh
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:

```sh
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:

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