Initial Commit

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["latest", "react", "stage-0"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,18 @@
+/docroot
+/node_modules/
+npm-debug.log
+/__tests__
+/blueprints
+preprocessor.js
+webpack.config.babel.js
+webpack.config.common.js
+webpack.config.dev.js
+webpack.config.prod.js
+/vendor/
+/bower_components/
+/src/assets
+/src/style
+/bin
+/dist
+/dist-server
+/config/webpack/dist

.eslintrc

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true
+  },
+  "globals": {
+    "__CONFIG__": true,
+    "__ENV__": true
+  },
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      // Enabled object spread
+      "experimentalObjectRestSpread": true
+    }
+  },
+  // Rule changes from Airbnb's eslint config
+  "rules": {
+    "import/no-unresolved": 0,
+    "new-cap": 0,
+    "global-require": 0,
+    "no-underscore-dangle": 0,
+    "arrow-body-style": 0,
+    "no-console": 0,
+    "react/forbid-prop-types": 0,
+    "jsx-a11y/href-no-hash": 0,
+    "import/prefer-default-export": 0,
+    "react/prop-types": 0
+  }
+}

.gitignore

@@ -0,0 +1,8 @@
+/vendor/
+/bower_components/
+/node_modules/
+/.idea
+/docroot/
+.DS_Store
+npm-debug.log
+.eslintcache

README.md

@@ -0,0 +1,230 @@
+### Preface
+
+While React Redux Boilerplate is a ready to use workflow boilerplate for frontend client development ( we welcomed pull request, please ),  __we are also using that for our recruiting purpose__. 
+
+The technologies in this workflow boilerplate shows case a `subset of technologies` we are currently using within our team, and we are trying to give our candidates confidence that by working with us, they will be using decent technologies as well as stay relevant to the industry.  And that is what our team strongly believed in - __technology innovation and promoting developers' relevancy in the industry__.  
+
+If you are interested in working with us, feel free to send a message to [iroy2000](https://www.linkedin.com/in/iroy2000).
+
+__Note:__ This boilerplate is not to show case how to develop in React / Redux, it is a boilerplate that hook everything up for you that you can develop on, so you won't see complicated example here. 
+
+---
+
+# React Redux Boilerplate
+
+`React Redux Boilerplate` is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build process framework out of the box.
+
+`React Redux Boilerplate` is for developing client side application. So,  if you are looking for: 
+
+* `Isomorphic (Universal) support`, feel free to add server side support to it, or you can use something like [react-server](https://github.com/redfin/react-server) or [electrode](http://www.electrode.io/)
+
+
+
+### Features / Benefits
+
+* ES6 end to end 
+* PostCSS ( it support CSS modules, but we also recommended B.E.M style )
+* ESLint integrated
+* Hot Module Reload during development
+* CSS / HTML / JS minification / Image optimization when built
+* JS code duplication removal during built
+* Built-in process to deploy files directly to S3 ( optional )
+* Built-in lightweight config system
+* Built-in support for multiple device concurrent debugging and easy network sharing options with your peers from your laptop.
+* When you build it, it will optimize JS, HTML and image assets ... etc, for you ( production quality )
+* Build system functionality are powerful and easy to configure ( webpack )
+* Minimal setup time and allow you to invest into things that matters
+* Everything automatic, you just care about development, nothing else \o/ Yeah ?!
+
+If you are interested, please read the `package.json` for all installed modules and plugins.
+
+## Table of Contents
+
+1. [Installation](#installation)
+1. [Suggested Workflow](#suggested-workflow)
+1. [Developing Template](#developing-template)
+1. [Integration Note](#integration-note)
+1. [QA](#qa)
+1. [Knowledge Base Reading](#knowledge-base-reading)
+1. [How to Contribute](#how-to-contribute)
+
+## Installation
+
+---
+
+### Prerequisite
+
+You need to have Node.js installed.
+
+
+### Initialize your project
+
+Now run the following commands in your terminal
+
+**NOTE: You only need to run this once!**
+
+```sh
+$ npm install # This will install the necessary packages to use the app
+```
+
+**That's it!**
+
+
+### To run the app in Development Mode
+
+```sh
+$ npm run dev
+```
+
+Wait about 5 - 10 seconds for your development environment to initialize.
+
+When it finishes, open your browser and go to `http://localhost:8080/`
+
+If you see the landing page, it means you have set up everything successfully.
+
+
+### List of NPM Commands
+
+
+```sh
+$ npm run dev    # build and watch, but javascript not minified
+$ npm run build  # build a minified production version
+$ npm run lint   # linting
+$ npm run test   # run test
+```
+
+
+## Suggested Workflow
+
+---
+
+After you check out the repo, I will usually do the following :
+
+0. Go to your project root in your host machine  ( e.g. your Mac )
+1. Run `npm run dev`
+2. Go to your browser and go to `localhost:8080`
+3. Make code changes
+4. Watch your code changes reflect on browser without refreshing
+5. Repeat your development steps
+
+That's very easy, isn't it?
+
+### Production Preview
+
+React Redux Boilerplate supports production preview, which means that you can run the production build job and see how it looks like in production.
+
+1. Run `npm run build` and wait until it is done (it'll take awhile)
+2. Go to the project `docroot`, you will see a `index.html`
+3. Open that `index.html` in your browser, and that is the build version that just got generated
+
+That's very easy, isn't it?
+
+
+### Difference between `npm run dev` v.s. `npm run build`
+
+`npn run dev` is best to do JS / CSS only changes, and it comes with live reload functionality
+
+`npm run build` is for testing what happen if your frontend assets are optimized ( production level code )
+
+Please let me know if you have better work flow suggestion!!
+
+### Configuring your application
+
+If you look at folder `config`, there are four files
+
+`default.json` - all default configuration
+`development.json` - when you run `npm run dev`, it will pull configuration from that file
+`release.json` - when you have NODE_ENV=release, it will use this configuration
+`production.json` - when you have NODE_ENV=production, it will use this configuration
+
+We are using [node-config](https://github.com/lorenwest/node-config), they have a pretty easy to understand documentation.
+
+
+And in your config file ( json config file ), whatever you put inside the `app`, it will be injected into the client application and you can access to your `app` config data by using `__CONFIG__` variables.
+
+Let's say you have a config like the following 
+
+```
+{
+  "app": {
+    "apiURL": "http://foo.bar/"
+  }
+}
+
+```
+
+In your React application, you can access this variables
+
+```
+__CONFIG__.apiURL
+
+```
+
+
+
+
+## Developing Template
+
+---
+
+The `docroot/index.html` is a generated artifact. If look at our sample template at `src/assets/template/_default.html`, the `docroot/index.html` is generated from that file.
+
+We are using [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin) to generate the `docroot/index.html`.
+
+* If you are developing a single page application, you probably can reuse that file or customize it.
+* If you are building multiple pages application, please read the [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin) documentation for template development and how to configure it.
+
+**[Note]** - Most of the use case of the html template system so far is for testing purpose for your dev and build enviornment before you start integration.  If all you need is a static template, you are good; but if your application requires a server side processing, you will need to integrate the artifacts with the language of your choice. Please read `Diagrams` section for how to integrate with other server side language.
+
+## Integration Note
+---
+
+### How to integrate with other server side framework ?
+
+When you run `npm run build`, it will generate a meta data file `assets.json` with the list of generated frontend artifacts.  Think about that as a contract / interface for your server side framework.
+
+And your framework just need to consume that meta information as integration point. 
+
+And this boilerplate has a process integrated to upload artifacts ( assets.json and generated client ifacts ) to S3 / cloudfront.  One of the integration path is the `consumer` can query against s3 for the assets.json, and use the information in assets.json to get the artifacts which is uploaded to S3 / cdn.
+
+
+## QA
+
+---
+
+* __What is our standard to control our npm module dependencies ?__
+    * We are using `^version`, it means "Compatible with version". The reason we are using `^version` is simply we want the ability for us to roll back to previous working version together with the source code.
+
+* __How to add javascript unit test ?__
+    * All React JS test are under \__tests__ directory and this tool will find all the test, you don't need to do anything besides putting your test in, but please use a structure that mimic your source location that you are testing, or it will create confusion.
+
+
+* __What is B.E.M style  ?__
+    * B.E.M is short for `Block, Element, Modifier` and is a naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between the HTML and CSS and make our code base more maintainable.
+
+
+## Knowledge Base Reading
+
+---
+
+* [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html)
+* [Redux](http://redux.js.org/)
+* [redux-cli documentation](https://github.com/SpencerCDixon/redux-cli)
+* [Lazy Loading and Code Split for React Route](https://github.com/webpack/react-proxy-loader)
+* [Learning SASS](http://sass-lang.com/)
+* [Learning PostCSS](https://github.com/postcss/postcss)
+* [Jest = Awesome JS Testing Framework](https://facebook.github.io/jest/docs/tutorial-react.html)
+* [Synchronization of props with state is an anti-pattern](https://github.com/JedWatson/react-select/issues/70)
+* [B.E.M 101](https://css-tricks.com/bem-101/)
+* [Isomorphic JavaScript, The Future of Web Apps](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/)
+
+## How to Contribute
+
+---
+
+
+We welcome anyone to send us __pull request__ to improve this boilerplate, the goal is to make it better from time to time and we all can learn from it.
+
+This boilerplate will be maintained separately.  So please do not check in any business logic to it unless it is for example purpose. 
+
+

__tests__/test.js

@@ -0,0 +1,5 @@
+describe('sum', function() {
+ it('adds 1 + 2 to equal 3', function() {
+   expect(1 + 2).toBe(3);
+ });
+});

bin/commands.js

@@ -0,0 +1,26 @@
+const shell = require('shelljs');
+const config = require('config');
+const colors = require('colors');
+
+const host = config.get('host') || 'localhost';
+const port = config.get('port') || '8080';
+const s3Deploy = config.get('s3Deploy') || 'false';
+
+const option = process.argv[2];
+
+switch (option) {
+  case 'lint':
+    shell.exec('eslint src/js/** server/** --format node_modules/eslint-friendly-formatter . --ext .js --ext .jsx  --cache; exit 0');
+    break;
+  case 'dev':
+    shell.exec(`HOST=${host} PORT=${port} webpack-dev-server --hot --progress --inline --colors --content-base ./docroot`);
+    break;
+  case 'build':
+    shell.exec(`rm -rf docroot/assets && S3_DEPLOY=${s3Deploy} NODE_ENV=production webpack --progress`);
+    break;
+  default:
+    // If the app type is invalid, stop execution of the file.
+    console.log(colors.green('Invalid option.'));
+    console.log(colors.green('See README.md for more details.'));
+    return;
+}

bin/start.js

@@ -0,0 +1,10 @@
+import shell from 'shelljs';
+
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+const IS_RELEASE = process.env.NODE_ENV === 'release';
+
+// Is the app in production mode
+const command = (IS_PRODUCTION || IS_RELEASE) ? 'build' : 'dev';
+
+// Run the appropriate npm command
+shell.exec(`npm run ${command}`);

config/default.json

@@ -0,0 +1,25 @@
+{
+  "publicPath": "localhost:8080",
+  "host": "localhost",
+  "port": "8080",
+  "s3Deploy": false,
+  "jsSourcePath": "src/js",
+  "env": "default",
+  "s3": {
+    "bucket": "",
+    "accessKey": "",
+    "accessSecret": "",
+    "defaultCDNBase": ""
+  },
+  "html": [
+    {
+			"name": "homepage",
+      "title": "Everything is Awesome",
+      "template": "_default.html",
+      "filename": "index.html"
+    }
+  ],
+  "app": {
+    "description": "config inside 'app' will be injected to your frontend code automatically"
+  }
+}

config/development.json

@@ -0,0 +1,7 @@
+{
+  "env": "development",
+  "app": {
+    "description": "you can overwrite the default config",
+    "hello": "Retro is so configurable"
+  }
+}

config/production.json

@@ -0,0 +1,3 @@
+{
+  "env": "development"
+}

config/release.json

@@ -0,0 +1,3 @@
+{
+  "env": "release"
+}