Repository files navigation

Minimal webpack and react boilerplate using latest version of react and babel as well as jest and enzyme for more details about technologies used.clickwith real time server changes ;)

check outMedium article for more details

Project structure

Installation

Configuration

Technologies used

build/src/|- index.jsx _______________________________ # Application entry|- App.jsx _________________________________ # Application init|  |- Components/|    |- hello-world/|       |- index.jsx _______________________ # Sample componentwebpack|- paths.js ________________________________ # webpack paths needed|- webpack.common.js _______________________ # common webpack config|- webpack.dev.js __________________________ # development config|- webpack.prod.js _________________________ # production config

1- Clone the boilerplate repo

git clone git@github.com:HashemKhalifa/webpack-react-boilerplate.git

2-yarn ornpm install to install npm packages

3- start dev server usingyarn start ornpm start.

3- build and bundling your resources for productionyarn build.

4- Unit testing will watch all your changes in the test files as well as create coverage folder for you.yarn test

• Webpack Config paths based on your file structure you can go towebpack/paths.js and modify the source and file names based on your need.
• webpack/webpack.common.js config common webpack for both dev and production environments.
• webpack/webpack.dev.js config webpack for dev environment.
• webpack/webpack.prod.js config webpack for production environment.
• /webpack.config.js main webpack config that merge common and webpack environment based config.
• Enzyme config/setupTest.js here you will have all setup for enzyme to test your component.
• Prettier config/.prettierc.
• Browsers list config/.browserslistrc.

• Webpack 4
• Babel 7 [ transforming JSX and ES6,ES7,ES8 ]
• React16.8
• Lodash
• Jest [ Unit test]
• Enzyme for UI testing.
• Eslint with airbnb config
• Prettier [ Code formatter ]
• Style &CSS Loader &SASS-loader
• CSS modules [ Isolated style based on each component ]
• Browsers list [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]React Fast Refresh[For react hot module replacement]
• Webpack dev serve