react_scaffold

A batteries-included but easy to modify TypeScript & React SPA development environment.

react_scaffold is similar to create-react-app and provides a starting point for new React applications. Some things included with react_scaffold, and some things we do differently than create-react-app:

• A working webpack configuration that can handle local development and dev + prod builds.
• jest and @testing-library/react configurations
• Full swc integration across testing, local development and builds for fast transpiling
• A docker container for the everything
• Easy access to the webpack configuration -- no need to eject, just maintain whatever you need to
  
  

TL;DR Within an optional Docker container react_scaffold gives you testing, a local development server and dev + prod builds for React SPAs with a fast and easy to access toolchain. If you want a working no-frills framework for a prototype or if you're starting a larger SPA and think you'll eventually need to eject from CRA, then react_scaffold might be a good choice.

---

What do you need?

You can run react_scaffold 2 ways:

With Docker (recommended)

• Docker
• Docker Compose

or with Node

If you have nvm installed, you can simply run nvm use in the root (see .nvmrc). Or install Node 16.17.0 manually.

---

Installing

If you're using Docker, run the following.

docker-compose up -d

This will create your Node.js container and mount a shared volume from the project root. See the docker-compose config for more details. This container is kept alive and should be used for all Node.js operations (but remember to kill it when you're done). Enter the container with

docker exec -it $CONTAINER_NAME /bin/bash

If you're not using Docker, make sure you have the correct Node version installed, or make sure you've ran nvm use.

When you're inside the container or using the correct Node version, run

npm install

and you're ready to develop.

---

Using

These 5 commands should get you started:

npm run webpack:dev

• Compiles for development environments.
  
  Hot Reloading | ❌ | Minifies | ❌ | Transpiles | ✅ | Prefixes CSS | ❌ |

npm run webpack:devServer

• Opens a dev-server on http://localhost:3000 with hot-reloading for development. Same output as webpack:dev and not at all suitable for production (seriously don't do this).
  
  Hot Reloading | ✅ | Minifies | ❌ | Transpiles | ✅ | Prefixes CSS | ❌ |

npm run webpack:prod

• Compiles everything for prod. All src/ code is split, bundled, given hashed filenames and injected into index.html. After this your dist directory is ready for deployment as is.
  
  Hot Reloading | ❌ | Minifies | ✅ | Transpiles | ✅ | Prefixes CSS | ✅ |
  
  

npm run jest

• Uses jest + @testing-library/react to run all tests in __tests__ directories.
  
  

npm run jest:watch

• Same as jest, but runs in watch mode.

---

Supports

Support for the following comes out of the box:

Styles:

• scss
• css

React / JavaScript:

• js
• ts
• jsx
• tsx

Images:

• png
• svg
• jpg
• jpeg
• gif

Fonts:

• woff
• woff2
• eot
• ttf
• otf