0.3.2

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

.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/

CHANGELOG.md

@@ -1,5 +1,16 @@
 # 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).

README.md

@@ -1,29 +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)
+[![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] The dynamic webpack configuration is clunky, there must be a better way to do that!
+- [x] Support for environment-specific configuration files
-- [x] Karmas webpack configuration is not included in the global webpack.config.js file, but it really should
+- [x] Support for code coverage via [isparta-loader](https://github.com/deepsweet/isparta-loader)
 
 ## Todo
 - [ ] Better performance for webpack builds
 
 ## 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
@@ -38,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
 
@@ -61,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

@@ -27,7 +27,8 @@ module.exports = {
       components: srcPath + '/components/',
       sources: srcPath + '/sources/',
       stores: srcPath + '/stores/',
-      styles: srcPath + '/styles/'
+      styles: srcPath + '/styles/',
+      config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
     }
   },
   module: {

cfg/dev.js

@@ -4,6 +4,9 @@ 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',
@@ -14,7 +17,10 @@ var config = _.merge({
   devtool: 'eval',
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin()
+    new webpack.NoErrorsPlugin(),
+    new BowerWebpackPlugin({
+      searchResolveModulesDirectories: false
+    })
   ]
 }, baseConfig);
 

cfg/dist.js

@@ -4,12 +4,21 @@ 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(),

cfg/test.js

@@ -1,6 +1,9 @@
 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: {
@@ -16,18 +19,32 @@ module.exports = {
           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'],
+    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,28 @@ 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: [ 'phantomjs-shim', '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: {
+      type: 'html',
+      dir: 'coverage/'
     }
   });
 };

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-webpack-template",
-  "version": "0.2.2",
+  "version": "0.3.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",
@@ -37,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",
@@ -59,7 +64,7 @@
     "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.12.0"

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/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/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

@@ -15,6 +15,7 @@ if(args._.length > 0 && args._.indexOf('start') !== -1) {
 } else {
   env = 'dev';
 }
+process.env.REACT_WEBPACK_ENV = env;
 
 // Get available configurations
 var configs = {