https://github.com/guasam/react-webpack-typescript-2023
Minimal boilerplate for creating Web Applications using React, Webpack & TypeScript using best practices
https://github.com/guasam/react-webpack-typescript-2023
boilerplate eslint minimal react react-fast-refresh react-refresh rwt typescript webpack
Last synced: 5 months ago
JSON representation
Minimal boilerplate for creating Web Applications using React, Webpack & TypeScript using best practices
- Host: GitHub
- URL: https://github.com/guasam/react-webpack-typescript-2023
- Owner: guasam
- Created: 2021-04-23T01:58:32.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-07T10:46:22.000Z (almost 3 years ago)
- Last Synced: 2025-06-21T06:08:49.195Z (8 months ago)
- Topics: boilerplate, eslint, minimal, react, react-fast-refresh, react-refresh, rwt, typescript, webpack
- Language: TypeScript
- Homepage:
- Size: 386 KB
- Stars: 78
- Watchers: 1
- Forks: 37
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# 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](https://reactjs.org/), [Webpack](https://webpack.js.org/) & [TypeScript](https://www.typescriptlang.org/).
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 :
```bash
git clone https://github.com/codesbiome/react-webpack-typescript-2022
```
Install dependencies using Yarn or NPM or PNPM :
```bash
# 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 :
```bash
yarn start
```
## Lint : Development
To lint application source code using ESLint via this command :
```bash
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 :
```bash
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.
```bash
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 :
```bash
# 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](https://webpack.js.org/configuration/)