Webpack React Boilerplate

Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
Alternatives To Webpack React Boilerplate
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Javascript Testing Best Practices21,424
17 days ago59mitJavaScript
📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (December 2022)
Enzyme19,98351,43526,2413 months ago54December 20, 2019292mitJavaScript
JavaScript Testing utilities for React
Js Stack From Scratch19,396
7 months ago1January 19, 201748mitJavaScript
🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Front End Guide14,794
3 months ago1June 22, 201726mitJavaScript
📚 Study guide and introduction to the modern front end stack.
Tsdx10,7624358,2153 months ago56October 13, 2020225mitJavaScript
Zero-config CLI for TypeScript package development
React App Rewired9,4042,5329976 months ago75February 15, 202213mitJavaScript
Override create-react-app webpack configs without ejecting
2 years ago42mitTypeScript
⚡ Zero config GUI for Jest
Jest Cheat Sheet4,869
4 months agocc0-1.0
Jest cheat sheet
Pepperoni App Kit4,640
3 months ago4March 24, 201767mitJavaScript
Pepperoni - React Native App Starter Kit for Android and iOS
Create React App Typescript3,76914 years ago4January 25, 2018119JavaScript
DEPRECATED: Create React apps using typescript with no build configuration.
Alternatives To Webpack React Boilerplate
Select To Compare

Alternative Project Comparisons

Minimal React and Webpack 4 boilerplate with babel

dependencies dependencies

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

check out Medium article for more details

Real time change

Table of contents

Project structure



Technologies used

Project structure

|- index.jsx _______________________________ # Application entry
|- App.jsx _________________________________ # Application init
|  |- Components/
|    |- hello-world/
|       |- index.jsx _______________________ # Sample component

|- 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 [email protected]:HashemKhalifa/webpack-react-boilerplate.git

2- yarn or npm install to install npm packages

3- start dev server using yarn start or npm 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


  • 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 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.

Technologies used

Popular Reactjs Projects
Popular Jest Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Css Modules