React Webpack Typescript Boilerplate

• React (17.x)
• Webpack (5.x)
• Typescript (4.x)
• Hot Module Replacement (HMR) (React Hot Loader)
• Production build script (Webpack)
• Image loading/minification (Image Webpack Loader)
• Webpack configured to add Image import support (index.d.ts)
• Webpack configured to use environment variables (.env)
• SASS support
• Code linting (ESLint) and formatting (Prettier)
• Supports both JavaScript and TypeScript

Installation

1. Clone/download repo
2. yarn install (or npm install for npm)
3. yarn add packagename --dev (for installing packages in the dev dependency)

Usage

Development

yarn run start-dev

• Build app continuously (HMR enabled)
• App served @ http://localhost:8080

Production

yarn run start-prod

• Build app once (HMR disabled) to /build/
• App served @ http://localhost:3000

---

All commands

Command	Description
yarn run start-dev	Build app continuously (HMR enabled) and serve @ http://localhost:8080
yarn run start-prod	Build app once (HMR disabled) to /build/ and serve @ http://localhost:3000
yarn run build	Build app to /build/
yarn run lint	Run linter
yarn run lint --fix	Run linter and fix issues
yarn run start	(alias of yarn run start-dev)

Note: replace yarn with npm in package.json if you use npm.

Reference

• React Webpack Typescript Starter
• Create React App