1.5.2

PhantomJS Promise support

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}

.eslintrc

@@ -1,16 +1,21 @@
 {
+  "parser": "babel-eslint",
   "plugins": [
     "react"
   ],
-  "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
   },
   "env": {
     "browser": true,
     "amd": true,
     "es6": true,
-    "node": true
+    "node": true,
+    "mocha": true
   },
   "rules": {
     "comma-dangle": 1,
@@ -23,6 +28,8 @@
     "no-unused-vars": 1,
     "no-trailing-spaces": [1, { "skipBlankLines": true }],
     "no-unreachable": 1,
-    "no-alert": 0
+    "no-alert": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 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,99 @@
+# react-webpack-template - Changelog
+
+## 1.5.2:
+
+1. Updated dependencies to latests (babel-eslint, eslint, karma-mocha-reporter, normalize.css)
+
+## 1.5.1:
+
+1. Emergency fix for corruct eslint version (2.3 is currently buggy). Fixes https://github.com/newtriks/generator-react-webpack/issues/196
+2. Added mocha to eslint global config as requested in https://github.com/newtriks/generator-react-webpack/issues/195
+
+## 1.5.0:
+
+1. Added babel polyfill to tests per default (provided by [Igonato](https://github.com/Igonato))
+2. Updated eslint to version 2.0
+3. Updated glob package to version 7.0
+
+## 1.4.0:
+
+1. Refactored webpack config to use Object.assign instead of lodash
+2. Added dynamic port for webpack dev server (provided by [kashiif](https://github.com/kashiif))
+
+## 1.3.1:
+
+1. Removed karma-phantomjs-shim (with PhantomJS 2 there is no need for shims anymore)
+
+## 1.3.0:
+
+1. Updated phantomjs to 2.0
+
+## 1.2.1:
+
+1. Updated lodash to latest stable version
+2. Cleaned up formatting of unittests
+
+## 1.2.0:
+
+1. Updated core-js to new 2.0 stable
+2. Moved lodash and react-addons-testutils to devDependencies (provided by [harunhasdal](https://github.com/harunhasdal))
+3. Moved run component from ```src/components/run.js``` to ```src/index.js``` (provided by [stylesuxx](https://github.com/stylesuxx))
+
+## 1.1.0:
+
+1. Added support for easier webpack include management (can now be set via cfg/base.js, see README.md)
+
+## 1.0.3:
+
+1. Support for config independent settings in ```src/config/base.js``` (provided by [sthzg](https://github.com/sthzg))
+2. Fixed eslint loader path (provided by [HelloYie](https://github.com/HelloYie))
+3. Added support for babel-eslint (as suggested in https://github.com/newtriks/generator-react-webpack/issues/173)
+
+## 1.0.2:
+
+1. Added babel-eslint (as suggested in https://github.com/newtriks/generator-react-webpack/issues/173)
+
+## 1.0.2:
+
+1. Updated css-loader to current stable (0.23)
+2. Updated glob to new major (5.x to 6.x)
+
+## 1.0.1:
+___Upgrades___:
+
+1. Updated isparta-instrumenter-loader to new version 1.0
+
+## 1.0.0:
+___Upgrades___:
+
+1. Updated to babel core version (6.0.x)
+2. Replaced isparta-loader with the more current (and better maintained) isparta-instrumenter-loader.
+
+## 0.3.2:
+___Features___:
+
+1. Added support for bower components in webpack
+2. Added coverage reporting via karma-coverage
+
+## 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.

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Chris
+Copyright (c) 2015 Christian Schilling <cs@weblogixx.de>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

README.md

@@ -1,27 +1,28 @@
 # Welcome to react-webpack-template
-This repository holds a base template for the new version of generator-react-webpack.
-It can be understood as the prototype for newly generated projects.
+> This repository holds the base template for the current version of [generator-react-webpack](https://github.com/newtriks/generator-react-webpack).
+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] Mocha Unit tests
+- [x] esLint Support
 - [x] No dependency on grunt, gulp or the next hot taskrunner!
-- [x] The dynamic webpack configuration is clunky, there must be a better way to do that!
-- [x] Karmas webpack configuration is not included in the global webpack.config.js file, but it really should
-
-## Todo
-- [ ] Better performance for webpack builds
+- [x] Support for environment-specific configuration files
+- [x] Support for code coverage via [isparta-loader](https://github.com/deepsweet/isparta-loader)
 
 ## What is it for?
-This template can be used directly for the creation of new projects.
-Also it will be the "template" for the next version of generator-react-webpack.
+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](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 +37,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
 
@@ -47,6 +51,7 @@ npm run copy
 ```
 
 You can also use your globally installed version of webpack like this:
+
 ```bash
 # Build or run the dev version:
 webpack
@@ -60,8 +65,48 @@ 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:
+
+```javascript
+// 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:
+
+```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)
+- Kashif Iqbal Khan
+- Ignat Shining (mail@igonato.com)

cfg/base.js

@@ -1,68 +1,42 @@
-var path = require('path');
+'use strict';
+let path = require('path');
+let defaultSettings = require('./defaults');
 
-var port = 8000;
-var srcPath = path.join(__dirname, '/../src');
-var publicPath = '/assets/';
+// Additional npm or bower modules to include in builds
+// Add all foreign plugins you may need into this array
+// @example:
+// let npmBase = path.join(__dirname, '../node_modules');
+// let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ];
+let additionalPaths = [];
 
 module.exports = {
-  port: port,
+  additionalPaths: additionalPaths,
+  port: defaultSettings.port,
   debug: true,
+  devtool: 'eval',
   output: {
     path: path.join(__dirname, '/../dist/assets'),
     filename: 'app.js',
-    publicPath: publicPath
+    publicPath: defaultSettings.publicPath
   },
   devServer: {
     contentBase: './src/',
     historyApiFallback: true,
     hot: true,
-    port: port,
-    publicPath: publicPath,
+    port: defaultSettings.port,
+    publicPath: defaultSettings.publicPath,
     noInfo: false
   },
   resolve: {
     extensions: ['', '.js', '.jsx'],
     alias: {
-      actions: srcPath + '/actions/',
-      components: srcPath + '/components/',
-      sources: srcPath + '/sources/',
-      stores: srcPath + '/stores/',
-      styles: srcPath + '/styles/'
+      actions: `${defaultSettings.srcPath}/actions/`,
+      components: `${defaultSettings.srcPath}/components/`,
+      sources: `${defaultSettings.srcPath}/sources/`,
+      stores: `${defaultSettings.srcPath}/stores/`,
+      styles: `${defaultSettings.srcPath}/styles/`,
+      config: `${defaultSettings.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'
-      }
-    ]
-  }
+  module: {}
 };

cfg/defaults.js

@@ -0,0 +1,60 @@
+/**
+ * Function that returns default values.
+ * Used because Object.assign does a shallow instead of a deep copy.
+ * Using [].push will add to the base array, so a require will alter
+ * the base array output.
+ */
+'use strict';
+
+const path = require('path');
+const srcPath = path.join(__dirname, '/../src');
+const dfltPort = 8000;
+
+/**
+ * Get the default modules object for webpack
+ * @return {Object}
+ */
+function getDefaultModules() {
+  return {
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        include: srcPath,
+        loader: 'eslint-loader'
+      }
+    ],
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
+      },
+      {
+        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'
+      }
+    ]
+  };
+}
+
+module.exports = {
+  srcPath: srcPath,
+  publicPath: '/assets/',
+  port: dfltPort,
+  getDefaultModules: getDefaultModules
+};

cfg/dev.js

@@ -1,28 +1,39 @@
-var path = require('path');
-var webpack = require('webpack');
-var _ = require('lodash');
+'use strict';
 
-var baseConfig = require('./base');
+let path = require('path');
+let webpack = require('webpack');
+let baseConfig = require('./base');
+let defaultSettings = require('./defaults');
 
-var config = _.merge({
+// Add needed plugins here
+let BowerWebpackPlugin = require('bower-webpack-plugin');
+
+let config = Object.assign({}, baseConfig, {
   entry: [
-    'webpack-dev-server/client?http://127.0.0.1:8000',
+    'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
     'webpack/hot/only-dev-server',
-    './src/components/run'
+    './src/index'
   ],
   cache: true,
-  devtool: 'eval',
+  devtool: 'eval-source-map',
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin()
-  ]
-}, baseConfig);
+    new webpack.NoErrorsPlugin(),
+    new BowerWebpackPlugin({
+      searchResolveModulesDirectories: false
+    })
+  ],
+  module: defaultSettings.getDefaultModules()
+});
 
-// Add needed loaders
+// Add needed loaders to the defaults here
 config.module.loaders.push({
   test: /\.(js|jsx)$/,
   loader: 'react-hot!babel-loader',
-  include: path.join(__dirname, '/../src')
+  include: [].concat(
+    config.additionalPaths,
+    [ path.join(__dirname, '/../src') ]
+  )
 });
 
 module.exports = config;

cfg/dist.js

@@ -1,26 +1,42 @@
-var path = require('path');
-var webpack = require('webpack');
-var _ = require('lodash');
+'use strict';
 
-var baseConfig = require('./base');
+let path = require('path');
+let webpack = require('webpack');
 
-var config = _.merge({
-  entry: path.join(__dirname, '../src/components/run'),
+let baseConfig = require('./base');
+let defaultSettings = require('./defaults');
+
+// Add needed plugins here
+let BowerWebpackPlugin = require('bower-webpack-plugin');
+
+let config = Object.assign({}, baseConfig, {
+  entry: path.join(__dirname, '../src/index'),
   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);
+  ],
+  module: defaultSettings.getDefaultModules()
+});
 
+// Add needed loaders to the defaults here
 config.module.loaders.push({
   test: /\.(js|jsx)$/,
   loader: 'babel',
-  include: path.join(__dirname, '/../src')
+  include: [].concat(
+    config.additionalPaths,
+    [ path.join(__dirname, '/../src') ]
+  )
 });
 
 module.exports = config;

cfg/test.js

@@ -1,9 +1,25 @@
-var path = require('path');
-var srcPath = path.join(__dirname, '/../src/');
+'use strict';
+
+let path = require('path');
+let srcPath = path.join(__dirname, '/../src/');
+
+let baseConfig = require('./base');
+
+// Add needed plugins here
+let BowerWebpackPlugin = require('bower-webpack-plugin');
 
 module.exports = {
   devtool: 'eval',
   module: {
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'isparta-instrumenter-loader',
+        include: [
+          path.join(__dirname, '/../src')
+        ]
+      }
+    ],
     loaders: [
       {
         test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/,
@@ -12,22 +28,31 @@ module.exports = {
       {
         test: /\.(js|jsx)$/,
         loader: 'babel-loader',
-        include: [
-          path.join(__dirname, '/../src'),
-          path.join(__dirname, '/../test')
-        ]
+        include: [].concat(
+          baseConfig.additionalPaths,
+          [
+            path.join(__dirname, '/../src'),
+            path.join(__dirname, '/../test')
+          ]
+        )
       }
     ]
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    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/'
+      styles: srcPath + 'styles/',
+      config: srcPath + 'config/' + process.env.REACT_WEBPACK_ENV
     }
-  }
+  },
+  plugins: [
+    new BowerWebpackPlugin({
+      searchResolveModulesDirectories: false
+    })
+  ]
 };

karma.conf.js

@@ -3,24 +3,31 @@ var webpackCfg = require('./webpack.config');
 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: [ 'mocha', 'chai' ],
     client: {
       mocha: {}
     },
     singleRun: true,
-    reporters: ['mocha'],
+    reporters: [ 'mocha', 'coverage' ],
     preprocessors: {
-      'test/loadtests.js': ['webpack', 'sourcemap']
+      'test/loadtests.js': [ 'webpack', 'sourcemap' ]
     },
     webpack: webpackCfg,
     webpackServer: {
       noInfo: true
+    },
+    coverageReporter: {
+      dir: 'coverage/',
+      reporters: [
+        { type: 'html' },
+        { type: 'text' }
+      ]
     }
   });
 };

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-webpack-template",
-  "version": "0.1.0",
+  "version": "1.5.2",
   "description": "A base skeleton template for react and webpack without task runners",
   "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",
@@ -35,38 +36,47 @@
   },
   "homepage": "https://github.com/weblogixx/react-webpack-template#readme",
   "devDependencies": {
-    "babel-core": "^5.8.22",
-    "babel-loader": "^5.3.2",
+    "babel-core": "^6.0.0",
+    "babel-eslint": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-polyfill": "^6.3.14",
+    "babel-preset-es2015": "^6.0.15",
+    "babel-preset-react": "^6.0.15",
+    "bower-webpack-plugin": "^0.1.9",
     "chai": "^3.2.0",
     "copyfiles": "^0.2.1",
-    "css-loader": "^0.16.0",
-    "eslint": "^1.2.1",
+    "css-loader": "^0.23.0",
+    "eslint": "^2.2.0",
     "eslint-loader": "^1.0.0",
-    "eslint-plugin-react": "^3.3.0",
+    "eslint-plugin-react": "^4.0.0",
     "file-loader": "^0.8.4",
+    "glob": "^7.0.0",
+    "isparta-instrumenter-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",
-    "karma-phantomjs-shim": "^1.1.1",
+    "karma-mocha-reporter": "^2.0.0",
+    "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^1.7.0",
     "minimist": "^1.2.0",
     "mocha": "^2.2.5",
     "null-loader": "^0.1.1",
     "open": "0.0.5",
-    "phantomjs": "^1.9.18",
+    "phantomjs-prebuilt": "^2.0.0",
+    "react-addons-test-utils": "^0.14.0",
     "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"
+    "core-js": "^2.0.0",
+    "normalize.css": "^4.0.0",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
   }
 }

server.js

@@ -1,11 +1,13 @@
 /*eslint no-console:0 */
-var webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
-var config = require('./webpack.config');
-var open = require('open');
+'use strict';
+require('core-js/fn/object/assign');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const config = require('./webpack.config');
+const open = require('open');
 
 new WebpackDevServer(webpack(config), config.devServer)
-.listen(config.port, 'localhost', function(err) {
+.listen(config.port, 'localhost', (err) => {
   if (err) {
     console.log(err);
   }

src/components/Main.js

@@ -1,7 +1,7 @@
-require('normalize.css');
+require('normalize.css/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 +0,0 @@
-import React from 'react';
-import App from './Main';
-
-// Render the main component into the dom
-React.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/base.js

@@ -0,0 +1,5 @@
+'use strict';
+
+// Settings configured here will be merged into the final config object.
+export default {
+}

src/config/dev.js

@@ -0,0 +1,9 @@
+'use strict';
+
+import baseConfig from './base';
+
+let config = {
+  appEnv: 'dev'  // feel free to remove the appEnv property here
+};
+
+export default Object.freeze(Object.assign({}, baseConfig, config));

src/config/dist.js

@@ -0,0 +1,9 @@
+'use strict';
+
+import baseConfig from './base';
+
+let config = {
+  appEnv: 'dist'  // feel free to remove the appEnv property here
+};
+
+export default Object.freeze(Object.assign({}, baseConfig, config));

src/config/test.js

@@ -0,0 +1,9 @@
+'use strict';
+
+import baseConfig from './base';
+
+let config = {
+  appEnv: 'test'  // don't remove the appEnv property here
+};
+
+export default Object.freeze(Object.assign(baseConfig, config));

src/index.js

@@ -0,0 +1,7 @@
+import 'core-js/fn/object/assign';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/Main';
+
+// Render the main component into the dom
+ReactDOM.render(<App />, document.getElementById('app'));

test/components/MainTest.js

@@ -11,13 +11,13 @@ import createComponent from 'helpers/shallowRenderHelper';
 import Main from 'components/Main';
 
 describe('MainComponent', () => {
-    let MainComponent;
+  let MainComponent;
 
-    beforeEach(() => {
-      MainComponent = createComponent(Main);
-    });
+  beforeEach(() => {
+    MainComponent = createComponent(Main);
+  });
 
-    it('should have its component name as default className', () => {
-      expect(MainComponent._store.props.className).to.equal('index');
-    });
+  it('should have its component name as default className', () => {
+    expect(MainComponent.props.className).to.equal('index');
+  });
 });

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';
-const TestUtils = React.addons.TestUtils;
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
 
 /**
  * Get the shallow rendered component

test/loadtests.js

@@ -1,2 +1,8 @@
-var testsContext = require.context('.', true, /(Test\.js$)|(Helper\.js$)/);
+'use strict';
+
+require('babel-polyfill');
+require('core-js/fn/object/assign');
+
+// 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,10 +1,10 @@
 'use strict';
 
-var path = require('path');
-var args = require('minimist')(process.argv.slice(2));
+const path = require('path');
+const args = require('minimist')(process.argv.slice(2));
 
 // List of allowed environments
-var allowedEnvs = ['dev', 'dist', 'test'];
+const allowedEnvs = ['dev', 'dist', 'test'];
 
 // Set the correct environment
 var env;
@@ -15,33 +15,25 @@ if(args._.length > 0 && args._.indexOf('start') !== -1) {
 } else {
   env = 'dev';
 }
+process.env.REACT_WEBPACK_ENV = env;
 
 // Get available configurations
-var configs = {
+const configs = {
   base: require(path.join(__dirname, 'cfg/base')),
   dev: require(path.join(__dirname, 'cfg/dev')),
   dist: require(path.join(__dirname, 'cfg/dist')),
   test: require(path.join(__dirname, 'cfg/test'))
 };
 
-/**
- * Get an allowed environment
- * @param  {String}  env
- * @return {String}
- */
-function getValidEnv(env) {
-  var isValid = env && env.length > 0 && allowedEnvs.indexOf(env) !== -1;
-  return isValid ? env : 'dev';
-}
-
 /**
  * Build the webpack configuration
- * @param  {String} env Environment to use
+ * @param  {String} wantedEnv The wanted environment
  * @return {Object} Webpack config
  */
-function buildConfig(env) {
-  var usedEnv = getValidEnv(env);
-  return configs[usedEnv];
+function buildConfig(wantedEnv) {
+  let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
+  let validEnv = isValid ? wantedEnv : 'dev';
+  return configs[validEnv];
 }
 
 module.exports = buildConfig(env);