altophoto/react-webpack-boilerplate

Minimalistic ES6 React boilerplate with Hot Reloading using Webpack 3

ES6 React boilerplate using Webpack

Simple and optimized React boilerplate. It includes:

• React 15.6.1
• ECMAScript 6 and JSX support
• React Router v4
• Component testing using Enzyme
• Latest Webpack (v.3.5.1) and Webpack Dev Server (v.2.7.1) 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

Starting the dev server

Make sure you have Node.js installed.

1. git clone https://github.com/KleoPetroff/react-webpack-boilerplate.git
2. Run npm install or yarn install
3. Start the dev server using npm start
4. Open http://localhost:8080

Available Commands

• npm start - start the dev server
• npm clean - delete the dist folder
• npm run production - create a production ready build in dist folder
• npm run lint - execute an eslint check
• npm test - run all tests

Vendor Exporting

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.

Production code

Run npm run production. The production-ready code will be located under dist folder.

Licence

react-webpack-boilerplate is available under MIT.