- React
16.5.1
[ with optimizations 15x faster ] - React-Redux
- Webpack
4
- Prettier & Eslint [ code formatter & beautify ]
- Babel
- Pug (Optional)
- Bootstrap
4
(Optional) - SASS & SCSS Loader with css optimization (minify using cssnano)
- Automatic Browser Refresh (
Hot-reload
) on save - Automatic Syntax Formatter (
Eslint
) on save - Compression (
Gzip
andBrotli
) for faster load speed
- Clone the repo
git clone https://github.com/darknblack/react-webpack.git
npm install
to install npm packages.
- Start dev server using
npm start
ornpm run start
. - Build
npm run build
. - Build with (
Gzip
andBrotli
) compressionnpm run build:prod
.
- Unit testing will watch all your changes in the test files as well as create coverage folder for you.
npm run test
Root Directory/
|-- build/
|-- src/
| |-- index.jsx ______________________________________ # Application entry
| |-- template.html __________________________________ # Template
| |-- components/
| |-- body.jsx ___________________________________ # Sample component
| |-- reducer.js _________________________________ # React Reducer
| |-- css/
| |-- style.sass _________________________________ # Sample style (css,sass,scss)
| |-- images/
| |-- pug.svg ____________________________________ # Sample image (image file)
|
|-- config/
| |-- paths.js _______________________________________ # Paths config
| |-- webpack.config.js ______________________________ # Main webpack
| |-- webpack.common.js ______________________________ # Common webpack config
| |-- webpack.dev.js _________________________________ # Webpack development
| |-- webpack.prod.js ________________________________ # Webpack production
|
|-- setUpTests.js ______________________________________ # Jest-Enzyme config
config/paths.js
Paths config (You can change this according to your need)config/webpack.config.js
Main webpack config that merge common and webpack based environment.config/webpack.common.js
Webpack config for both environments.config/webpack.dev.js
Webpack config for devevelopment.config/webpack.prod.js
Webpack config for production./setupTest.js
Enzyme config