Merge pull request #5 from sthzg/feat_env_based_app_configs

Feature from @sthzg: #1 -- added support to import app configuration based on --env

README.md

@@ -14,6 +14,7 @@ The following features are planned to be included in the final version:
 - [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
@@ -71,3 +72,4 @@ react-webpack-template is available under MIT-License and can therefore be used
 ## Contributors
 - Weblogixx (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/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
     }
   }
 };

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');
+  });
+});

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