0.3.1

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

.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,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) ![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] 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
+- [x] Support for environment-specific configuration files
 
 ## Todo
 - [ ] Better performance for webpack builds
 
 ## 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

@@ -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/dist.js

@@ -10,6 +10,9 @@ var config = _.merge({
   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(),

cfg/test.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
     }
   }
 };

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-webpack-template",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "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",
@@ -39,11 +40,12 @@
     "babel-loader": "^5.3.2",
     "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",
     "karma": "^0.13.9",
     "karma-chai": "^0.1.0",
     "karma-mocha": "^0.2.0",
@@ -59,14 +61,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,6 +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');
     });
 });

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

@@ -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 = {