0.3.0

Feature from @sthzg: #4 -- added DefinePlugin to plugins for dist builds (see https://github.com/weblogixx/react-webpack-template/issues/4)

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

.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,9 @@
+# react-webpack-template - Changelog
+
+## 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,29 @@
 # Welcome to react-webpack-template
-This repository holds a base template for the new version of generator-react-webpack.
+> 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.
 
+[![Build Status](https://travis-ci.org/weblogixx/react-webpack-template.svg)](https://travis-ci.org/weblogixx/react-webpack-template)
+
 ## 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] No dependency on grunt, gulp or the next hot taskrunner!
+- [x] Support for environment-specific configuration files
 
 ## 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.
-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 +38,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
 
@@ -64,4 +69,6 @@ webpack-dev-server --env=dist
 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,28 @@
+var path = require('path');
+var webpack = require('webpack');
+var _ = require('lodash');
+
+var baseConfig = require('./base');
+
+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()
+  ]
+}, 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,29 @@
+var path = require('path');
+var webpack = require('webpack');
+var _ = require('lodash');
+
+var baseConfig = require('./base');
+
+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 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,34 @@
+var path = require('path');
+var srcPath = path.join(__dirname, '/../src/');
+
+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')
+        ]
+      }
+    ]
+  },
+  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
+    }
+  }
+};

karma.conf.js

@@ -1,5 +1,4 @@
-var path = require('path');
-var srcPath = __dirname + '/src/';
+var webpackCfg = require('./webpack.config');
 
 module.exports = function(config) {
   config.set({
@@ -12,46 +11,14 @@ module.exports = function(config) {
     captureTimeout: 60000,
     frameworks: ['phantomjs-shim', 'mocha', 'chai'],
     client: {
-      mocha: {
-
-      }
+      mocha: {}
     },
     singleRun: true,
     reporters: ['mocha'],
     preprocessors: {
       '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
     }

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-webpack-template",
-  "version": "0.0.8",
+  "version": "0.3.0",
   "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 --singleRun=false",
     "posttest": "npm run lint",
     "serve": "node server.js --env=dev",
     "serve:dist": "node server.js --env=dist",
@@ -13,7 +14,9 @@
     "lint": "eslint ./src",
     "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
     "clean": "rimraf dist/*",
-    "patch-release": "npm version patch && npm publish && git push --follow-tags"
+    "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",
@@ -60,10 +63,13 @@
     "style-loader": "^0.12.3",
     "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');
-    });
-
-    it('should do something!', () => {
-      expect(true).to.be.true;
+      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

webpack.config.js

@@ -1,100 +1,48 @@
-var webpack = require('webpack');
-var args = require('minimist')(process.argv.slice(2));
+'use strict';
+
 var path = require('path');
-var env = args.env || 'dev';
+var args = require('minimist')(process.argv.slice(2));
 
-var port = 8000;
-var srcPath = __dirname + '/src/';
-var publicPath = '/assets/';
+// List of allowed environments
+var allowedEnvs = ['dev', 'dist', 'test'];
 
-var config = {
-  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/'
-    }
-  },
-  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'
-      }
-    ]
-  }
+// Set the correct environment
+var env;
+if(args._.length > 0 && args._.indexOf('start') !== -1) {
+  env = 'test';
+} else if (args.env) {
+  env = args.env;
+} else {
+  env = 'dev';
+}
+process.env.REACT_WEBPACK_ENV = env;
+
+// Get available configurations
+var 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'))
 };
 
-// Use config depending on environment
-switch(env) {
-  case 'dist':
-    config.entry = './src/components/run';
-    config.cache = false;
-    config.devtool = 'sourcemap';
-    config.plugins = [
-      new webpack.optimize.DedupePlugin(),
-      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')
-    });
+/**
+ * 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';
 }
 
-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);