react-webpack-template

Welcome to react-webpack-template

This repository holds the base template for the current version of generator-react-webpack. It can also be used as the prototype for newly generated projects.

Features

The following features are currently included:

• Webpack and Webpack-Dev-Server, including hot-loader
• Babel and JSX
• Mocha Unit tests
• esLint Support
• No dependency on grunt, gulp or the next hot taskrunner!
• Support for environment-specific configuration files
• Support for code coverage via isparta-loader

What is it for?

This template can be used directly for the creation of new projects. When using it like this, make sure to not install it via npm but download it directly. The template is (nearly) useless for itself when downloaded via npm!

Basically, it is currently only used as the base template of generator-react-webpack.

Using it

The template uses webpack as build tool to serve files and run tests. The following commands are available:

# Start for development 
npm start # or 
npm run serve
 
# Start the dev-server with the dist version 
npm run serve:dist
 
# Just build the dist version and copy static files 
npm run dist
 
# Run unit tests 
npm test
 
# Run the unit tests continuously (repeat the test when code changes are saved) 
npm run test:watch
 
# Lint all files in src (also automatically done AFTER tests are run) 
npm run lint
 
# Clean up the dist directory 
npm run clean
 
# Just copy the static assets 
npm run copy

You can also use your globally installed version of webpack like this:

# Build or run the dev version: 
webpack
webpack --env=dev
 
webpack-dev-server
webpack-dev-server --env=dev
 
# Build or run the dist version 
webpack --env=dist
webpack-dev-server --env=dist

Including third party modules (e.g. from npm)

The default setting for the webpack configuration is to only include the src and test directories. If you want to add any modules from npm, you have to add them in cfg/base.js. One example is:

// Somewhere on top of the file:
let npmBase = path.join(__dirname, '../node_modules');
let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ];

All entries added to the additionalPaths array will be appended to the include path for babel.

A note on unit testing

When running tests, coverage information (provided via Istanbul) will also be written into the coverage/ directory. If you do not need this, just comment out or remove the section in karma.conf like this:

/* do not use coverage reporting!
coverageReporter: {
  type: 'html',
  dir: 'coverage/'
}*/

Also, you should adjust your webpack test configuration (located in cfg/test.js) to reflect this:

/* Uncomment this to prevent loading via isparta
{
  test: /\.(js|jsx)$/,
  loader: 'babel-loader',
  include: [
    path.join(__dirname, '/../src')
  ],
  loader: 'isparta'
}*/

License

react-webpack-template is available under MIT-License and can therefore be used in any project free of charge.

Contributors

• Christian Schilling ([e-mail])
• Martin Jul ([e-mail])
• Stephan Herzog ([e-mail])
• Kashif Iqbal Khan
• Ignat Shining ([e-mail])