Simple and optimized React boilerplate. It includes:
- React 15.6.1
- ECMAScript 6 and JSX support
- React Router v4
- Component testing using Enzyme and Jest
- Code Coverage
- Latest Webpack (v.3.6.0) and Webpack Dev Server (v.2.8.2) with Scope Hoisting enabled
- Hot Module Replacement using react-hot-loader
- ES6 linting with continuous linting on file change
- SASS support
- Separate CSS stylesheets generation
- Automatic HTML generation
- Production Config
- Custom Babel Preset with Decorators, Class Properties, Rest/Spread operator support
- Export Separate Vendor Files
- Redux
Make sure you have Node.js installed.
git clone https://github.com/KleoPetroff/react-webpack-boilerplate.git
- Run
npm install
oryarn install
- Start the dev server using
npm start
- Open http://localhost:8080
npm start
- start the dev servernpm clean
- delete the dist foldernpm run production
- create a production ready build indist
foldernpm run lint
- execute an eslint checknpm test
- run all testsnpm run test:watch
- run all tests in watch modenpm run coverage
- generate code coverage report in thecoverage
folder
You can export specific vendors in separate files and load them. All vendors should be included in app/vendors
and will be exported in a vendors
folder under dist
. The main idea is to serve independent JavaScript and CSS libraries, though currently all file formats are supported.
! Don't forget to add the vendors in app/index.html
and build/index.html
.
The project is using the Jest Code Coverage tool. The reports are generated by running npm run coverage
. All configurations are located in package.json
, inside the jest
object.
The coverage report consists of an HTML reporter, which can be viewed in the browser and some helper coverage files like the coverage json and xml file.
Run npm run production
. The production-ready code will be located under dist
folder.
react-webpack-boilerplate is available under MIT.