Minimal Webpack and React Starter boilerplate.. Seriously?!

Why new boilerplate?

It all begins when I was looking for a minimal react starter I’ve tried serval of react boilerplate but either they’re having a lot of dependencies or I have no control over what’s is working behind the scene. customized as minimal as it could be with using cutting-edge technology to be usable and scalable in the future.

For example:-

• It comes customized env-config for production and development environments.
• Webpack-serve a lean and modern webpack development server that use WebSockets.
• React-hotloader so you can change and modify your component without refresh or reload the page in real time change!
• last but not least CSS-Modules scoped CSS/SCSS locally for each component.

Real time change in react boilerplate!

• What is Webpack?!

Webpack is a tool that lets you compile JavaScript modules. It’s also known as a module bundler.. This is important to understand, as Webpack does not run during your page, it runs during your development.

Given a large number of files, it generates a single file (or a few files) that run your app.

It can perform many operations:

• helps you bundle your resources.
• watches for changes and re-runs the tasks.
• can run Babel transpilation to ES5, allowing you to use the latest JavaScript features without worrying about browser support.
• can convert inline images to data URIs.
• allows you to use require() for CSS files.
• can run a development webserver.
• can handle hot module replacement.
• can split the output files into multiple files to avoid having a huge JS file to load in the first page hit.
• can perform tree shaking.

Webpack is not limited to being used on the front-end, but is useful in backend Node.js development as well.

There are many predecessors of Webpack and lots of similarities in what those tools and Webpack do. The main difference is that those tools are known as task runners, while Webpack was born as a module bundler.

Why React?

React is component-based. So you should leverage this concept and not be afraid to split bigger pieces into smaller ones.

Installation

1- Clone the boilerplate repo

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

2- npm install or yarnto install npm packages

3- start dev server using yarn start

3- build and bundling your resources for production yarn build

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

Base structure

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

Used technologies.

• Webpack
• Babel 7 [ Transpile JSX,ES6,ES7,ES8]
• React
• Jest [ Unit test ]
• Enzyme [ Component test ]
• Eslint [ Using airbnb config ]
• Prettier [ Code formatter ]
• Style & CSS loader & SASS-loader
• CSS modules [ Isolated style based on each component ]
• React hot loader
• Webpack serve [ using web socket ]
• Browsers list [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]

Configuration

• Webpack Config paths based on your file structure you can go to webpack/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 merges 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 /.browserslistc` setup browser bundle compatibility

Conclusion

Tried to have minimal and elegant and modern boilerplate that match my needs as a front-end engineer who wants to understand what is going behind the scene.

Notice: I refactored this boilerplate multiple times to match my needs and to be easy to maintain and scale and will keep it update as much as I can. feedback is always welcome.