React Webpack 5 Template

That is a simple starter template for building a React App. It is deployed on Netlify, and you can view it here.

Features

• React 18
• Typescript
• Webpack 5 with Babel
• Hot Module Replacement and Hot Reload
• Image, CSS, and SASS Support
• Development and Production Build
• Testing with React-Testing-Library and Jest
• ESLint and Prettier Config
• Husky for GitHub commits and pushes

Requirements

• Node.js v16 or newer
• Yarn package manager
• VS Code editor

Getting Started

Generate a new project from this template, clone it, and install project dependencies.

git clone https://github.com/alexpeev9/React-Webpack-5-Template.git example
cd ./example
yarn install
yarn start

The app will become available at http://localhost:3000.

Scripts

• yarn start — Launches the app in development mode on http://localhost:3000.
• yarn build — Compiles and bundles the app for deployment.
• yarn test - Run unit tests with Jest, and React-Testing-Library.
• yarn lint:watch — Displays all bad-formatted code on the console.
• yarn lint:fix — Fixes all bad-formatted code.

Branches

There are five additional branches, and on each one of them, you can see the template with only specific features. Example:

• The 2-Add-Jest branch has Webpack and Jest.
• The 3-Add-ESLint branch has Webpack, Jest, and ESLint.

I advise you to use the main branch because it is the most optimized and supported.

Deploying

If you are deploying the app to sites like Netlify, Vercel, and others be sure to:

• Change the build command to npm run build because some sites don't work with yarn.
• Define the publish directory to build/.
• Set an environment variable NODE_ENV to production so that it doesn't install the dev-dependencies.