Added global configuration object and aliases

Author: weblogixx

.eslintrc

@@ -12,6 +12,7 @@
     "react/jsx-no-bind": 0,
     "strict": 0,
     "no-unused-expressions": 0,
-    "no-underscore-dangle": [ "error", { "allowAfterThis": true }]
+    "no-underscore-dangle": [ "error", { "allowAfterThis": true }],
+    "import/no-unresolved": [ "error", "ignore": [ 'config' ] ]
   }
 }

README.md

@@ -19,6 +19,9 @@ The following features are currently included out of the box:
 
 ## Common Questions:
 
+- I want to use react-router, but I dont know how to set it up:
+FOLLOWS
+
 - I want to use less/sass/whatever, but get an error when requiring the file:
 We currently do not ship the needed modules. This is done on purpose, as we dont want you to install too much dependencies. If you do not use a css precompiler, chance is you wont even notice it. If you need one, just install the required webpack loader (e.g. for less via ```npm install --save-dev less-loader```).
 

conf/webpack/Base.js

@@ -30,13 +30,29 @@ class WebpackBaseConfig {
     return this._config;
   }
 
+  /**
+   * Get the environment name
+   * @return {String} The current environment
+   */
+  get env() {
+    return 'dev';
+  }
+
+  /**
+   * Get the absolute path to src directory
+   * @return {String}
+   */
+  get srcPathAbsolute() {
+    return path.resolve('./src');
+  }
+
   /**
    * Get the default settings
    * @return {Object}
    */
   get defaultSettings() {
     return {
-      context: path.resolve('./src'),
+      context: this.srcPathAbsolute,
       debug: false,
       devtool: 'eval',
       devServer: {
@@ -46,6 +62,13 @@ class WebpackBaseConfig {
       },
       entry: './index.js',
       module: {
+        preLoaders: [
+          {
+            test: /\.(js|jsx)$/,
+            include: this.srcPathAbsolute,
+            loader: 'eslint'
+          }
+        ],
         loaders: [
           {
             test: /\.css$/,
@@ -74,7 +97,7 @@ class WebpackBaseConfig {
           {
             test: /\.(js|jsx)$/,
             include: [
-              path.resolve('src')
+              this.srcPathAbsolute
             ],
             loaders: ['babel']
           }
@@ -87,9 +110,17 @@ class WebpackBaseConfig {
       },
       plugins: [],
       resolve: {
+        alias: {
+          actions: `${this.srcPathAbsolute}/actions/`,
+          components: `${this.srcPathAbsolute}/components/`,
+          config: `${this.srcPathAbsolute}/config/${this.env}.js`,
+          images: `${this.srcPathAbsolute}/images/`,
+          sources: `${this.srcPathAbsolute}/sources/`,
+          stores: `${this.srcPathAbsolute}/stores/`
+        },
         extensions: ['', '.js', '.jsx'],
         modules: [
-          path.resolve('./src'),
+          this.srcPathAbsolute,
           'node_modules'
         ]
       }

conf/webpack/Dist.js

@@ -14,11 +14,22 @@ class WebpackDistConfig extends WebpackBaseConfig {
     this.config = {
       devtool: 'source-map',
       plugins: [
+        new webpack.DefinePlugin({
+          'process.env.NODE_ENV': '"production"'
+        }),
         new webpack.optimize.DedupePlugin(),
         new webpack.optimize.AggressiveMergingPlugin()
       ]
     };
   }
+
+  /**
+   * Get the environment name
+   * @return {String} The current environment
+   */
+  get env() {
+    return 'dist';
+  }
 }
 
 module.exports = WebpackDistConfig;

conf/webpack/Test.js

@@ -3,6 +3,7 @@
  */
 'use strict';
 const WebpackBaseConfig = require('./Base');
+const webpack = require('webpack');
 
 class WebpackTestConfig extends WebpackBaseConfig {
 
@@ -27,9 +28,22 @@ class WebpackTestConfig extends WebpackBaseConfig {
             presets: ['react', 'es2015', 'stage-0'],
           }
         }
+      ],
+      plugins: [
+        new webpack.DefinePlugin({
+          'process.env.NODE_ENV': '"test"'
+        })
       ]
     };
   }
+
+  /**
+   * Get the environment name
+   * @return {String} The current environment
+   */
+  get env() {
+    return 'test';
+  }
 }
 
 module.exports = WebpackTestConfig;

package.json

@@ -6,10 +6,13 @@
   "scripts": {
     "start": "npm run serve:dev",
     "test": "mocha",
+    "posttest": "npm run lint",
     "test:watch": "mocha -w",
     "cover": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha",
     "serve:dev": "webpack-dev-server --open --env dev",
-    "dist": "webpack --progress --bail --env dist -p"
+    "serve:dist": "webpack-dev-server --open --env dist",
+    "dist": "webpack --progress --bail --env dist -p",
+    "lint": "eslint ./src"
   },
   "repository": {
     "type": "git",
@@ -42,6 +45,7 @@
     "enzyme": "^2.2.0",
     "eslint": "^2.8.0",
     "eslint-config-airbnb": "^9.0.0",
+    "eslint-loader": "^1.3.0",
     "eslint-plugin-import": "^1.4.0",
     "eslint-plugin-jsx-a11y": "^1.0.0",
     "eslint-plugin-react": "^5.0.0",

src/actions/README.md

@@ -0,0 +1,14 @@
+# About this folder
+This folder will hold all of your **flux** actions if you are using flux.
+You can include actions into your components or stores like this:
+
+```javascript
+let react = require('react/addons');
+let MyAction = require('actions/MyAction');
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    MyAction.exampleMethod();
+  }
+}
+```

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';
+
+const config = {
+  appEnv: 'dev'
+};
+
+export default Object.freeze(Object.assign({}, baseConfig, config));