0.3.2

Update by @mjul: Don't rely Karma autoWatch being true in config

.eslintrc

@@ -23,6 +23,7 @@
     "no-unused-vars": 1,
     "no-trailing-spaces": [1, { "skipBlankLines": true }],
     "no-unreachable": 1,
-    "no-alert": 0
+    "no-alert": 0,
+    "react/jsx-uses-react": 1
   }
 }

.gitignore

@@ -25,3 +25,6 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+# Bower
+bower_components/

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - '4.1.0'
+before_install:
+  - currentfolder=${PWD##*/}
+  - if [ "$currentfolder" != 'react-webpack-template' ]; then cd .. && eval "mv $currentfolder react-webpack-template" && cd react-webpack-template; fi

CHANGELOG.md

@@ -0,0 +1,20 @@
+# react-webpack-template - Changelog
+
+## 0.3.1:
+___Upgrades___:
+1. Added bugfix for tests in watch mode (could be overridden by config)
+2. Added new badges to README
+3. Updated devDependencies to current ones
+
+## 0.3.0:
+___Upgrades___:
+1. Added webpacks define plugin for dist version
+2. Added new task ```test:watch``` to watch for changes
+
+## 0.2.0:
+___Upgrades:___
+1. Updated React from 0.13 to 0.14 (using ```^0.14```) as version string. This included minor code changes for components (now use the splitted "React"-Package) and the runner (Using React-DOM).
+2. Updated the shallow renderer for unit tests.
+
+___Backwards incompatible changes:___
+1. Default unit tests do not need to traverse down to `Component._store.props`, but directly to `Component.props`. Please keep this in mind when using properties in your tests.

README.md

@@ -1,27 +1,30 @@
 # Welcome to react-webpack-template
-This repository holds a base template for the new version of generator-react-webpack.
+> This repository holds the base template for the current version of [generator-react-webpack](https://github.com/newtriks/generator-react-webpack).
-It can be understood as the prototype for newly generated projects.
+It can also be used as the prototype for newly generated projects.
+
+[![Build Status](https://travis-ci.org/weblogixx/react-webpack-template.svg)](https://travis-ci.org/weblogixx/react-webpack-template) ![Amount of Downloads per month](https://img.shields.io/npm/dm/react-webpack-template.svg "Amount of Downloads") ![Dependency Tracker](https://img.shields.io/david/weblogixx/react-webpack-template.svg "Dependency Tracker") ![Dependency Tracker](https://img.shields.io/david/dev/weblogixx/react-webpack-template.svg "Dependency Tracker")
 
 ## Features
-The following features are planned to be included in the final version:
+The following features are currently included:
 
 - [x] Webpack and Webpack-Dev-Server, including hot-loader
 - [x] Babel and JSX
 - [x] Mocha Unit tests (*optional*)
-- [x] EsLint Support
+- [x] esLint Support
 - [x] No dependency on grunt, gulp or the next hot taskrunner!
+- [x] Support for environment-specific configuration files
+- [x] Support for code coverage via [isparta-loader](https://github.com/deepsweet/isparta-loader)
 
 ## Todo
 - [ ] Better performance for webpack builds
-- [ ] The dynamic webpack configuration is clunky, there must be a better way to do that!
-- [ ] Karmas webpack configuration is not included in the global webpack.config.js file, but it really should
 
 ## What is it for?
-This template can be used directly for the creation of new projects.
+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!
-Also it will be the "template" for the next version of generator-react-webpack.
+
+Basically, it is currently only used as the base template of [generator-react-webpack](https://github.com/newtriks/generator-react-webpack).
 
 ## Using it
-The template is available via webpack. The following commands are available:
+The template uses webpack as build tool to serve files and run tests. The following commands are available:
 ```bash
 # Start for development
 npm start # or
@@ -36,6 +39,9 @@ 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
 
@@ -59,9 +65,35 @@ webpack-dev-server --env=dev
 webpack --env=dist
 webpack-dev-server --env=dist
 ```
+## 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:
+
+```javascript
+/* 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:
+
+```javascript
+/* 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
-- Weblogixx (cs@weblogixx.de)
+- Christian Schilling (cs@weblogixx.de)
+- Martin Jul (martin@mjul.com)
+- Stephan Herzog (sthzgvie@gmail.com)

cfg/base.js

@@ -0,0 +1,69 @@
+var path = require('path');
+
+var port = 8000;
+var srcPath = path.join(__dirname, '/../src');
+var publicPath = '/assets/';
+
+module.exports = {
+  port: port,
+  debug: true,
+  output: {
+    path: path.join(__dirname, '/../dist/assets'),
+    filename: 'app.js',
+    publicPath: publicPath
+  },
+  devServer: {
+    contentBase: './src/',
+    historyApiFallback: true,
+    hot: true,
+    port: port,
+    publicPath: publicPath,
+    noInfo: false
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    alias: {
+      actions: srcPath + '/actions/',
+      components: srcPath + '/components/',
+      sources: srcPath + '/sources/',
+      stores: srcPath + '/stores/',
+      styles: srcPath + '/styles/',
+      config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
+    }
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        include: path.join(__dirname, 'src'),
+        loader: 'eslint-loader'
+      }
+    ],
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: 'style!css'
+      },
+      {
+        test: /\.sass/,
+        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
+      },
+      {
+        test: /\.scss/,
+        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+      },
+      {
+        test: /\.less/,
+        loader: 'style-loader!css-loader!less-loader'
+      },
+      {
+        test: /\.styl/,
+        loader: 'style-loader!css-loader!stylus-loader'
+      },
+      {
+        test: /\.(png|jpg|gif|woff|woff2)$/,
+        loader: 'url-loader?limit=8192'
+      }
+    ]
+  }
+};

cfg/dev.js

@@ -0,0 +1,34 @@
+var path = require('path');
+var webpack = require('webpack');
+var _ = require('lodash');
+
+var baseConfig = require('./base');
+
+// Add needed plugins here
+var BowerWebpackPlugin = require('bower-webpack-plugin');
+
+var config = _.merge({
+  entry: [
+    'webpack-dev-server/client?http://127.0.0.1:8000',
+    'webpack/hot/only-dev-server',
+    './src/components/run'
+  ],
+  cache: true,
+  devtool: 'eval',
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new BowerWebpackPlugin({
+      searchResolveModulesDirectories: false
+    })
+  ]
+}, baseConfig);
+
+// Add needed loaders
+config.module.loaders.push({
+  test: /\.(js|jsx)$/,
+  loader: 'react-hot!babel-loader',
+  include: path.join(__dirname, '/../src')
+});
+
+module.exports = config;

cfg/dist.js

@@ -0,0 +1,35 @@
+var path = require('path');
+var webpack = require('webpack');
+var _ = require('lodash');
+
+var baseConfig = require('./base');
+
+// Add needed plugins here
+var BowerWebpackPlugin = require('bower-webpack-plugin');
+
+var config = _.merge({
+  entry: path.join(__dirname, '../src/components/run'),
+  cache: false,
+  devtool: 'sourcemap',
+  plugins: [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"'
+    }),
+    new BowerWebpackPlugin({
+      searchResolveModulesDirectories: false
+    }),
+    new webpack.optimize.UglifyJsPlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.AggressiveMergingPlugin(),
+    new webpack.NoErrorsPlugin()
+  ]
+}, baseConfig);
+
+config.module.loaders.push({
+  test: /\.(js|jsx)$/,
+  loader: 'babel',
+  include: path.join(__dirname, '/../src')
+});
+
+module.exports = config;

cfg/test.js

@@ -0,0 +1,50 @@
+var path = require('path');
+var srcPath = path.join(__dirname, '/../src/');
+
+// Add needed plugins here
+var BowerWebpackPlugin = require('bower-webpack-plugin');
+
+module.exports = {
+  devtool: 'eval',
+  module: {
+    loaders: [
+      {
+        test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/,
+        loader: 'null-loader'
+      },
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        include: [
+          path.join(__dirname, '/../src'),
+          path.join(__dirname, '/../test')
+        ]
+      },
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        include: [
+          path.join(__dirname, '/../src')
+        ],
+        loader: 'isparta'
+      }
+    ]
+  },
+  resolve: {
+    extensions: [ '', '.js', '.jsx' ],
+    alias: {
+      actions: srcPath + 'actions/',
+      helpers: path.join(__dirname, '/../test/helpers'),
+      components: srcPath + 'components/',
+      sources: srcPath + 'sources/',
+      stores: srcPath + 'stores/',
+      styles: srcPath + 'styles/',
+      config: srcPath + 'config/' + process.env.REACT_WEBPACK_ENV
+    }
+  },
+  plugins: [
+    new BowerWebpackPlugin({
+      searchResolveModulesDirectories: false
+    })
+  ]
+};

karma.conf.js

@@ -1,59 +1,30 @@
-var path = require('path');
+var webpackCfg = require('./webpack.config');
-var srcPath = __dirname + '/src/';
 
 module.exports = function(config) {
   config.set({
     basePath: '',
-    browsers: ['PhantomJS'],
+    browsers: [ 'PhantomJS' ],
     files: [
       'test/loadtests.js'
     ],
     port: 8080,
     captureTimeout: 60000,
-    frameworks: ['phantomjs-shim', 'mocha', 'chai'],
+    frameworks: [ 'phantomjs-shim', 'mocha', 'chai' ],
     client: {
-      mocha: {
+      mocha: {}
-
-      }
     },
     singleRun: true,
-    reporters: ['mocha'],
+    reporters: [ 'mocha', 'coverage' ],
     preprocessors: {
-      'test/loadtests.js': ['webpack', 'sourcemap']
+      'test/loadtests.js': [ 'webpack', 'sourcemap' ]
-    },
-    webpack: {
-      cache: true,
-      devtool: 'eval',
-      module: {
-        loaders: [
-          {
-            test: /\.(css|png|jpg|gif|woff|woff2)$/,
-            loader: 'null-loader'
-          },
-          {
-            test: /\.(js|jsx)$/,
-            loader: 'babel-loader',
-            include: [
-              path.join(__dirname, 'src'),
-              path.join(__dirname, 'test')
-            ]
-          }
-        ]
-      },
-      resolve: {
-        extensions: ['', '.js', '.jsx'],
-        alias: {
-          actions: srcPath + '/actions/',
-          helpers: path.join(__dirname, 'test', 'helpers'),
-          components: srcPath + '/components/',
-          sources: srcPath + '/sources/',
-          stores: srcPath + '/stores/',
-          styles: srcPath + '/styles/'
-        }
-      }
     },
+    webpack: webpackCfg,
     webpackServer: {
       noInfo: true
+    },
+    coverageReporter: {
+      type: 'html',
+      dir: 'coverage/'
     }
   });
 };

package.json

@@ -1,18 +1,22 @@
 {
   "name": "react-webpack-template",
-  "version": "0.0.7",
+  "version": "0.3.2",
   "description": "A base skeleton template for react and webpack without task runners",
-  "main": "index.js",
+  "main": "server.js",
   "scripts": {
     "start": "node server.js --env=dev",
     "test": "karma start",
+    "test:watch": "karma start --autoWatch=true --singleRun=false",
     "posttest": "npm run lint",
     "serve": "node server.js --env=dev",
     "serve:dist": "node server.js --env=dist",
     "dist": "npm run copy & webpack --env=dist",
     "lint": "eslint ./src",
     "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
-    "clean": "rimraf dist/*"
+    "clean": "rimraf dist/*",
+    "release:major": "npm version major && npm publish && git push --follow-tags",
+    "release:minor": "npm version minor && npm publish && git push --follow-tags",
+    "release:patch": "npm version patch && npm publish && git push --follow-tags"
   },
   "repository": {
     "type": "git",
@@ -34,15 +38,19 @@
   "devDependencies": {
     "babel-core": "^5.8.22",
     "babel-loader": "^5.3.2",
+    "bower-webpack-plugin": "^0.1.9",
     "chai": "^3.2.0",
     "copyfiles": "^0.2.1",
-    "css-loader": "^0.16.0",
+    "css-loader": "^0.21.0",
     "eslint": "^1.2.1",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^3.3.0",
     "file-loader": "^0.8.4",
+    "glob": "^5.0.15",
+    "isparta-loader": "^1.0.0",
     "karma": "^0.13.9",
     "karma-chai": "^0.1.0",
+    "karma-coverage": "^0.5.3",
     "karma-mocha": "^0.2.0",
     "karma-mocha-reporter": "^1.1.1",
     "karma-phantomjs-launcher": "^0.2.1",
@@ -56,13 +64,16 @@
     "phantomjs": "^1.9.18",
     "react-hot-loader": "^1.2.9",
     "rimraf": "^2.4.3",
-    "style-loader": "^0.12.3",
+    "style-loader": "^0.13.0",
     "url-loader": "^0.5.6",
     "webpack": "^1.12.0",
-    "webpack-dev-server": "^1.10.1"
+    "webpack-dev-server": "^1.12.0"
   },
   "dependencies": {
+    "lodash": "^3.10.1",
     "normalize.css": "^3.0.3",
-    "react": "^0.13.3"
+    "react": "^0.14.0",
+    "react-addons-test-utils": "^0.14.0",
+    "react-dom": "^0.14.0"
   }
 }

src/components/Main.js

@@ -1,7 +1,7 @@
 require('normalize.css');
 require('styles/App.css');
 
-import React from 'react/addons';
+import React from 'react';
 
 let yeomanImage = require('../images/yeoman.png');
 

src/components/run.js

@@ -1,5 +1,6 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import App from './Main';
 
 // Render the main component into the dom
-React.render(<App />, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));

src/config/README.md

@@ -0,0 +1,17 @@
+# About this folder
+This folder holds configuration files for different environments.
+You can use it to provide your app with different settings based on the 
+current environment, e.g. to configure different API base urls depending on 
+whether your setup runs in dev mode or is built for distribution.
+You can include the configuration into your code like this:
+
+```javascript
+let react = require('react/addons');
+let config = require('config');
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    let currentAppEnv = config.appEnv;
+  }
+}
+```

src/config/dev.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const config = {
+  appEnv: 'dev'  // feel free to remove the appEnv property here
+};
+
+export default config;

src/config/dist.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const config = {
+  appEnv: 'dist'  // feel free to remove the appEnv property here
+};
+
+export default config;

src/config/test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const config = {
+  appEnv: 'test'  // don't remove the appEnv property here
+};
+
+export default config;

test/components/MainTest.js

@@ -18,10 +18,6 @@ describe('MainComponent', () => {
     });
 
     it('should have its component name as default className', () => {
-      expect(MainComponent._store.props.className).to.equal('index');
+      expect(MainComponent.props.className).to.equal('index');
-    });
-
-    it('should do something!', () => {
-      expect(true).to.be.true;
     });
 });

test/config/ConfigTest.js

@@ -0,0 +1,12 @@
+/*eslint-env node, mocha */
+/*global expect */
+/*eslint no-console: 0*/
+'use strict';
+
+import config from 'config';
+
+describe('appEnvConfigTests', () => {
+  it('should load app config file depending on current --env', () => {
+    expect(config.appEnv).to.equal('test');
+  });
+});

test/helpers/shallowRenderHelper.js

@@ -5,8 +5,8 @@
  * @see http://simonsmith.io/unit-testing-react-components-without-a-dom/
  * @author somonsmith
  */
-import React from 'react/addons';
+import React from 'react';
-const TestUtils = React.addons.TestUtils;
+import TestUtils from 'react-addons-test-utils';
 
 /**
  * Get the shallow rendered component

test/loadtests.js

@@ -1,2 +1,5 @@
-var testsContext = require.context('.', true, /(Test\.js$)|(Helper\.js$)/);
+'use strict';
+
+// Add support for all files in the test directory
+const testsContext = require.context('.', true, /(Test\.js$)|(Helper\.js$)/);
 testsContext.keys().forEach(testsContext);

webpack.config.js

@@ -1,100 +1,48 @@
-var webpack = require('webpack');
+'use strict';
-var args = require('minimist')(process.argv.slice(2));
+
 var path = require('path');
-var env = args.env || 'dev';
+var args = require('minimist')(process.argv.slice(2));
 
-var port = 8000;
+// List of allowed environments
-var srcPath = __dirname + '/src/';
+var allowedEnvs = ['dev', 'dist', 'test'];
-var publicPath = '/assets/';
 
-var config = {
+// Set the correct environment
-  port: port,
+var env;
-  debug: true,
+if(args._.length > 0 && args._.indexOf('start') !== -1) {
-  output: {
+  env = 'test';
-    path: path.join(__dirname, 'dist/assets'),
+} else if (args.env) {
-    filename: 'app.js',
+  env = args.env;
-    publicPath: publicPath
+} else {
-  },
+  env = 'dev';
-  devServer: {
+}
-    contentBase: './src/',
+process.env.REACT_WEBPACK_ENV = env;
-    historyApiFallback: true,
+
-    hot: true,
+// Get available configurations
-    port: port,
+var configs = {
-    publicPath: publicPath,
+  base: require(path.join(__dirname, 'cfg/base')),
-    noInfo: false
+  dev: require(path.join(__dirname, 'cfg/dev')),
-  },
+  dist: require(path.join(__dirname, 'cfg/dist')),
-  resolve: {
+  test: require(path.join(__dirname, 'cfg/test'))
-    extensions: ['', '.js', '.jsx'],
-    alias: {
-      actions: srcPath + '/actions/',
-      components: srcPath + '/components/',
-      sources: srcPath + '/sources/',
-      stores: srcPath + '/stores/',
-      styles: srcPath + '/styles/'
-    }
-  },
-  module: {
-    preLoaders: [
-      {
-        test: /\.(js|jsx)$/,
-        include: path.join(__dirname, 'src'),
-        loader: 'eslint-loader'
-      }
-    ],
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: 'style!css'
-      },
-      {
-        test: /\.(png|jpg|gif|woff|woff2)$/,
-        loader: 'url-loader?limit=8192'
-      }
-    ]
-  }
 };
 
-// Use config depending on environment
+/**
-switch(env) {
+ * Get an allowed environment
-  case 'dist':
+ * @param  {String}  env
-    config.entry = './src/components/run';
+ * @return {String}
-    config.cache = false;
+ */
-    config.devtool = 'sourcemap';
+function getValidEnv(env) {
-    config.plugins = [
+  var isValid = env && env.length > 0 && allowedEnvs.indexOf(env) !== -1;
-      new webpack.optimize.DedupePlugin(),
+  return isValid ? env : 'dev';
-      new webpack.optimize.UglifyJsPlugin(),
-      new webpack.optimize.OccurenceOrderPlugin(),
-      new webpack.optimize.AggressiveMergingPlugin(),
-      new webpack.NoErrorsPlugin()
-    ];
-
-    // Add needed loaders
-    config.module.loaders.push({
-      test: /\.(js|jsx)$/,
-      loader: 'babel',
-      include: path.join(__dirname, 'src')
-    });
-    break;
-
-  default:
-    config.entry = [
-      'webpack-dev-server/client?http://127.0.0.1:' + port,
-      'webpack/hot/only-dev-server',
-      './src/components/run'
-    ];
-    config.cache = true;
-    config.devtool = 'eval';
-    config.plugins = [
-      new webpack.HotModuleReplacementPlugin(),
-      new webpack.NoErrorsPlugin()
-    ];
-
-    // Add needed loaders
-    config.module.loaders.push({
-      test: /\.(js|jsx)$/,
-      loader: 'react-hot!babel-loader',
-      include: path.join(__dirname, 'src')
-    });
 }
 
-module.exports = config;
+/**
+ * Build the webpack configuration
+ * @param  {String} env Environment to use
+ * @return {Object} Webpack config
+ */
+function buildConfig(env) {
+  var usedEnv = getValidEnv(env);
+  return configs[usedEnv];
+}
+
+module.exports = buildConfig(env);