React template

This repository provides a modern React + TypeScript template for building Single Page Applications

It was created during my time working at a company as a replacement for Create React App in 2021

Node	Package manager

Installation

Tip

Highly recommend

PNPM as a package manager

NVM as a Node.js version manager

git clone repo_url
cd project_location
pnpm i

Scripts

Important

Development server use the 8080 port

http://localhost:8080/

Note

allJsTsExtensions = js, cjs, mjs, jsx, cjsx, mjsx, ts, cts, mts, tsx, ctsx, mtsx

For the more details check scripts section in package.json

Scripts table

Command	Description	Path
	Dev server
pnpm dev	dev-server in developer mode (hot reload)
pnpm prod	dev-server in production mode (build optimizations)
	Build application
pnpm clean	clean build folder	./build
pnpm buildapp	build application for deploy	./build
pnpm build	clean build folder & build application for deploy	./build
	Code linting & formatting
pnpm prettier	code format check	**/*.{allJsTsExtensions,pcss}
pnpm prettier:fix	code format autofix	**/*.{allJsTsExtensions,pcss}
pnpm lint	eslint check	**/*.{allJsTsExtensions}
pnpm lint:fix	eslint autofix	**/*.{allJsTsExtensions}
pnpm lint:fix-staged	eslint autofix	only on git staged files
pnpm lint:css	stylelint check	./src
pnpm lint:css:fix	stylelint autofix	./src
pnpm lint:css:fix-staged	stylelint autofix	only on git staged files
pnpm lint-all	prettier, eslint & stylelint check processes in order	see above
pnpm fix-all	prettier, eslint & stylelint autofix processes in order	see above
pnpm fix-staged	scripts from .lintstagedrc in autofix mode	only on git staged files
	Analyzation & config check
pnpm analyze	analyze webpack bundle
pnpm test:eslint-config	eslint config inspector, displays flat configs & rules
pnpm test:webpack-config	webpack config test
	Optimization
pnpm svgo $FILE_PATH	svgo on passed .svg file for optimization	$FILE_PATH
pnpm svgo-all	svgo on all .svg files in the project for optimization	./src
	Utility
pnpm prepare	runs automatically after installation, setup husky

Dependencies

Note

For the more details check dev & prod dependencies in package.json

Dependencies table

Package name	Description	Version
	Webpack
webpack	Application bundler	v5.102.*
webpack-cli	CLI for webpack	v5.1.*
webpack-dev-server	Development server	v6.0.*
webpack-bundle-analyzer	Application bundle analysis	v4.10.*
	Plugins
fork-ts-checker-webpack-plugin	Runs TypeScript type checker on a separate process	v9.1.*
html-webpack-plugin	Generate HTML5 output file entry path: ./public/index.html	v5.6.*
mini-css-extract-plugin	Create a CSS file per JS file which contains CSS	v2.9.*
copy-webpack-plugin	Copy files to the build directory entry path ./src/static	v13.0.*
dotenv-webpack	Support .env and other environment variables	v8.1.*
	Loaders
esbuild-loader	Faster alternatives for transpilation and minification with esbuild	v4.4.*
@svgr/webpack	Transform SVG's into React components	v8.1.*
style-loader	Inject CSS into the DOM	v4.0.*
css-loader	Interprets @import and url() like import/require() and will resolve them	v7.1.*
postcss-loader	Loader to process CSS with PostCSS	v8.2.*
	Typescript
typescript	TypeScript is JavaScript with syntax for types	v5.9.*
ts-node	TypeScript execution and REPL for node.js	v10.9.*
	React
react	Library for web and native user interfaces	v19.2.*
react-dom	React package for working with the DOM	v19.2.*
react-error-boundary	Reusable React error boundary component	v6.0.*
	CSS
tailwindcss	A utility-first CSS framework for rapidly building custom user interfaces	v4.1.*
postcss	Tool for transforming styles with JS plugins	v8.5.*
postcss-preset-env	Polyfills modern CSS based on .browserslistrc	v10.4.*
postcss-assets	Asset manager for CSS (archived)	v6.0.0
clsx	Utility for constructing className strings conditionally	v2.1.*
	Git hooks
husky	Automatically lint commit messages, code run tests upon committing or pushing, works with git hooks	v9.1.*
lint-staged	Run linters & formatters scripts on git staged files	v16.2.*
	Code linting & formatting
	Tools
eslint	Configurable JavaScript linter	v9.37.*
prettier	Opinionated code formatter	v3.6.*
stylelint	Mighty CSS linter that helps you avoid errors and enforce conventions	v16.25.*
	Configs
@alexey-koran/prettier-config	Prettier sharing configuration	v0.1*
@alexey-koran/eslint-config	ESLint shareable config	v0.4*
stylelint-config-clean-order	Order your styles with stylelint-order	v7.0.*
stylelint-config-standard	Standard shareable config for Stylelint	v39.0.*
	Plugins
@eslint/js	ESLint JavaScript plugin. Separating out JavaScript-specific functionality from ESLint	v9.37.*
@tailwindcss/postcss	PostCSS plugin for Tailwind CSS	v4.1.*
prettier-plugin-tailwindcss	Prettier plugin for Tailwind CSS that automatically sorts classes	v0.7.*
stylelint-prettier	Runs Prettier as a Stylelint rule and reports differences as individual Stylelint issues	v5.0.*
	Other
svgo	Node.js library and command-line application for optimizing SVG files	v4.0.*
cross-env	Run scripts that set and use environment variables across platforms	v10.1.0
@eslint/config-inspector	ESLint config inspector	v1.3.*
@alexey-koran/tsconfig	TSConfig sharing configuration	v0.1.*
	@types
@types/dotenv-webpack	type definitions for dotenv-webpack	v7.0.*
@types/html-webpack-plugin	type definitions for html-webpack-plugin	v3.2.*
@types/node	type definitions for node.js	v24.8.*
@types/react	type definitions for react	v19.2.*
@types/react-dom	type definitions for react-dom	v19.2.*
@types/webpack	type definitions for webpack	v5.28.*
@types/webpack-bundle-analyzer	type definitions for webpack-bundle-analyzer	v4.7.*