React Webpack Typescript (RWT)
React Webpack Typescript Boilerplate with custom webpack configurations for hot reloading.
A minimal secure boilerplate for writing Web Applications using React, Webpack & TypeScript.
This project makes use of latest packages and configurations to serve the best environment for development.
Screenshot
Core Features
- โ๏ธ React
- ๐ TypeScript
- ๐ฅ SASS/SCSS Loader
- ๐ถ LESS Loader (optional)
- ๐จ CSS Loader
- ๐ธ Image Loader
- ๐ Font Loader
- ๐งน ESLint
- ๐ฑ Webpack & Configuration
- ๐งฉ Aliases for Project Paths
- ๐ฅ React Fast Refresh + Webpack HMR
- ๐ Dark Mode + Light Mode (Theme)
Installation
To install this boilerplate you need to run following commands
Clone the repository :
git clone https://github.com/codesbiome/react-webpack-typescript-2022
Install dependencies using Yarn or NPM or PNPM :
# using pnpm
pnpm install
# or using yarn
yarn install
# or using npm
npm install
Start : Development
To develop and run your web application, you need to run following command :
yarn start
Lint : Development
To lint application source code using ESLint via this command :
yarn lint
Build : Production
Distribution files output will be generated in dist/
directory by default.
To build the production ready files for distribution, use the following command :
yarn build
Serve : Production
Serve helps you serve a static site, single page application or just a static file. It also provides a neat interface for listing the directory's contents. This command serves build files from dist/
directory.
yarn serve
Webpack Configurations
To make it easier for managing environment based webpack configurations, we using separated development
and production
configuration files, they are available in :
# Development webpack config
tools/webpack/webpack.config.dev.js
# Production webpack config
tools/webpack/webpack.config.prod.js
For further information, you can visit Webpack Configuration