A truly minimal most updated React 18, typescript boilerplate using webpack 5. Best suited for the projects where you want minimum bundle size and more control on webpack, typescript, eslint configurations, so that react project can be started with custom configurations without any much efforts from day one.
This template covers all aspects of react application development without any efforts.
- Development - React 18, Typescript
- Package bundling - Webpack 5
- Code quality - Eslint
Clone repository
// Using SSH
git clone [email protected]:anuj-webdev/minimal-react-typescript-boilerplate.git
// Using HTTPS
git clone https://github.com/anuj-webdev/minimal-react-typescript-boilerplate.git
run npm install.
cd minimal-react-typescript-boilerplate
npm install
Run development webpack server, using npm start
npm start
Development webpack server starts on port 3000. To change port, update port number in webpack.dev.js config file.
To generate production build, run
npm run build
To check linting issues in project, run
npm run lint
To fix the lint issues in project, run
npm run lint:fix
To check formatting issue in project, run
npm run pretty
To fix the formatting issues in project, run
npm run pretty:fix
- typescript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
- @types/react - Type definitions for React
- @types/react-dom - Type definitions for React-DOM
- webpack - Module and asset bundler.
- webpack-cli - Command line interface for webpack
- webpack-dev-server - Development server for webpack
- webpack-merge - Merge development/production configuration to common configuration.
- css-loader - Resolve CSS imports
- ts-loader - TypeScript loader for webpack, Resolve TypeScript
- url-loader - Loader for webpack which transforms files into base64 URIs.
- eslint - Find and fix problems in your JavaScript code using eslint.
- @typescript-eslint/eslint-plugin - Provide tooling which enables eslint to support typescript.
- @typescript-eslint/parser - An ESLint parser which enables ESLint to lint TypeScript source code.
- Prettier - An opinionated code formatter
- eslint-config-prettier - To turns off all rules that are unnecessary/conflicting with Prettier.
- Jest - JavaScript testing framework to run tests.
- @types/jest - Type definition support for jest.
- @babel/core - Babel compiler core
- @babel/preset-env - To support latest JavaScript features.
- @babel/preset-typescript - Jest plugin to use babel for typescript transformation.
- babel-jest - Jest plugin to use babel for transformation.
- Anuj Sharma
- This project is open source and available under the MIT License.