react-template is a React + TypeScript boilerplate for building Single Page Applications, created in 2021 as a replacement for Create React App and currently tracking React 19.2, TypeScript 5.9, Webpack 5.102, and Tailwind CSS 4.1.
What is react-template?
react-template is a React + TypeScript boilerplate for building Single Page Applications. It provides a preconfigured Webpack 5 build with dev server, a Tailwind CSS 4 styling setup, and a complete linting and formatting pipeline using ESLint, Prettier, and Stylelint. The template is distributed as a public GitHub repository and uses pnpm as its recommended package manager, with committed configuration files for easy customization.
Key Features
react-template bundles the tooling and configuration expected in a modern React SPA, so you can skip the manual setup and focus on code. The most useful specifics are:
- React 19 and TypeScript 5.9 — The template ships with react and react-dom at version 19.2, plus @types/react and @types/react-dom type definitions, and uses a shared TypeScript config from @alexey-koran/tsconfig.
- Webpack 5 bundling — Webpack 5.102, webpack-cli 5.1, and webpack-dev-server 6.0 handle development and production builds; esbuild-loader speeds up transpilation and minification, and fork-ts-checker-webpack-plugin runs the TypeScript type checker in a separate process.
- Tailwind CSS 4 — Tailwind CSS 4.1 is configured through @tailwindcss/postcss, along with postcss-preset-env for modern CSS polyfills and postcss-assets for asset management. prettier-plugin-tailwindcss automatically sorts utility classes.
- Linting and formatting — ESLint 9.37 uses the shareable config @alexey-koran/eslint-config, Prettier 3.6 uses @alexey-koran/prettier-config, and Stylelint 16.25 uses stylelint-config-standard plus stylelint-config-clean-order; scripts like lint-all and fix-all run all three in sequence.
- Git hooks — Husky 9.1 triggers automated linting and commit checks on git commit/push, while lint-staged 16.2 runs configured scripts only on staged files through the lint-stagedrc.
- Environment variables — dotenv-webpack 8.1 loads .env files and other environment variables without extra configuration.
- SVG as React components — @svgr/webpack transforms imported SVGs into React components, and svgo 4.0 optimizes .svg files individually or across the src directory with svgo-all.
- Production builds — pnpm build cleans and builds the application into ./build, and webpack-bundle-analyzer via pnpm analyze reports bundle contents.
Who is it for?
- Front-end developers setting up a new React SPA with TypeScript and Tailwind CSS without writing Webpack and ESLint configuration from scratch.
- Teams migrating away from Create React App — the template was created in 2021 specifically as a replacement for CRA, so teams leaving CRA can adopt a similar structure with modern tooling.
- Developers using pnpm — the README recommends pnpm 10.17.0 and Node 24.9.0, and all scripts are written with pnpm in mind.
What can you do with react-template?
With react-template you can go from an empty repo to a running SPA and enforce code quality with the included tooling. Common tasks include:
- Build a single-page application: Start with the template and add your components, using React 19, Tailwind CSS utility classes, and SVG imports as components, then build for production with pnpm build.
- Run a dev server: Use pnpm dev for hot reload in development mode, or pnpm prod to run the dev server with production build optimizations; both use port 8080.
- Automate code quality: Run pnpm lint-all to check Prettier, ESLint, and Stylelint in order, or pnpm fix-all to auto-fix issues, with staging-only variants for git workflows.
How does react-template work?
Installation and development follow three steps visible in the README:
- Clone the repository and navigate into the project folder.
- Run pnpm i to install dependencies.
- Run pnpm dev and open http://localhost:8080/ to use the hot-reloading dev server.
The README recommends pnpm as the package manager and NVM to manage the required Node version.
FAQ
What Node.js version do I need?
The template lists minimum Node 22.20.0, recommended Node 24.9.0, minimum npm 10.9.3, and recommended pnpm 10.17.0. The README recommends using NVM for Node version management.
Does react-template use Tailwind CSS?
Yes, Tailwind CSS 4.1 is included with the @tailwindcss/postcss plugin, and prettier-plugin-tailwindcss is configured to sort classes automatically.
How do I build the application for deployment?
Run pnpm build, which cleans the ./build folder and then builds the application into ./build. You can also run pnpm buildapp to build without the clean step.
What port does the dev server use?
The dev server runs on http://localhost:8080/ in both dev and prod modes. If the port is in use, you would need to adjust the Webpack dev server configuration.
Is this template free to use?
The repository is public on GitHub with a Contributor Covenant code of conduct, suggesting it is open source; no license or pricing information is displayed in the README.
