React + TypeScript + Webpack Project Template

A React project template configured for TypeScript development and bundled with Webpack.

React | TypeScript | Webpack

⚡️ Quick Start

Ensure Node.js is installed. Version 10.13.0 (LTS) or higher is required.

Recommended: Use a Node version manager like nvm.

Dependency installation is managed via npm. Once cloned, you can install dependencies from the project root:

npm install

Once dependencies are installed, you can run the React local development server on port 8080:

npm start

To test components, you can run all Jest suites:

npm test

And boom! You're ready to create a new React application with TypeScript! 🎉

🙋🏽 Why?

While Create React App is a great way to jump start a simple project, it unfortunately abstracts away most of the configuration. This makes it difficult to understand React project configuration for quick customization or required packages for dependency management.

🧱 How?

This React template was created from scratch using the bare minimum package dependencies needed to run a React + TypeScript project that is bundled with Webpack and tested with Jest.

Review the pull request history to see which files were created/edited for each step of the configuration process.

1. Initialize Project
2. Setup TypeScript
3. Setup React
4. Setup Jest
5. Setup Webpack
6. (Optional) Setup Tailwind CSS

You can also find more detailed steps in the How to Setup a React App with TypeScript + Webpack from Scratch post on DEV.

⚛️ What?

This project template only uses the dependencies and configurations needed to:

• Create a React Web Application
• Develop React Components using TypeScript (using .tsx files)
• Test React Components using Jest
• Bundle a React Web Application for Production
• Serve a React Web Application locally with automatic reloads on save
• (Optional) Build custom design systems using Tailwind CSS utility classes

The final state is a React app equivalent to the starting point of Create React App.

🛠 Tooling

• React: An open source JavaScript library for building UIs
  • react: Core React library
  • @types/react: Type definitions for React
  • react-dom: Renders React to DOM
  • @types/react-dom: Type definitions for ReactDOM
• TypeScript: A strongly typed language built on top of JavaScript.
  • typescript: Core TypeScript programming language
  • ts-node: TypeScript execution engine for Node.js
  • @types/node: Type definitions for Node.js
• Jest: A JavaScript testing framework
  • jest: Core Jest library
  • @types/jest: TypeScript definitions for jest
  • ts-jest: A Jest transformer for TypeScript
  • jest-environment-jsdom: Simulates a DOM environment during jest tests (See: Jest DOM Manipulation Guide)
  • @testing-library/jest-dom: Jest matchers (e.g. toHaveClass, toBeChecked) to test the state of the DOM
  • @testing-library/react: React DOM testing utilities (e.g. .queryByText, .getByRole)
• webpack: An extensible static module bundler for JavaScript applications.
  • webpack: Core webpack bundler
  • webpack-cli: CLI tooling for webpack (required for npm scripts that call webpack)
  • webpack-dev-server: Development server with live reloading
  • Loaders
    • ts-loader: Loads TypeScript files when bundling
    • css-loader: Interprets and resolves @import and url() in CSS files when bundling
    • style-loader: Injects CSS into the DOM when bundling
    • (Optional) postcss-loader: Processes CSS with PostCSS
  • Plugins
    • html-webpack-plugin: Generates HTML files when bundling
    • copy-webpack-plugin: Copies files to output directory when bundling
    • webpack-merge: Merges webpack configurations (used for copying common configurations for multiple environments)
• (Optional) Tailwind CSS: A CSS framework with pre-built utility styling classes (e.g. text-center)
  • tailwindcss: Core Tailwind CSS framework
  • @types/tailwindcss: TypeScript definitions for tailwindcss
• (Optional) PostCSS: A CSS transformer for JavaScript
  • postcss: Core PostCSS tool
  • Plugins
    • autoprefixer: Adds vendor prefixes to CSS rules

📜 Development Scripts

Initial development scripts are available to local development and testing. You can find these in the scripts attribute in package.json.

Command	Description
npm install	Install all dependent application packages
npm start	Start a local development web server at http://localhost:8080 using webpack-dev-server
npm test	Run the full test suite using Jest
npm run build	Bundle application for Production using webpack
npm run test:watch	Watch files for changes and rerun tests related to changed files
npm run test:coverage	Generate and display a test coverage report

🪪 License

This project template is MIT licensed.