Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/esausilva/react-starter-boilerplate-hmr
React starter boilerplate with React Fast Refresh, React 17 and Webpack 5
https://github.com/esausilva/react-starter-boilerplate-hmr
babel7 boilerplate code-splitting css-modules fast-refresh react react-boilerplate react-fast-refresh react-router-v5 react17 semantic-ui semantic-ui-react webpack-bundle-analyzer webpack5
Last synced: 13 days ago
JSON representation
React starter boilerplate with React Fast Refresh, React 17 and Webpack 5
- Host: GitHub
- URL: https://github.com/esausilva/react-starter-boilerplate-hmr
- Owner: esausilva
- License: mit
- Created: 2017-05-18T17:07:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T17:26:28.000Z (over 1 year ago)
- Last Synced: 2024-10-15T02:22:17.541Z (29 days ago)
- Topics: babel7, boilerplate, code-splitting, css-modules, fast-refresh, react, react-boilerplate, react-fast-refresh, react-router-v5, react17, semantic-ui, semantic-ui-react, webpack-bundle-analyzer, webpack5
- Language: JavaScript
- Homepage: https://esausilva.com/2018/01/13/learn-webpack-for-react/
- Size: 1.87 MB
- Stars: 184
- Watchers: 5
- Forks: 81
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-starter-boilerplate-hmr
> React Starter Boilerplate with React Fast Refresh and Webpack 5
## Tutorial
**The tutorial on my blog site is the most up-to-date with this template.** Visit my [blog entry](https://esausilva.com/2018/01/13/learn-webpack-for-react/) where I go step-by-step on how to build this boilerplate from scratch.
## Features
- React 17
- React Fast Refresh
- React Router 5
- Webpack 5
- Semantic UI as the CSS Framework
- CSS Autoprefixer
- CSS Modules with SourceMap
- @babel/plugin-proposal-class-properties
- @babel/plugin-syntax-dynamic-import
- Code splitting by Route and Vendor
- [Webpack Bundle Analyzer](https://github.com/th0r/webpack-bundle-analyzer)
- Take a look at [package.json](https://github.com/esausilva/react-starter-boilerplate-hmr/blob/master/package.json)
### Usage
Install dependencies
```
$ yarn
```
Run development server
```
$ yarn dev
```
### Building
```
$ yarn build
```
Will create a `dist` directory containing your compiled code.
Depending on your needs, you might want to do more optimization to the production build.
## Webpack Bundle Analyzer
Run in development
```
$ yarn dev:bundleanalyzer
```
Run on the production oprimized build
```
$ yarn build:bundleanalyzer
```
## Giving Back
If you would like to support my work and the time I put into making tutorials, consider getting me a coffee by clicking on the image below. I would really appreciate it!
[](https://www.buymeacoffee.com/esausilva)
-Esau Silva