codesbiome / react-webpack-typescript-2023

Minimal boilerplate for creating Web Applications using React, Webpack & TypeScript using best practices

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