Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hashemkhalifa/webpack-react-boilerplate
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
https://github.com/hashemkhalifa/webpack-react-boilerplate
babel css-modules enzyme eslint jest prettier react react-boilerplate react-hot-loader reactjs reactjs-with-es6 webpack-boilerplate webpack4 webpack4starter
Last synced: 1 day ago
JSON representation
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
- Host: GitHub
- URL: https://github.com/hashemkhalifa/webpack-react-boilerplate
- Owner: HashemKhalifa
- License: mit
- Created: 2018-03-12T10:35:44.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-25T15:05:17.000Z (3 months ago)
- Last Synced: 2024-10-29T17:27:44.819Z (about 2 months ago)
- Topics: babel, css-modules, enzyme, eslint, jest, prettier, react, react-boilerplate, react-hot-loader, reactjs, reactjs-with-es6, webpack-boilerplate, webpack4, webpack4starter
- Language: JavaScript
- Homepage: https://github.com/HashemKhalifa/webpack-react-boilerplate
- Size: 1.7 MB
- Stars: 396
- Watchers: 11
- Forks: 146
- Open Issues: 36
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## Minimal React and Webpack 4 boilerplate with babel
> 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](#technologies-used)
> with real time server changes ;)
> check out [Medium article](https://medium.com/@hashem.khalifa/minimal-webpack-and-react-starter-boilerplate-seriously-d90a673e134f) for more details
### Table of contents
[Project structure](#project-structure)
[Installation](#installation)
[Configuration](#configuration)
[Technologies used](#technologies-used)
### Project 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
```
### Installation
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`
### 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 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
- [Webpack 4](https://github.com/webpack/webpack)
- [Babel 7](https://github.com/babel/babel) [ transforming JSX and ES6,ES7,ES8 ]
- [React](https://github.com/facebook/react) `16.8`
- [Lodash](https://github.com/lodash/lodash)
- [Jest](https://github.com/facebook/jest) [ Unit test]
- [Enzyme](http://airbnb.io/enzyme/) for UI testing.
- [Eslint](https://github.com/eslint/eslint/) with airbnb config
- [Prettier](https://github.com/prettier/prettier) [ Code formatter ]
- [Style](https://github.com/webpack-contrib/style-loader) & [CSS Loader](https://github.com/webpack-contrib/css-loader) & [SASS-loader](https://github.com/webpack-contrib/sass-loader)
- [CSS modules](https://github.com/css-modules/css-modules) [ Isolated style based on each component ]
- [Browsers list](https://github.com/browserslist/browserslist) [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]
[React Fast Refresh](https://github.com/pmmmwh/react-refresh-webpack-plugin)[For react hot module replacement]
- [Webpack dev serve](https://github.com/webpack/webpack-dev-server)