diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
new file mode 100644
index 000000000..6e754c58d
--- /dev/null
+++ b/ISSUE_TEMPLATE.md
@@ -0,0 +1,43 @@
+<!--
+Thanks for taking the time to submit an issue.
+Please keep in mind, that GitHub issues are meant to be used for reporting bugs and to
+request new features.
+
+Use Stack Overflow for support: http://stackoverflow.com/questions/tagged/electrode
+Head over to one of our Gitter rooms (https://gitter.im/electrode-io/electrode) and ask for help if you’re unsure if you ran into a bug or if you have any other question.
+
+You would like to report a bug?
+Use the search feature to ensure that the bug hasn't been reported before.
+Please ensure to provide the following information to make sure we have all we need to address your issue.
+-->
+
+## Type of issue
+
+<!-- Feature request or bug -->
+
+<!-- Please delete the rest of the template in case of a feature request -->
+
+----
+
+## My environment
+
+* *OS version/details*: `eg. Windows 10 64-bit`
+* *Node version:* `x.x.x` (run `node --version` in your terminal)
+* *npm version:* `x.x.x` (run `npm --version` in your terminal)
+* *Version of yo :* `x.x.x` (run `yo --version` in your terminal)
+
+## Expected behavior
+
+<!-- Description over here -->
+
+## Current behavior
+
+<!-- Description over here -->
+
+## Steps to reproduce the behavior
+
+## Command line output
+
+```
+Paste your error output over here
+```
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
index 49e0fd970..01baba0a2 100644
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@@ -7,6 +7,7 @@
     -   [What is Electrode](overview/what-is-electrode.md)
     -   [Why Use Electrode](overview/why-use-electrode.md)
     -   [Requirements](overview/requirements.md)
+    -   [What are Archetypes](/overview/what-are-archetypes.md)
 
 ### Quick Start
 -   [Start With Electrode App](/chapter1/quick-start/start-with-app.md)
@@ -31,7 +32,6 @@
 -   [Intermediate](chapter1/Intermediate.md)
 -   [Application Archetype](/chapter1/intermediate/app-archetype/README.md)
 
-    -   [What are Archetypes](/chapter1/intermediate/app-archetype/what-are-archetypes.md)
     -   [Eslint Config](/chapter1/intermediate/app-archetype/eslint.md)
     -   [Webpack Config](/chapter1/intermediate/app-archetype/webpack-config.md)
     -   [Environment Variables](/chapter1/intermediate/app-archetype/env-vars.md)
diff --git a/docs/chapter1/intermediate/app-archetype/README.md b/docs/chapter1/intermediate/app-archetype/README.md
index 95b76b4ab..d68966747 100644
--- a/docs/chapter1/intermediate/app-archetype/README.md
+++ b/docs/chapter1/intermediate/app-archetype/README.md
@@ -1,8 +1,7 @@
 # Electrode React Application Archetype
 
-You've seen how quickly you can create a React application with Electrode's application archetype. The defaults generally are well suited for many people, but it is possible to customize some aspects for your specific needs.
+The application archetype is a pair of npm modules that provide common patterns and configurations for developing a Universal React application.  With the application generator, you can quickly create and start developing a React application.  The defaults generally are well suited for many people, but it is possible to customize some aspects and enable more advanced features for your specific needs.
 
--   [What Are Archetypes](/chapter1/intermediate/app-archetype/what-are-archetypes.md)
 -   [Eslint Config](/chapter1/intermediate/app-archetype/eslint.md)
 -   [Webpack Config](/chapter1/intermediate/app-archetype/webpack-config.md)
 -   [Environment Variables](/chapter1/intermediate/app-archetype/env-vars.md)
diff --git a/docs/chapter1/quick-start/start-with-component.md b/docs/chapter1/quick-start/start-with-component.md
index 0965cbce7..c55d7954f 100644
--- a/docs/chapter1/quick-start/start-with-component.md
+++ b/docs/chapter1/quick-start/start-with-component.md
@@ -35,7 +35,9 @@ A webserver will be started on localhost:3000. Your new component will be used i
 
 ## Further: Adding More Components to the Packages
 
-If you want to add more components to your project, go to `packages` directory and run `yo electrode:component-add` within the packages directory. You can skip this section if you do not need extra components.
+> Note: You can skip this section if you do not need extra components.
+
+If you want to add more components to your project, go to `packages` directory and run `yo electrode:component-add` within the packages directory.
 
 ```bash
 $ cd packages
@@ -48,6 +50,8 @@ Follow the prompts as above, for example:
 
 This will generate a new package and also update the demo-app. Don't get panic if you saw conflicts, the `demo-app/src/client/components/home.jsx` and `demo-app/package.json` expected to be overwritten during the update.
 
+> Note: If you have installed `yo` at version 2.0.0 or higher, you can specify the `a` option for `overwrite this and all others`, or you need to specify the `y` option for `overwrite` each time.
+
 After finished installation, you can preview the multi-components by using demo-app again.
 
 ```bash
diff --git a/docs/overview/requirements.md b/docs/overview/requirements.md
index 066c3e018..c88aaeb25 100644
--- a/docs/overview/requirements.md
+++ b/docs/overview/requirements.md
@@ -2,23 +2,47 @@
 
 First, let's quickly check your development environment. You will need to have the following set up to generate and deploy your Electrode app|component in under five minutes:
 
-## For Development On Your Local machine
+## For Development On Your Local Machine
 
 1.  Install the latest [NodeJS LTS binary](https://nodejs.org/) in your machine. (at least v4.2 required, >= 6 recommended).
-    -   Recommend a tool like [nvm](https://github.com/creationix/nvm#install-script) for managing NodeJS installations.
-2.  Install latest (v3) of [npm](https://www.npmjs.com/) with `npm install -g npm`.
-    -   Note: NodeJS v6.x already comes with npm@3 by default.
-    -   **Electrode requires npm version >= 3**
-3.  Install [yo] with `npm install -g yo`.
-4.  Install [generator-electrode] with `npm install -g generator-electrode`.
-5.  Install [xclap] with `npm install -g xclap-cli`.
-6.  The text editor of your choice downloaded with CLI tools installed.
-
-> **We write NodeJS code with ES6 features that NodeJS >= 4.2 supports.**
->
-> yo is a generic scaffolding system allowing the creation of any kind of app.
-> generator-electrode is a generator for Universal React App with NodeJS backend or a React component with useful clap tasks for development, building and publishing.
-> xclap is a Javascript build tool that lets us automate tasks.
+
+    -   We recommend a tool like [nvm](https://github.com/creationix/nvm#install-script) for managing NodeJS installations, but see [info here](#globally-installed-nodejs) for cautionary notes.
+
+2.  Install [yo], [generator-electrode], and [xclap-cli] globally:
+
+```bash
+npm install -g yo generator-electrode xclap-cli
+```
+
+### Globally Installed NodeJS
+
+IMPORTANT: If you install NodeJS globally on your system, then please make sure you re-install `yo` if it's already exist in your Node installation.  A bug in `yo` was causing it to always load generators from your system folders.  The fix was released on 7-31-2017.
+
+### Keep `generator-electrode` Up To Date
+
+We release new version of [generator-electrode] when we add new features.  So make sure you check the versions and update it periodically with the command:
+
+```bash
+npm install -g generator-electrode
+```
+
+### NPM Verion 3
+
+**Electrode requires npm version >= 3**
+
+NodeJS v6.x already comes with npm@3 by default, but if you are using NodeJS 4 for some reason, make sure you install npm@3 with the following command:
+
+```bash
+npm install -g npm@3
+```
+
+### Headless Chrome
+
+Headless chrome brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. It is a great tool for automated testing and server environments where you don't need a visible UI shell.
+
+In the Electrode Archetype App and Component, we are using Chrome Headless as the default option for automated testing. Please go to your Chrome browser, update Google Chrome if you see the option, and relaunch.
+
+> Note: Headless mode is available on Mac and Linux in Chrome 59. Windows support is coming in Chrome 60. To check what version of Chrome you have, open chrome://version.
 
 ## For Online Deployments
 
@@ -26,3 +50,11 @@ First, let's quickly check your development environment. You will need to have t
 -   A [Github](https://github.com/) account.
 
 Ready? Let's [build](/chapter1/quick-start/build-component.md).
+
+[yo]: http://yeoman.io/
+
+[yeoman]: http://yeoman.io/
+
+[xclap-cli]: https://www.npmjs.com/package/xclap-cli
+
+[generator-electrode]: https://www.npmjs.com/package/generator-electrode
diff --git a/docs/chapter1/intermediate/app-archetype/what-are-archetypes.md b/docs/overview/what-are-archetypes.md
similarity index 100%
rename from docs/chapter1/intermediate/app-archetype/what-are-archetypes.md
rename to docs/overview/what-are-archetypes.md
diff --git a/package.json b/package.json
index c56f3c090..3b796ee58 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "nuke-packages": "rm -rf packages/*/node_modules packages/*/coverage",
     "nuke-samples": "rm -rf samples/*/node_modules samples/*/coverage samples/*/dist samples/*/.isomorphic-loader-config.json samples/*/.etmp",
     "test-reporter": "if lerna updated | grep electrode-webpack-reporter; then cd packages/electrode-webpack-reporter && npm install && npm test; fi",
-    "update-changelog": "node tools/update-changelog.js"
+    "update-changelog": "node tools/update-changelog.js",
+    "gitbook-serve": "gitbook serve --no-watch --no-live"
   },
   "devDependencies": {
     "bluebird": "^3.5.0",
diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/plugins/sw-precache.js b/packages/electrode-archetype-react-app-dev/config/webpack/plugins/sw-precache.js
index a37e6d55e..e5d0b60ff 100644
--- a/packages/electrode-archetype-react-app-dev/config/webpack/plugins/sw-precache.js
+++ b/packages/electrode-archetype-react-app-dev/config/webpack/plugins/sw-precache.js
@@ -3,7 +3,6 @@
 /* Service Worker Precache WebPack Plugin */
 /* From https://github.com/goldhand/sw-precache-webpack-plugin */
 /* Copied locally to turn off warning */
-
 "use strict";
 
 var _extends = Object.assign;
@@ -16,10 +15,6 @@ var _url = require("url");
 
 var _url2 = _interopRequireDefault(_url);
 
-var _del = require("del");
-
-var _del2 = _interopRequireDefault(_del);
-
 var _swPrecache = require("sw-precache");
 
 var _swPrecache2 = _interopRequireDefault(_swPrecache);
@@ -28,30 +23,32 @@ var _uglifyJs = require("uglify-js");
 
 var _uglifyJs2 = _interopRequireDefault(_uglifyJs);
 
-var _fs = require("fs");
-
-var _fs2 = _interopRequireDefault(_fs);
+var _util = require("util");
 
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 
 const FILEPATH_WARNING =
-  "sw-prechache-webpack-plugin filepath: You are using a custom path for your service worker, this may prevent the service worker from working correctly if it is not available in the same path as your application.";
+  "sw-prechache-webpack-plugin [filepath]: You are using a custom path for your service worker, this may prevent the service worker from working correctly if it is not available in the same path as your application.";
+const FORCEDELETE_WARNING =
+  "sw-prechache-webpack-plugin [forceDelete]: You are specifying the option forceDelete. This was removed in v0.10. It should not affect your build but should no longer be required.";
 
 const DEFAULT_CACHE_ID = "sw-precache-webpack-plugin",
   DEFAULT_WORKER_FILENAME = "service-worker.js",
-  DEFAULT_OUTPUT_PATH = "",
   DEFAULT_PUBLIC_PATH = "",
   DEFAULT_IMPORT_SCRIPTS = [],
-  DEFAULT_IGNORE_PATTERNS = [];
+  DEFAULT_IGNORE_PATTERNS = [],
+  CHUNK_NAME_NOT_FOUND_ERROR = 'Could not locate files for chunkName: "%s"',
+  // eslint-disable-next-line max-len
+  CHUNK_NAME_OVERRIDES_FILENAME_WARNING =
+    "Don't use chunkName & filename together; importScripts[<index>].filename overriden by specified chunkName: %j";
 
 const DEFAULT_OPTIONS = {
   cacheId: DEFAULT_CACHE_ID,
   filename: DEFAULT_WORKER_FILENAME,
   importScripts: DEFAULT_IMPORT_SCRIPTS,
   staticFileGlobsIgnorePatterns: DEFAULT_IGNORE_PATTERNS,
-  forceDelete: false,
   mergeStaticsConfig: false,
   minify: false
 };
@@ -60,33 +57,15 @@ class SWPrecacheWebpackPlugin {
   /**
    * SWPrecacheWebpackPlugin - A wrapper for sw-precache to use with webpack
    * @constructor
-   * @param {object} options - All parameters should be passed as a single options object
-   *
-   * // sw-precache options:
-   * @param {string} [options.cacheId]
-   * @param {string} [options.directoryIndex]
-   * @param {object|array} [options.dynamicUrlToDependencies]
-   * @param {boolean} [options.handleFetch]
-   * @param {array} [options.ignoreUrlParametersMatching]
-   * @param {array} [options.importScripts]
-   * @param {function} [options.logger]
-   * @param {number} [options.maximumFileSizeToCacheInBytes]
-   * @param {array} [options.navigateFallbackWhitelist]
-   * @param {string} [options.replacePrefix]
-   * @param {array} [options.runtimeCaching]
-   * @param {array} [options.staticFileGlobs]
-   * @param {string} [options.stripPrefix]
-   * @param {string} [options.stripPrefixMulti]
-   * @param {string} [options.templateFilePath]
-   * @param {boolean} [options.verbose]
+   * @param {object} options - All parameters should be passed as a single options object. All sw-precache options can be passed here in addition to plugin options.
    *
    * // plugin options:
    * @param {string} [options.filename] - Service worker filename, default is 'service-worker.js'
    * @param {string} [options.filepath] - Service worker path and name, default is to use webpack.output.path + options.filename
    * @param {RegExp} [options.staticFileGlobsIgnorePatterns[]] - Define an optional array of regex patterns to filter out of staticFileGlobs
-   * @param {boolean} [options.forceDelete=false] - Pass force option to del
    * @param {boolean} [options.mergeStaticsConfig=false] - Merge provided staticFileGlobs and stripPrefix(Multi) with webpack's config, rather than having those take precedence
    * @param {boolean} [options.minify=false] - Minify the generated Service worker file using UglifyJS
+   * @param {boolean} [options.debug=false] - Output error and warning messages
    */
   constructor(options) {
     // generated configuration options
@@ -95,6 +74,8 @@ class SWPrecacheWebpackPlugin {
     this.options = _extends({}, DEFAULT_OPTIONS, options);
     // generated configuration that will override user options
     this.overrides = {};
+    // push warning messages here
+    this.warnings = [];
   }
 
   /**
@@ -105,92 +86,173 @@ class SWPrecacheWebpackPlugin {
   }
 
   apply(compiler) {
+    // sw-precache needs physical files to reference so we MUST wait until after assets are emitted before generating the service-worker.
     compiler.plugin("after-emit", (compilation, callback) => {
-      // get the defaults from options
-      var _options = this.options;
-      const importScripts = _options.importScripts,
-        staticFileGlobsIgnorePatterns = _options.staticFileGlobsIgnorePatterns,
-        mergeStaticsConfig = _options.mergeStaticsConfig;
+      this.configure(compiler, compilation); // configure the serviceworker options
+      this.checkWarnings(compilation);
+
+      // generate service worker then write to file system
+      this.createServiceWorker()
+        .then(serviceWorker => this.writeServiceWorker(serviceWorker, compiler))
+        .then(() => callback())
+        .catch(err => callback(err));
+    });
+  }
 
-      // get the output path specified in webpack config
+  configure(compiler, compilation) {
+    // get the defaults from options
+    var _options = this.options;
+    const importScripts = _options.importScripts,
+      staticFileGlobsIgnorePatterns = _options.staticFileGlobsIgnorePatterns,
+      mergeStaticsConfig = _options.mergeStaticsConfig;
+    var _options$stripPrefixM = _options.stripPrefixMulti;
+    const stripPrefixMulti = _options$stripPrefixM === undefined ? {} : _options$stripPrefixM;
 
-      const outputPath = compiler.options.output.path || DEFAULT_OUTPUT_PATH;
+    // get the output path used by webpack
 
-      // get the public path specified in webpack config
-      var _compiler$options$out = compiler.options.output.publicPath;
-      const publicPath = _compiler$options$out === undefined
-        ? DEFAULT_PUBLIC_PATH
-        : _compiler$options$out;
+    const outputPath = compiler.outputPath;
 
-      if (this.options.filepath && !this.options.noWarning) {
-        // warn about changing filepath
-        compilation.warnings.push(new Error(FILEPATH_WARNING));
-      }
+    // outputPath + filename or the user option
 
-      // get all assets outputted by webpack
-      const assetGlobs = Object.keys(compilation.assets).map(f =>
-        _path2.default.join(outputPath, f)
-      );
+    var _options$filepath = this.options.filepath;
+    const filepath =
+      _options$filepath === undefined
+        ? _path2.default.resolve(outputPath, this.options.filename)
+        : _options$filepath;
 
-      // merge assetGlobs with provided staticFileGlobs and filter using staticFileGlobsIgnorePatterns
-      const staticFileGlobs = assetGlobs
-        .concat(this.options.staticFileGlobs || [])
-        .filter(text => !staticFileGlobsIgnorePatterns.some(regex => regex.test(text)));
+    // get the public path specified in webpack config
 
-      const stripPrefixMulti = _extends({}, this.options.stripPrefixMulti);
+    var _compiler$options$out = compiler.options.output.publicPath;
+    const publicPath =
+      _compiler$options$out === undefined ? DEFAULT_PUBLIC_PATH : _compiler$options$out;
 
-      if (outputPath) {
-        // strip the webpack config's output.path
-        stripPrefixMulti[`${outputPath}${_path2.default.sep}`] = publicPath;
-      }
+    // get all assets outputted by webpack
+
+    const assetGlobs = Object.keys(compilation.assets).map(f => _path2.default.join(outputPath, f));
 
-      this.config = _extends({}, this.config, {
+    // merge assetGlobs with provided staticFileGlobs and filter using staticFileGlobsIgnorePatterns
+    const staticFileGlobs = assetGlobs
+      .concat(this.options.staticFileGlobs || [])
+      .filter(text => !staticFileGlobsIgnorePatterns.some(regex => regex.test(text)));
+
+    if (outputPath) {
+      // strip the webpack config's output.path (replace for windows users)
+      stripPrefixMulti[`${outputPath}${_path2.default.sep}`.replace(/\\/g, "/")] = publicPath;
+    }
+
+    this.config = _extends({}, this.config, {
+      staticFileGlobs: staticFileGlobs,
+      stripPrefixMulti: stripPrefixMulti
+    });
+
+    // set the actual filepath
+    this.overrides.filepath = filepath;
+
+    // resolve [hash] used in importScripts
+    this.configureImportScripts(importScripts, publicPath, compiler, compilation);
+
+    if (mergeStaticsConfig) {
+      // merge generated and user provided options
+      this.overrides = _extends({}, this.overrides, {
         staticFileGlobs: staticFileGlobs,
         stripPrefixMulti: stripPrefixMulti
       });
+    }
+  }
+
+  configureImportScripts(importScripts, publicPath, compiler, compilation) {
+    if (!importScripts) {
+      return;
+    }
+
+    var _compilation$getStats = compilation.getStats().toJson({ hash: true, chunks: true });
 
-      if (importScripts) {
-        this.overrides.importScripts = importScripts
-          .map(f => f.replace(/\[hash\]/g, compilation.hash)) // need to override importScripts with stats.hash
-          .map(f => _url2.default.resolve(publicPath, f)); // add publicPath to importScripts
+    const hash = _compilation$getStats.hash,
+      chunks = _compilation$getStats.chunks;
+
+    this.overrides.importScripts = importScripts.reduce((fileList, criteria) => {
+      // legacy support for importScripts items defined as string
+      if (typeof criteria === "string") {
+        criteria = { filename: criteria };
       }
 
-      if (mergeStaticsConfig) {
-        // merge generated and user provided options
-        this.overrides = _extends({}, this.overrides, {
-          staticFileGlobs: staticFileGlobs,
-          stripPrefixMulti: stripPrefixMulti
-        });
+      const hasFileName = !!criteria.filename;
+      const hasChunkName = !!criteria.chunkName;
+
+      if (hasFileName && hasChunkName) {
+        this.warnings.push(
+          new Error((0, _util.format)(CHUNK_NAME_OVERRIDES_FILENAME_WARNING, criteria))
+        );
       }
 
-      const done = () => callback();
-      const error = err => callback(err);
+      if (hasChunkName) {
+        const chunk = chunks.find(c => c.names.includes(criteria.chunkName));
 
-      this.writeServiceWorker(compiler).then(done, error);
+        if (!chunk) {
+          compilation.errors.push(
+            new Error((0, _util.format)(CHUNK_NAME_NOT_FOUND_ERROR, criteria.chunkName))
+          );
+          return fileList;
+        }
+
+        const chunkFileName = chunk.files[chunk.names.indexOf(criteria.chunkName)];
+        fileList.push(_url2.default.resolve(publicPath, chunkFileName));
+      } else if (hasFileName) {
+        const hashedFilename = criteria.filename.replace(/\[hash\]/g, hash);
+        fileList.push(_url2.default.resolve(publicPath, hashedFilename));
+      }
+
+      return fileList;
+    }, []);
+  }
+
+  createServiceWorker() {
+    return _swPrecache2.default.generate(this.workerOptions).then(serviceWorkerFileContents => {
+      if (this.options.minify) {
+        const uglifyFiles = {};
+        uglifyFiles[this.options.filename] = serviceWorkerFileContents;
+        return _uglifyJs2.default.minify(uglifyFiles).code;
+      }
+      return serviceWorkerFileContents;
     });
   }
 
-  writeServiceWorker(compiler) {
-    const fileDir = compiler.options.output.path || DEFAULT_OUTPUT_PATH;
-    var _options$filepath = this.options.filepath;
-    const filepath = _options$filepath === undefined
-      ? _path2.default.join(fileDir, this.options.filename)
-      : _options$filepath;
-
-    return (0, _del2.default)(filepath, { force: this.options.forceDelete })
-      .then(() => _swPrecache2.default.generate(this.workerOptions))
-      .then(serviceWorkerFileContents => {
-        if (this.options.minify) {
-          const uglifyFiles = {};
-          uglifyFiles[this.options.filename] = serviceWorkerFileContents;
-          const minifedCodeObj = _uglifyJs2.default.minify(uglifyFiles, { fromString: true });
-          return minifedCodeObj.code;
-        }
-        return serviceWorkerFileContents;
-      })
-      .then(possiblyMinifiedServiceWorkerFileContents =>
-        _fs2.default.writeFileSync(filepath, possiblyMinifiedServiceWorkerFileContents)
-      );
+  writeServiceWorker(serviceWorker, compiler) {
+    const filepath = this.workerOptions.filepath;
+    var _compiler$outputFileS = compiler.outputFileSystem;
+    const mkdirp = _compiler$outputFileS.mkdirp,
+      writeFile = _compiler$outputFileS.writeFile;
+
+    // use the outputFileSystem api to manually write service workers rather than adding to the compilation assets
+
+    return new Promise(resolve => {
+      mkdirp(_path2.default.resolve(filepath, ".."), () => {
+        writeFile(filepath, serviceWorker, resolve);
+      });
+    });
+  }
+
+  /**
+   * Push plugin warnings to webpack log
+   * @param {object} compilation - webpack compilation
+   * @returns {void}
+   */
+  checkWarnings(compilation) {
+    if (!this.options.noWarnings) {
+      if (this.options.filepath) {
+        // warn about changing filepath
+        this.warnings.push(new Error(FILEPATH_WARNING));
+      }
+
+      if (this.options.forceDelete) {
+        // deprecate forceDelete
+        this.warnings.push(new Error(FORCEDELETE_WARNING));
+      }
+    }
+
+    if (this.workerOptions.debug) {
+      this.warnings.forEach(warning => compilation.warnings.push(warning));
+    }
   }
 }
 
diff --git a/packages/electrode-archetype-react-app-dev/package.json b/packages/electrode-archetype-react-app-dev/package.json
index a0c085abb..274a60a6c 100644
--- a/packages/electrode-archetype-react-app-dev/package.json
+++ b/packages/electrode-archetype-react-app-dev/package.json
@@ -45,7 +45,6 @@
     "convert-source-map": "^1.5.0",
     "css-loader": "^0.26.1",
     "css-split-webpack-plugin": "^0.2.0",
-    "del": "^2.2.2",
     "electrode-bundle-analyzer": "^1.0.0",
     "electrode-cdn-file-loader": "^1.0.0",
     "electrode-electrify": "^1.0.0",
@@ -106,6 +105,7 @@
     "stylus-relative-loader": "^3.0.0",
     "sw-precache": "^5.0.0",
     "sw-toolbox": "^3.4.0",
+    "uglify-js": "^3.0.26",
     "url-loader": "^0.5.6",
     "web-app-manifest-loader": "^0.1.1",
     "webpack": "^2.2.0",
diff --git a/packages/electrode-archetype-react-component-dev/config/karma/browser-settings.js b/packages/electrode-archetype-react-component-dev/config/karma/browser-settings.js
new file mode 100644
index 000000000..3277bc51f
--- /dev/null
+++ b/packages/electrode-archetype-react-component-dev/config/karma/browser-settings.js
@@ -0,0 +1,25 @@
+"use strict";
+
+const archetype = require("electrode-archetype-react-component/config/archetype");
+const browser = archetype.karma.browser.toLowerCase();
+
+module.exports = function(settings) {
+  if (browser === "chrome") {
+    settings.browsers = ["ChromeHeadless"];
+    settings.frameworks = ["mocha"];
+    settings.crossOriginAttribute = false;
+    console.log("Using Chrome Headless to run Karma test");
+
+  } else if (browser === "phantomjs") {
+    settings.browsers = ["PhantomJS"];
+    settings.frameworks = ["mocha", "phantomjs-shim"];
+    console.warn(
+      "Using PhantomJS to run Karma test. It's been deprecated and may be removed in the future."
+    );
+  } else {
+    console.error(`Unknown browser ${browser} set for Karma test. Failed.`);
+    return process.exit(1);
+  }
+
+  return settings;
+};
diff --git a/packages/electrode-archetype-react-component-dev/config/karma/karma.conf.dev.js b/packages/electrode-archetype-react-component-dev/config/karma/karma.conf.dev.js
index 8df909f58..b4b5c8fcc 100644
--- a/packages/electrode-archetype-react-component-dev/config/karma/karma.conf.dev.js
+++ b/packages/electrode-archetype-react-component-dev/config/karma/karma.conf.dev.js
@@ -1,5 +1,7 @@
 "use strict";
 
+const browserSettings = require("./browser-settings");
+
 /*
  * Karma Configuration: "dev" version.
  *
@@ -9,10 +11,8 @@
  * server during the test run.
  */
 module.exports = function (config) {
-  config.set({
-    frameworks: ["mocha", "phantomjs-shim"],
+  const base = {
     reporters: ["spec"],
-    browsers: ["PhantomJS"],
     basePath: process.cwd(), // repository root.
     files: [
       // Test bundle (must be created via `npm run dev|hot|server-test`)
@@ -26,5 +26,9 @@ module.exports = function (config) {
         ui: "bdd"
       }
     }
-  });
+  };
+
+  browserSettings(base);
+
+  config.set(base);
 };
diff --git a/packages/electrode-archetype-react-component-dev/config/karma/karma.conf.js b/packages/electrode-archetype-react-component-dev/config/karma/karma.conf.js
index 718d83117..9f942292a 100644
--- a/packages/electrode-archetype-react-component-dev/config/karma/karma.conf.js
+++ b/packages/electrode-archetype-react-component-dev/config/karma/karma.conf.js
@@ -4,19 +4,20 @@ var path = require("path");
 
 var webpackCfg = require("../webpack/webpack.config.test");
 
-var MAIN_PATH = require.resolve("electrode-archetype-react-component-dev/config/karma/entry.js"); // eslint-disable-line max-len
+var MAIN_PATH = require.resolve(
+  "electrode-archetype-react-component-dev/config/karma/entry.js"
+);
+
+const browserSettings = require("./browser-settings");
 
 var PREPROCESSORS = {};
 
 PREPROCESSORS[MAIN_PATH] = ["webpack"];
 
-module.exports = function (config) {
-  config.set({
+module.exports = function(config) {
+  const base = {
     basePath: process.cwd(),
-    frameworks: ["mocha", "phantomjs-shim", "intl-shim"],
-    files: [
-      MAIN_PATH
-    ],
+    files: [MAIN_PATH],
     preprocessors: PREPROCESSORS,
     webpack: webpackCfg,
     webpackServer: {
@@ -38,7 +39,6 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     colors: true,
     autoWatch: false,
-    browsers: ["PhantomJS"],
     reporters: ["spec", "coverage"],
     browserNoActivityTimeout: 60000,
     coverageReporter: {
@@ -51,5 +51,9 @@ module.exports = function (config) {
     },
     captureTimeout: 100000,
     singleRun: true
-  });
+  };
+
+  browserSettings(base);
+
+  config.set(base);
 };
diff --git a/packages/electrode-archetype-react-component-dev/package.json b/packages/electrode-archetype-react-component-dev/package.json
index ac6ff155d..098f7dfff 100644
--- a/packages/electrode-archetype-react-component-dev/package.json
+++ b/packages/electrode-archetype-react-component-dev/package.json
@@ -53,7 +53,7 @@
     "json-loader": "^0.5.3",
     "jsonfile": "^2.2.2",
     "karma": "^1.5.0",
-    "karma-chrome-launcher": "^0.2.0",
+    "karma-chrome-launcher": "^2.1.1",
     "karma-coverage": "^1.1.1",
     "karma-firefox-launcher": "^1",
     "karma-ie-launcher": "^1.0.0",
diff --git a/packages/electrode-archetype-react-component/config/archetype.js b/packages/electrode-archetype-react-component/config/archetype.js
index 54b0e64f1..005dadc5a 100644
--- a/packages/electrode-archetype-react-component/config/archetype.js
+++ b/packages/electrode-archetype-react-component/config/archetype.js
@@ -13,5 +13,8 @@ module.exports = {
     devPort: 2992,
     testPort: 3001,
     modulesDirectories: ["node_modules"]
+  },
+  karma: {
+    browser: process.env.KARMA_BROWSER === undefined ? "chrome" : process.env.KARMA_BROWSER
   }
 };
diff --git a/packages/electrode-cookies/.eslintignore b/packages/electrode-cookies/.eslintignore
new file mode 100644
index 000000000..62562b74a
--- /dev/null
+++ b/packages/electrode-cookies/.eslintignore
@@ -0,0 +1,2 @@
+coverage
+node_modules
diff --git a/packages/electrode-cookies/.eslintrc b/packages/electrode-cookies/.eslintrc
new file mode 100644
index 000000000..5f6ea6525
--- /dev/null
+++ b/packages/electrode-cookies/.eslintrc
@@ -0,0 +1,3 @@
+---
+extends:
+  - "./node_modules/electrode-archetype-njs-module-dev/config/eslint/.eslintrc-node"
diff --git a/packages/electrode-cookies/.npmignore b/packages/electrode-cookies/.npmignore
new file mode 100644
index 000000000..125cf2bca
--- /dev/null
+++ b/packages/electrode-cookies/.npmignore
@@ -0,0 +1,226 @@
+
+# Created by https://www.gitignore.io/api/osx,node
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+### Vim template
+[._]*.s[a-w][a-z]
+[._]s[a-w][a-z]
+*.un~
+Session.vim
+.netrwhist
+*~
+### GitBook template
+# Node rules:
+## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+## Dependency directory
+## Commenting this out is preferred by some people, see
+## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Book build output
+_book
+
+# eBook build output
+*.epub
+*.mobi
+*.pdf
+### TortoiseGit template
+# Project-level settings
+/.tgitconfig
+### Xcode template
+# Xcode
+#
+# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
+
+## Build generated
+build/
+DerivedData
+
+## Various settings
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+
+## Other
+*.xccheckout
+*.moved-aside
+*.xcuserstate
+### Emacs template
+# -*- mode: gitignore; -*-
+*~
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+*.elc
+auto-save-list
+tramp
+.\#*
+
+# Org-mode
+.org-id-locations
+*_archive
+
+# flymake-mode
+*_flymake.*
+
+# eshell files
+/eshell/history
+/eshell/lastdir
+
+# elpa packages
+/elpa/
+
+# reftex files
+*.rel
+
+# AUCTeX auto folder
+/auto/
+
+# cask packages
+.cask/
+### OSX template
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
+
+*.iml
+
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+
+## File-based project format:
+*.ipr
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+/clap.js
+/.npmignore
+.nyc_output
diff --git a/packages/electrode-cookies/README.md b/packages/electrode-cookies/README.md
new file mode 100644
index 000000000..c3d2b2225
--- /dev/null
+++ b/packages/electrode-cookies/README.md
@@ -0,0 +1,112 @@
+# Electrode Cookies
+
+Electrode isomorphic cookies lib.
+
+## Install
+
+    npm install electrode-cookies --save
+
+## Usage
+
+This module offers reading and setting cookies in React code that works in both the browser or when doing Server Side Rendering.
+
+In your pure server only code, you can also use this module to read and set cookies, but you **MUST** pass the `request` object in the options. Otherwise an assert error will be thrown.
+
+In NodeJS land:
+
+```js
+const Cookies = require("electrode-cookies");
+```
+
+### Reading cookies
+
+In ReactJS land:
+
+```js
+import Cookies from "electrode-cookies";
+const value = Cookies.get("test-cookie");
+```
+
+In NodeJS land:
+
+> Note the difference is that `request` is passed in options.
+
+```js
+const Cookies = require("electrode-cookies");
+const value = Cookies.get("test-cookie", { request });
+```
+
+### Writing cookies
+
+In ReactJS land:
+
+```js
+import Cookies from "electrode-cookies";
+Cookies.set( "foo", "bar", { path: "/", domain: ".walmart.com" } );
+```
+
+In NodeJS land:
+
+> Note the difference is that `request` is passed in options.
+
+```js
+const Cookies = require("electrode-cookies");
+Cookies.set( "foo", "bar", { request, path: "/", domain: ".walmart.com" } );
+```
+
+## Electrode Server Setup
+
+The cookie writing on server side requires support from a Hapi plugin.  If you use [electrode-server], then it should have setup the plugin for you by default.  Otherwise, you need to register the [hapi plugin](hapi-plugin.js).
+
+## APIs
+
+### [Cookies.get](#cookiesget)
+
+`Cookies.get(key, [options])`
+
+Parameters:
+
+-   `key` - name of the cookie
+-   `options` - (optional) **_Available for Server side only._**  options for getting the cookie
+    -   `request` - The server `request` object (**Required on server**).
+    -   `matchSubStr` - If `true`, then do substring matching of key with all cookie keys.
+        -   `skipEncoding` - (applies only if `matchSubStr` is `true`) If `true`, then do not encode the key or decode the value.
+
+Returns the value of the cookie for `key`.
+
+### [Cookies.set](#cookiesset)
+
+`Cookies.set(key, value, [options])`
+
+Set a cookie with `key` and `value`.
+
+Parameters:
+
+-   `key` - name of the cookie
+-   `value` - value of the cookie
+-   `options` - (optional) options for the cookie
+    -   `request` - On the server side, the `request` object (**Required on server**).
+    -   `path` - string path of the cookie **_Default:_** `"/"`
+    -   `domain` - string domain of the cookie
+    -   `expires` - number of seconds the cookie will expire
+    -   `secure` - A boolean of whether or not the cookie should only be available over SSL **_Default:_** false
+    -   `httpOnly` - A boolean of whether or not the cookie should only be available over HTTP(S) **_Default:_** false
+    -   `forceAuthEncoding` - Forces non-standard encoding for `+` and `/` characters, use with auth cookies.
+    -   `skipEncoding` - Skip encoding/escaping of the cookie value. See [source](https://gecgithub01.walmart.com/electrode/electrode-cookies/blob/master/lib/index.js) for details.
+
+### [Cookies.expire](#cookiesexpire)
+
+`Cookies.expire(key, [options])`
+
+Expires a cookie specified by `key`.
+
+Parameters:
+
+-   `key` - name of the cookie
+-   `options` - (optional) options for the cookie
+    -   `path` - string path of the cookie **_Default:_** `"/"`
+    -   `domain` - string domain of the cookie
+    -   `secure` - A boolean of whether or not the cookie should only be available over SSL **_Default:_** false
+    -   `request` - The server request object (**Required on server**)
+
+[electrode-server]: https://gecgithub01.walmart.com/electrode/electrode-server
diff --git a/packages/electrode-cookies/cookies-js/index.js b/packages/electrode-cookies/cookies-js/index.js
new file mode 100644
index 000000000..60b3603bc
--- /dev/null
+++ b/packages/electrode-cookies/cookies-js/index.js
@@ -0,0 +1,179 @@
+/*
+ * Cookies.js - 1.2.2
+ * https://github.com/ScottHamper/Cookies
+ *
+ * This is free and unencumbered software released into the public domain.
+ */
+(function(global, undefined) {
+  "use strict";
+
+  var factory = function(window) {
+    if (typeof window.document !== "object") {
+      throw new Error("Cookies.js requires a `window` with a `document` object");
+    }
+
+    var Cookies = function(key, value, options) {
+      return arguments.length === 1 ? Cookies.get(key) : Cookies.set(key, value, options);
+    };
+
+    // Allows for setter injection in unit tests
+    Cookies._document = window.document;
+
+    // Used to ensure cookie keys do not collide with
+    // built-in `Object` properties
+    Cookies._cacheKeyPrefix = "cookey."; // Hurr hurr, :)
+
+    Cookies._maxExpireDate = new Date("Fri, 31 Dec 9999 23:59:59 UTC");
+
+    Cookies.defaults = {
+      path: "/",
+      secure: false
+    };
+
+    Cookies.get = function(key) {
+      if (Cookies._cachedDocumentCookie !== Cookies._document.cookie) {
+        Cookies._renewCache();
+      }
+
+      var value = Cookies._cache[Cookies._cacheKeyPrefix + key];
+
+      return value === undefined ? undefined : decodeURIComponent(value);
+    };
+
+    Cookies.set = function(key, value, options) {
+      options = Cookies._getExtendedOptions(options);
+      options.expires = Cookies._getExpiresDate(value === undefined ? -1 : options.expires);
+
+      Cookies._document.cookie = Cookies._generateCookieString(key, value, options);
+
+      return Cookies;
+    };
+
+    Cookies.expire = function(key, options) {
+      return Cookies.set(key, undefined, options);
+    };
+
+    Cookies._getExtendedOptions = function(options) {
+      return {
+        path: (options && options.path) || Cookies.defaults.path,
+        domain: (options && options.domain) || Cookies.defaults.domain,
+        expires: (options && options.expires) || Cookies.defaults.expires,
+        secure: options && options.secure !== undefined ? options.secure : Cookies.defaults.secure,
+        skipEncoding: options && options.skipEncoding
+      };
+    };
+
+    Cookies._isValidDate = function(date) {
+      return Object.prototype.toString.call(date) === "[object Date]" && !isNaN(date.getTime());
+    };
+
+    Cookies._getExpiresDate = function(expires, now) {
+      now = now || new Date();
+
+      if (typeof expires === "number") {
+        expires =
+          expires === Infinity ? Cookies._maxExpireDate : new Date(now.getTime() + expires * 1000);
+      } else if (typeof expires === "string") {
+        expires = new Date(expires);
+      }
+
+      if (expires && !Cookies._isValidDate(expires)) {
+        throw new Error("`expires` parameter cannot be converted to a valid Date instance");
+      }
+
+      return expires;
+    };
+
+    Cookies._generateCookieString = function(key, value, options) {
+      options = options || {};
+
+      if (!options.skipEncoding) {
+        key = key.replace(/[^#$&+\^`|]/g, encodeURIComponent);
+        key = key.replace(/\(/g, "%28").replace(/\)/g, "%29");
+        // \--9 being exclude chars - to 9, with 9 being before :
+        value = (value + "").replace(/[^!#&-+\--9<-\[\]-~]/g, encodeURIComponent);
+      }
+
+      var cookieString = key + "=" + value;
+      cookieString += options.path ? ";path=" + options.path : "";
+      cookieString += options.domain ? ";domain=" + options.domain : "";
+      cookieString += options.expires ? ";expires=" + options.expires.toUTCString() : "";
+      cookieString += options.secure ? ";secure" : "";
+
+      return cookieString;
+    };
+
+    Cookies._getCacheFromString = function(documentCookie) {
+      var cookieCache = {};
+      var cookiesArray = documentCookie ? documentCookie.split("; ") : [];
+
+      for (var i = 0; i < cookiesArray.length; i++) {
+        var cookieKvp = Cookies._getKeyValuePairFromCookieString(cookiesArray[i]);
+
+        if (cookieCache[Cookies._cacheKeyPrefix + cookieKvp.key] === undefined) {
+          cookieCache[Cookies._cacheKeyPrefix + cookieKvp.key] = cookieKvp.value;
+        }
+      }
+
+      return cookieCache;
+    };
+
+    Cookies._getKeyValuePairFromCookieString = function(cookieString) {
+      // "=" is a valid character in a cookie value according to RFC6265, so cannot `split('=')`
+      var separatorIndex = cookieString.indexOf("=");
+
+      // IE omits the "=" when the cookie value is an empty string
+      separatorIndex = separatorIndex < 0 ? cookieString.length : separatorIndex;
+
+      var key = cookieString.substr(0, separatorIndex);
+      var decodedKey;
+      try {
+        decodedKey = decodeURIComponent(key);
+      } catch (e) {
+        if (console && typeof console.error === "function") {
+          console.error('Could not decode cookie with key "' + key + '"', e);
+        }
+      }
+
+      return {
+        key: decodedKey,
+        value: cookieString.substr(separatorIndex + 1) // Defer decoding value until accessed
+      };
+    };
+
+    Cookies._renewCache = function() {
+      Cookies._cache = Cookies._getCacheFromString(Cookies._document.cookie);
+      Cookies._cachedDocumentCookie = Cookies._document.cookie;
+    };
+
+    Cookies._areEnabled = function() {
+      var testKey = "cookies.js";
+      var areEnabled = Cookies.set(testKey, 1).get(testKey) === "1";
+      Cookies.expire(testKey);
+      return areEnabled;
+    };
+
+    Cookies.enabled = Cookies._areEnabled();
+
+    return Cookies;
+  };
+
+  var cookiesExport = typeof global.document === "object" ? factory(global) : factory;
+
+  // AMD support
+  if (typeof define === "function" && define.amd) {
+    define(function() {
+      return cookiesExport;
+    });
+    // CommonJS/Node.js support
+  } else if (typeof exports === "object") {
+    // Support Node.js specific `module.exports` (which can be a function)
+    if (typeof module === "object" && typeof module.exports === "object") {
+      exports = module.exports = cookiesExport;
+    }
+    // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function)
+    exports.Cookies = cookiesExport;
+  } else {
+    global.Cookies = cookiesExport;
+  }
+})(typeof window === "undefined" ? this : window);
diff --git a/packages/electrode-cookies/hapi-plugin.js b/packages/electrode-cookies/hapi-plugin.js
new file mode 100644
index 000000000..49a13cb05
--- /dev/null
+++ b/packages/electrode-cookies/hapi-plugin.js
@@ -0,0 +1,25 @@
+"use strict";
+
+var each = require("lodash/each");
+
+function electrodeCookiesRegister(server, options, next) {
+  server.ext("onPreResponse", (request, reply) => {
+    if (request.app.replyStates) {
+      each(request.app.replyStates, (state, name) => {
+        reply.state(name, state.value, state.options);
+      });
+    }
+
+    return reply.continue();
+  });
+
+  next();
+}
+
+electrodeCookiesRegister.attributes = {
+  pkg: require("./package.json")
+};
+
+module.exports = {
+  register: electrodeCookiesRegister
+};
diff --git a/packages/electrode-cookies/lib/csindex.js b/packages/electrode-cookies/lib/csindex.js
new file mode 100644
index 000000000..28da4c64e
--- /dev/null
+++ b/packages/electrode-cookies/lib/csindex.js
@@ -0,0 +1,8 @@
+/* eslint-disable */
+var cookies = require("../cookies-js");
+
+module.exports = {
+  get: cookies.get,
+  set: cookies.set,
+  expire: cookies.expire
+};
diff --git a/packages/electrode-cookies/lib/index.js b/packages/electrode-cookies/lib/index.js
new file mode 100644
index 000000000..247c58400
--- /dev/null
+++ b/packages/electrode-cookies/lib/index.js
@@ -0,0 +1,91 @@
+"use strict";
+
+const safeGet = require("lodash/get");
+const reduce = require("lodash/reduce");
+const assert = require("assert");
+
+const replacers = { "(": "%28", ")": "%29" };
+
+const encodeKey = key =>
+  key.replace(/[^#$&+\^`|]/g, encodeURIComponent).replace(/[\(\)]/g, m => replacers[m]);
+
+const cookies = {
+  get: (key, options) => {
+    options = options || {};
+    assert(options.request, "The request option is not set");
+
+    if (options.matchSubStr) {
+      const substring = options.skipEncoding === true ? key : encodeKey(key);
+
+      const NOT_FOUND = -1;
+
+      try {
+        return reduce(
+          options.request.state,
+          (result, value, k) => {
+            if (k.indexOf(substring) > NOT_FOUND) {
+              result[k] =
+                options.skipEncoding === true || value === undefined
+                  ? value
+                  : decodeURIComponent(value);
+            }
+            return result;
+          },
+          {}
+        );
+      } catch (err) {
+        return null;
+      }
+    }
+
+    try {
+      const value = options.request.state[encodeKey(key)];
+      return value === undefined ? undefined : decodeURIComponent(value);
+    } catch (err) {
+      return null;
+    }
+  },
+
+  set: (key, value, options) => {
+    options = options || {};
+    assert(options.request, "The request option is not set");
+
+    const MSEC = 1000;
+
+    const setOptions = {
+      path: options.path || "/",
+      ttl: options.expires && options.expires * MSEC,
+      isHttpOnly: options.httpOnly,
+      isSecure: options.secure,
+      domain: options.domain,
+      strictHeader: safeGet(options, "strictHeader", true)
+    };
+
+    const request = options.request;
+
+    if (!request.app.replyStates) {
+      request.app.replyStates = {};
+    }
+
+    if (options.skipEncoding !== true) {
+      key = encodeKey(key);
+      value = (typeof value === "string" ? value : JSON.stringify(value))
+        // \--9 being exclude chars - to 9, with 9 being before :
+        .replace(/[^!#&-+\--9<-\[\]-~]/g, encodeURIComponent);
+    }
+
+    if (options.forceAuthEncoding) {
+      value = value.replace(/[+/]/g, encodeURIComponent);
+    }
+
+    request.app.replyStates[key] = { value, options: setOptions };
+  },
+
+  expire: (key, options) => {
+    options = options || {};
+    options.expires = 0;
+    cookies.set(key, "x", options);
+  }
+};
+
+module.exports = cookies;
diff --git a/packages/electrode-cookies/package.json b/packages/electrode-cookies/package.json
new file mode 100644
index 000000000..6df793e85
--- /dev/null
+++ b/packages/electrode-cookies/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "electrode-cookies",
+  "version": "2.0.0",
+  "description": "Electrode ISO cookies lib",
+  "main": "lib/index.js",
+  "browser": "lib/csindex.js",
+  "scripts": {
+    "test": "clap check",
+    "format": "prettier --write --print-width 100 *.js `find . -type d -d 1 -exec echo '{}/**/*.js' \\; | egrep -v '(/node_modules/|/dist/|/coverage/)'`"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/electrode-io/electrode.git"
+  },
+  "keywords": [],
+  "license": "Apache-2.0",
+  "dependencies": {
+    "lodash": "^4.14.1"
+  },
+  "devDependencies": {
+    "bluebird": "^2.10.2",
+    "electrode-archetype-njs-module-dev": "^2.2.0",
+    "electrode-server": "^1.2.2",
+    "eslint-config-prettier": "^2.3.0",
+    "jsdom": "^9.4.2",
+    "jsdom-global": "^2.0.0",
+    "mock-require": "^1.3.0",
+    "prettier": "^1.5.3",
+    "set-cookie-parser": "^1.0.1",
+    "superagent": "^1.7.2",
+    "xclap": "^0.2.0"
+  },
+  "nyc": {
+    "all": true,
+    "reporter": [
+      "lcov",
+      "text",
+      "text-summary"
+    ],
+    "exclude": [
+      "coverage",
+      "*clap.js",
+      "gulpfile.js",
+      "dist",
+      "test"
+    ]
+  }
+}
diff --git a/packages/electrode-cookies/test/.eslintrc b/packages/electrode-cookies/test/.eslintrc
new file mode 100644
index 000000000..e9da91c41
--- /dev/null
+++ b/packages/electrode-cookies/test/.eslintrc
@@ -0,0 +1,3 @@
+---
+extends:
+  - "../node_modules/electrode-archetype-njs-module-dev/config/eslint/.eslintrc-test"
\ No newline at end of file
diff --git a/packages/electrode-cookies/test/mocha.opts b/packages/electrode-cookies/test/mocha.opts
new file mode 100644
index 000000000..022f99b50
--- /dev/null
+++ b/packages/electrode-cookies/test/mocha.opts
@@ -0,0 +1,2 @@
+--require node_modules/electrode-archetype-njs-module-dev/config/test/setup.js
+--recursive
diff --git a/packages/electrode-cookies/test/spec/csindex.spec.js b/packages/electrode-cookies/test/spec/csindex.spec.js
new file mode 100644
index 000000000..5aeaf167c
--- /dev/null
+++ b/packages/electrode-cookies/test/spec/csindex.spec.js
@@ -0,0 +1,43 @@
+"use strict";
+
+const cleanup = require("jsdom-global")();
+const mockReq = require("mock-require");
+const expect = require("chai").expect;
+
+describe("csindex", () => {
+  let csIndex;
+  beforeEach(() => {
+    mockReq.reRequire("../../cookies-js");
+    mockReq.reRequire("../../lib/csindex");
+    csIndex = require("../../lib/csindex");
+  });
+
+  after(() => {
+    cleanup();
+  });
+
+  it(".set should encode value", function() {
+    const document = global.document;
+    const key = "($;enc:)";
+    const value = "i$xx:x;";
+    csIndex.set(key, value);
+    let cookie = document.cookie;
+    expect(cookie).includes("%28$%3Benc%3A%29=i%24xx%3Ax%3B");
+    const verifyValue = csIndex.get(key);
+    expect(verifyValue).to.equal(value);
+    csIndex.expire(key);
+    cookie = document.cookie;
+    expect(cookie).to.be.empty;
+  });
+
+  it(".set should honor skipEncoding option", function() {
+    const document = global.document;
+    const key = "!enc:)";
+    const value = "i$xx:x";
+    csIndex.set(key, value, { skipEncoding: true });
+    const cookie = document.cookie;
+    expect(cookie).to.equal(`${key}=${value}`);
+    const verifyValue = csIndex.get(key);
+    expect(verifyValue).to.equal(value);
+  });
+});
diff --git a/packages/electrode-cookies/test/spec/hapi-plugin.spec.js b/packages/electrode-cookies/test/spec/hapi-plugin.spec.js
new file mode 100644
index 000000000..12afc8806
--- /dev/null
+++ b/packages/electrode-cookies/test/spec/hapi-plugin.spec.js
@@ -0,0 +1,20 @@
+"use strict";
+
+const expect = require("chai").expect;
+const cookiesPlugin = require("../../hapi-plugin");
+
+describe("Hapi plugin", () => {
+  it("should handle request.app.replyStates not being set", done => {
+    const request = { app: {} };
+    const reply = { continue: () => {} };
+    const server = {
+      ext: (event, handler) => {
+        expect(event).to.equal("onPreResponse");
+        handler(request, reply);
+        done();
+      }
+    };
+
+    cookiesPlugin.register(server, {}, () => {});
+  });
+});
diff --git a/packages/electrode-cookies/test/spec/index.spec.js b/packages/electrode-cookies/test/spec/index.spec.js
new file mode 100644
index 000000000..bc7f0b7d1
--- /dev/null
+++ b/packages/electrode-cookies/test/spec/index.spec.js
@@ -0,0 +1,314 @@
+"use strict";
+
+/* eslint-disable quotes, max-len */
+
+const electrodeServer = require("electrode-server");
+const superAgent = require("superagent");
+const Cookies = require("../../");
+const CookieParser = require("set-cookie-parser");
+const _ = require("lodash");
+const expect = require("chai").expect;
+
+function makeConfig() {
+  return {
+    services: {
+      autoInit: false,
+      autoDiscovery: false
+    },
+    plugins: {
+      "electrode-cookies/hapi-plugin": {
+        register: require("../../hapi-plugin.js")
+      }
+    }
+  };
+}
+
+describe("cookies", function() {
+  this.timeout(5000);
+
+  let currentServer;
+
+  const startServer = config => {
+    return electrodeServer(config).tap(server => {
+      currentServer = server;
+    });
+  };
+
+  afterEach(done => {
+    if (currentServer) {
+      currentServer.stop(err => {
+        currentServer = undefined;
+        done(err);
+      });
+    } else {
+      done();
+    }
+  });
+
+  it("should set cookie", () => {
+    const handler = (request, reply) => {
+      Cookies.set("test", "bar", {
+        path: "/",
+        expires: 0,
+        secure: true,
+        domain: ".walmart.com",
+        httpOnly: false,
+        request
+      });
+      Cookies.set("test2", "bar2", {
+        path: "/test",
+        expires: 1000,
+        secure: false,
+        domain: "x.walmart.com",
+        httpOnly: true,
+        request
+      });
+      Cookies.set("test3", "bar3", {
+        expires: 50000,
+        secure: false,
+        request
+      });
+      Cookies.set("test4", "bar4", { request });
+      Cookies.expire("test5", { request });
+      Cookies.set("($;enc:)", "(i$xx:x;)", {
+        expires: 50000,
+        secure: false,
+        request
+      });
+      Cookies.set("----", { test: "12345", flag: true }, { request });
+      const test1 = Cookies.get("test1", { request });
+      Cookies.set("affiliate", "reflectorid=123:wmlspartner=wmlspartnerID:lastupd=9876630", {
+        strictHeader: false,
+        skipEncoding: true,
+        request
+      });
+      Cookies.set("reflector", `"reflectorid=9834123:lastupd=98765:firstcreate=87654"`, {
+        strictHeader: false,
+        skipEncoding: true,
+        request
+      });
+      Cookies.set("($!enc:)", "(i$xx:x)", {
+        expires: 50000,
+        secure: false,
+        strictHeader: false,
+        skipEncoding: true,
+        request
+      });
+      Cookies.set("plusforwardslash", "+/", {
+        strictHeader: false,
+        forceAuthEncoding: true,
+        request
+      });
+      reply({ test1, now: Date.now() });
+    };
+
+    const serverConfig = makeConfig();
+
+    return startServer(serverConfig)
+      .then(server => {
+        server.route({
+          method: "get",
+          path: "/test",
+          handler
+        });
+
+        return new Promise((resolve, reject) => {
+          superAgent("http://localhost:3000/test")
+            .set("cookie", "test1=hello")
+            .end((err, response) => {
+              return err ? reject(err) : resolve(response);
+            });
+        });
+      })
+      .then(response => {
+        expect(response.body).to.have.keys(["test1", "now"]);
+        expect(response.headers["set-cookie"]).to.be.an("array").with.length(11);
+
+        const cookies = CookieParser.parse(response.headers["set-cookie"]);
+
+        const verifyCookie = data => {
+          const c = _.find(cookies, x => x.name === data.name);
+          expect(c, `No cookie found with name "${data.name}"`).to.exist;
+          if (data.hasOwnProperty("maxAge")) {
+            const expires = data.maxAge > 0 ? response.body.now + data.maxAge * 1000 : 0;
+            expect(c.expires.toGMTString()).to.equal(new Date(expires).toGMTString());
+            delete c.expires;
+          }
+          expect(
+            _.pick(c, "name", "value", "path", "maxAge", "domain", "secure", "httpOnly")
+          ).to.deep.equal(data);
+        };
+
+        verifyCookie({
+          name: "test",
+          value: "bar",
+          path: "/",
+          maxAge: 0,
+          domain: ".walmart.com",
+          secure: true
+        });
+        verifyCookie({
+          name: "test2",
+          value: "bar2",
+          path: "/test",
+          maxAge: 1000,
+          domain: "x.walmart.com",
+          httpOnly: true
+        });
+        verifyCookie({
+          name: "test3",
+          value: "bar3",
+          path: "/",
+          maxAge: 50000
+        });
+        verifyCookie({
+          name: "test4",
+          value: "bar4",
+          path: "/"
+        });
+        verifyCookie({
+          name: "test5",
+          value: "x",
+          path: "/",
+          maxAge: 0
+        });
+        verifyCookie({
+          name: "%28$%3Benc%3A%29",
+          value: "(i%24xx%3Ax%3B)",
+          path: "/",
+          maxAge: 50000
+        });
+        verifyCookie({
+          name: "----",
+          value: "{%22test%22%3A%2212345%22%2C%22flag%22%3Atrue}",
+          path: "/"
+        });
+        verifyCookie({
+          name: "affiliate",
+          value: "reflectorid=123:wmlspartner=wmlspartnerID:lastupd=9876630",
+          path: "/"
+        });
+        verifyCookie({
+          name: "reflector",
+          value: `"reflectorid=9834123:lastupd=98765:firstcreate=87654"`,
+          path: "/"
+        });
+        verifyCookie({
+          name: "($!enc:)",
+          value: "(i$xx:x)",
+          path: "/",
+          maxAge: 50000
+        });
+        verifyCookie({
+          name: "plusforwardslash",
+          value: "%2B%2F",
+          path: "/"
+        });
+
+        expect(response.body.test1).to.equal("hello");
+      });
+  });
+
+  it("should get cookie", () => {
+    const handler = (request, reply) => {
+      try {
+        expect(Cookies.get("test", { request })).to.equal("bar");
+        expect(Cookies.get("test2", { request })).to.equal("bar2");
+        expect(Cookies.get("test3", { request })).to.equal("bar3");
+        expect(Cookies.get("test4", { request })).to.equal("bar4");
+        expect(Cookies.get("test5", { request })).to.equal("");
+        expect(Cookies.get("($;enc:)", { request })).to.equal("(i$xx:x;)");
+        expect(Cookies.get("----", { request })).to.equal(`{"test":"12345","flag":true}`);
+        expect(Cookies.get("qwer", { request })).to.equal(undefined);
+        expect(Cookies.get("AID", { request })).to.equal(
+          "wmlspartner=wmtlabs:reflectorid=0085370:lastupd=146984"
+        );
+        expect(Cookies.get("com.wm.reflector", { request })).to.equal(
+          "wmlspartner:abcd@lastupd:456@reflectorid:qwerty"
+        );
+        reply({ now: Date.now() });
+      } catch (err) {
+        reply(err.toString()).code(500);
+      }
+    };
+
+    const serverConfig = makeConfig();
+
+    return startServer(serverConfig).then(server => {
+      server.route({
+        method: "get",
+        path: "/test",
+        handler
+      });
+
+      return new Promise((resolve, reject) => {
+        superAgent("http://localhost:3000/test")
+          .set(
+            "cookie",
+            'com.wm.reflector="wmlspartner:abcd@lastupd:456@reflectorid:qwerty";AID=wmlspartner%3Dwmtlabs%3Areflectorid%3D0085370%3Alastupd%3D146984;test=bar;test2=bar2;test3=bar3;test4=bar4;test5=;%28$%3Benc%3A%29=(i%24xx%3Ax%3B);----={%22test%22%3A%2212345%22%2C%22flag%22%3Atrue};'
+          ) // eslint-disable-line
+          .end(err => {
+            return err ? reject(err) : resolve();
+          });
+      });
+    });
+  });
+
+  it("should get cookie by matching substring", () => {
+    const handler = (request, reply) => {
+      try {
+        expect(Cookies.get("te", { matchSubStr: true, request })).to.deep.equal({
+          test: "bar",
+          test2: "bar2",
+          test3: "bar3",
+          test4: "bar4",
+          test5: ""
+        });
+        expect(Cookies.get("!$key", { skipEncoding: true, request })).to.equal("(i$xx:x;)");
+        expect(Cookies.get("!$k", { matchSubStr: true, request })).to.deep.equal({
+          "!$key": "(i$xx:x;)"
+        });
+        expect(
+          Cookies.get("%25!$foo", { matchSubStr: true, skipEncoding: true, request })
+        ).to.deep.equal({ "%25!$foo-key": "%%%%" });
+        expect(Cookies.get("----", { request })).to.equal(`{"test":"12345","flag":true}`);
+
+        expect(Cookies.get("qwer", { request })).to.be.undefined;
+        expect(Cookies.get("AID", { request })).to.equal(
+          "wmlspartner=wmtlabs:reflectorid=0085370:lastupd=146984"
+        );
+        expect(Cookies.get("com.wm.reflector", { request })).to.equal(
+          "wmlspartner:abcd@lastupd:456@reflectorid:qwerty"
+        );
+        reply({ now: Date.now() });
+      } catch (err) {
+        reply(err.toString()).code(500);
+      }
+    };
+
+    const serverConfig = makeConfig();
+
+    return startServer(serverConfig).then(server => {
+      server.route({
+        method: "get",
+        path: "/test",
+        handler
+      });
+
+      return new Promise((resolve, reject) => {
+        superAgent("http://localhost:3000/test")
+          .set(
+            "cookie",
+            'com.wm.reflector="wmlspartner:abcd@lastupd:456@reflectorid:qwerty";AID=wmlspartner%3Dwmtlabs%3Areflectorid%3D0085370%3Alastupd%3D146984;test=bar;test2=bar2;test3=bar3;test4=bar4;test5=;!$key=(i%24xx%3Ax%3B);----={%22test%22%3A%2212345%22%2C%22flag%22%3Atrue};%25!$foo-key=%%%%'
+          ) // eslint-disable-line
+          .end(err => {
+            return err ? reject(err) : resolve();
+          });
+      });
+    });
+  });
+
+  it("should throw when request not passed in options", () => {
+    expect(() => Cookies.set("test", "value")).to.throw();
+  });
+});
diff --git a/packages/electrode-cookies/xclap.js b/packages/electrode-cookies/xclap.js
new file mode 100644
index 000000000..ea371779c
--- /dev/null
+++ b/packages/electrode-cookies/xclap.js
@@ -0,0 +1 @@
+require("electrode-archetype-njs-module-dev")();
diff --git a/packages/electrode-react-context/.eslintrc b/packages/electrode-react-context/.eslintrc
new file mode 100644
index 000000000..5f6ea6525
--- /dev/null
+++ b/packages/electrode-react-context/.eslintrc
@@ -0,0 +1,3 @@
+---
+extends:
+  - "./node_modules/electrode-archetype-njs-module-dev/config/eslint/.eslintrc-node"
diff --git a/packages/electrode-react-context/.npmignore b/packages/electrode-react-context/.npmignore
new file mode 100644
index 000000000..c318ddda3
--- /dev/null
+++ b/packages/electrode-react-context/.npmignore
@@ -0,0 +1,229 @@
+
+# Created by https://www.gitignore.io/api/osx,node
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+### Vim template
+[._]*.s[a-w][a-z]
+[._]s[a-w][a-z]
+*.un~
+Session.vim
+.netrwhist
+*~
+### GitBook template
+# Node rules:
+## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+## Dependency directory
+## Commenting this out is preferred by some people, see
+## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Book build output
+_book
+
+# eBook build output
+*.epub
+*.mobi
+*.pdf
+### TortoiseGit template
+# Project-level settings
+/.tgitconfig
+### Xcode template
+# Xcode
+#
+# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
+
+## Build generated
+build/
+DerivedData
+
+## Various settings
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+
+## Other
+*.xccheckout
+*.moved-aside
+*.xcuserstate
+### Emacs template
+# -*- mode: gitignore; -*-
+*~
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+*.elc
+auto-save-list
+tramp
+.\#*
+
+# Org-mode
+.org-id-locations
+*_archive
+
+# flymake-mode
+*_flymake.*
+
+# eshell files
+/eshell/history
+/eshell/lastdir
+
+# elpa packages
+/elpa/
+
+# reftex files
+*.rel
+
+# AUCTeX auto folder
+/auto/
+
+# cask packages
+.cask/
+### OSX template
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
+
+*.iml
+
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+
+## File-based project format:
+*.ipr
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+/xclap.js
+/.npmignore
+.nyc_output
+/test
+/.eslintrc
+
diff --git a/packages/electrode-react-context/README.md b/packages/electrode-react-context/README.md
new file mode 100644
index 000000000..624f1ba0b
--- /dev/null
+++ b/packages/electrode-react-context/README.md
@@ -0,0 +1,99 @@
+# Electrode React Context
+
+Higher order React component used to add an `app` object property to the global React context. Each Electrode application can pass arbitrary props to make available to components via `this.context.app` but at a minimum should include the hapi `request`.
+
+## Installing
+
+```
+npm install electrode-react-context --save
+```
+
+## Usage
+
+The typical way to use the context is when contructing the app router. The `electrodeContext` wrapper is used to construct the parent Route component.
+
+~~~js
+import electrodeContext from "electrode-react-context";
+import uiConfig from "electrode-ui-config";
+
+// This function is invoked both on client and server. The `request` will be undefined on the client.
+export const createRoutes = (request) => {
+  return (
+    <Route path={uiConfig.fullPath()} component={electrodeContext(Page, {request})}>
+      <IndexRoute component={Home}/>
+      <Route path={uiConfig.fullPath("/status")} component={Status}/>
+      <Route path={uiConfig.fullPath("/store")} component={Store}/>
+      <Route path={uiConfig.fullPath("/analytics")} component={AnalyticsDemo}/>
+      <Route path={uiConfig.fullPath("/cookies")} component={CookiesDemo}/>
+    </Route>
+  );
+};
+~~~
+
+Now all components in the app have access to an `app` property in the global context. This should be passed as the last argument to calls to functions exported by `electrode-ui-logger` and `electrode-cookies`. The `app.request` is needed for server-rendering since continuation local storage has been deprecated. By always passing in `app` component authors need not worry whether their component is rendering client or server-side.
+
+~~~js
+import log from "electrode-ui-logger";
+import config from "electrode-ui-config";
+
+export class Home extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    log.info("Rendering Home component", this.context.app);
+    return (
+      <Well padded filled={false}>
+        <Button onClick={() => log.info("Hi button clicked!", this.context.app)}>
+          Hi! {config.ui.name} {config.ui.env}
+        </Button>
+      </Well>
+    );
+  }
+}
+
+Home.contextTypes = {
+  app: PropTypes.object
+};
+~~~
+
+### Functional Components
+
+Context is also available to functional components as the second argument. The `Home` component above could be re-written as:
+
+~~~js
+export const Home = (props, {app}) => {
+  log.info("Rendering Home component", app);
+  return (
+    <Well padded filled={false}>
+      <Button onClick={() => log.info("Hi button clicked!", app)}>
+        Hi! {config.ui.name} {config.ui.env}
+      </Button>
+    </Well>
+  );
+};
+~~~
+
+## Working with cookies
+
+The `electrode-cookies` module requires the `request` option when being invoked on the server. Since the `app` has the `request`, it can act as the `options` argument:
+
+~~~js
+import Cookies from "electrode-cookies";
+
+const CookieComponent = (props, {app}) => {
+  const cookieValue = Cookies.get("cookieName", app);
+  return <div>{cookieValue}</div>;
+};
+
+CookieComponent.contextTypes = {
+  app: PropTypes.object
+};
+~~~
+
+If you need to pass additional cookie specific options, you could do something like this:
+
+~~~js
+Cookies.get("cookieName", Object.assign({}, app, { matchSubStr: true }));
+~~~
\ No newline at end of file
diff --git a/packages/electrode-react-context/lib/context-provider.js b/packages/electrode-react-context/lib/context-provider.js
new file mode 100644
index 000000000..88c436b70
--- /dev/null
+++ b/packages/electrode-react-context/lib/context-provider.js
@@ -0,0 +1,26 @@
+"use strict";
+/* eslint-disable no-var */
+
+var React = require("react");
+var PropTypes = require("prop-types");
+var createReactClass = require("create-react-class");
+
+// This function is called both during SSR (from server/app.js) and CSR (client/app.jsx). The
+// request arg will be undefined when called during CSR.
+var contextProvider = function(Component, appContext) {
+  var ContextProvider = createReactClass({
+    childContextTypes: {
+      app: PropTypes.object
+    },
+    getChildContext: function() {
+      return {app: appContext};
+    },
+    render: function() {
+      return React.createElement(Component, this.props);
+    }
+  });
+
+  return ContextProvider;
+};
+
+module.exports = contextProvider;
diff --git a/packages/electrode-react-context/package.json b/packages/electrode-react-context/package.json
new file mode 100644
index 000000000..954b92d66
--- /dev/null
+++ b/packages/electrode-react-context/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "electrode-react-context",
+  "version": "1.0.0",
+  "description": "React HoC for providing app in the global context",
+  "main": "lib/context-provider.js",
+  "scripts": {
+    "test": "clap check",
+    "format": "prettier --write --print-width 100 *.js `find . -type d -d 1 -exec echo '{}/**/*.js' \\; | egrep -v '(/node_modules/|/dist/|/coverage/)'`"
+  },
+  "keywords": [
+    "react",
+    "context",
+    "electrode"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/electrode-io/electrode.git"
+  },
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": "^15.0.0 || ^0.14.0",
+    "react-dom": "^15.0.0 || ^0.14.0"
+  },
+  "dependencies": {
+    "create-react-class": "^15.6.0",
+    "prop-types": "^15.5.10"
+  },
+  "devDependencies": {
+    "electrode-archetype-njs-module-dev": "^2.2.0",
+    "react": "^15.0.0 || ^0.14.8",
+    "react-dom": "^15.0.0 || ^0.14.0"
+  },
+  "nyc": {
+    "all": true,
+    "check-coverage": true,
+    "statements": 97.26,
+    "branches": 94.14,
+    "functions": 97.89,
+    "lines": 97.2,
+    "cache": true,
+    "reporter": [
+      "lcov",
+      "text",
+      "text-summary"
+    ],
+    "exclude": [
+      "coverage",
+      "*clap.js",
+      "gulpfile.js",
+      "test"
+    ]
+  }
+}
diff --git a/packages/electrode-react-context/test/.eslintrc b/packages/electrode-react-context/test/.eslintrc
new file mode 100644
index 000000000..e9da91c41
--- /dev/null
+++ b/packages/electrode-react-context/test/.eslintrc
@@ -0,0 +1,3 @@
+---
+extends:
+  - "../node_modules/electrode-archetype-njs-module-dev/config/eslint/.eslintrc-test"
\ No newline at end of file
diff --git a/packages/electrode-react-context/test/mocha.opts b/packages/electrode-react-context/test/mocha.opts
new file mode 100644
index 000000000..3caade9dd
--- /dev/null
+++ b/packages/electrode-react-context/test/mocha.opts
@@ -0,0 +1,2 @@
+--require node_modules/electrode-archetype-njs-module-dev/config/test/setup.js
+--recursive
\ No newline at end of file
diff --git a/packages/electrode-react-context/test/spec/context-provider.spec.js b/packages/electrode-react-context/test/spec/context-provider.spec.js
new file mode 100644
index 000000000..0d48ba797
--- /dev/null
+++ b/packages/electrode-react-context/test/spec/context-provider.spec.js
@@ -0,0 +1,25 @@
+"use strict";
+
+const React = require("react");
+const PropTypes = require("prop-types");
+const ReactDOMServer = require("react-dom/server");
+const contextProvider = require("../../lib/context-provider");
+
+describe("contextProvider", () => {
+  it("exposes the app in React context", () => {
+    class Test extends React.Component {
+      render() {
+        return React.createElement("div", null, this.context.app.name);
+      }
+    }
+
+    Test.contextTypes = {
+      app: PropTypes.object
+    };
+
+    const rendered = ReactDOMServer.renderToStaticMarkup(
+      React.createElement(contextProvider(Test, {name: "walmart"})));
+
+    expect(rendered).to.equal("<div>walmart</div>");
+  });
+});
diff --git a/packages/electrode-react-context/xclap.js b/packages/electrode-react-context/xclap.js
new file mode 100644
index 000000000..dff8954c4
--- /dev/null
+++ b/packages/electrode-react-context/xclap.js
@@ -0,0 +1,2 @@
+"use strict";
+require("electrode-archetype-njs-module-dev")();
\ No newline at end of file
diff --git a/packages/electrode-react-webapp/.gitignore b/packages/electrode-react-webapp/.gitignore
new file mode 100644
index 000000000..600d2d33b
--- /dev/null
+++ b/packages/electrode-react-webapp/.gitignore
@@ -0,0 +1 @@
+.vscode
\ No newline at end of file
diff --git a/packages/electrode-react-webapp/.vscode/settings.json b/packages/electrode-react-webapp/.vscode/settings.json
new file mode 100644
index 000000000..f70c630ee
--- /dev/null
+++ b/packages/electrode-react-webapp/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "prettier.printWidth": 100
+}
diff --git a/packages/electrode-react-webapp/lib/index.html b/packages/electrode-react-webapp/lib/index.html
index ed1da89e8..880970841 100644
--- a/packages/electrode-react-webapp/lib/index.html
+++ b/packages/electrode-react-webapp/lib/index.html
@@ -6,11 +6,11 @@
     {{META_TAGS}}
     {{PAGE_TITLE}}
     {{CRITICAL_CSS}}
-    {{PREFETCH_BUNDLES}}
     {{WEBAPP_HEADER_BUNDLES}}
 </head>
 <body>
 <div class="js-content">{{SSR_CONTENT}}</div>
+{{PREFETCH_BUNDLES}}
 {{WEBAPP_BODY_BUNDLES}}
 <script>if (window.webappStart) webappStart();</script>
 <noscript>
diff --git a/packages/electrode-react-webapp/test/spec/index.spec.js b/packages/electrode-react-webapp/test/spec/index.spec.js
index cc0ecfad9..027c7f058 100644
--- a/packages/electrode-react-webapp/test/spec/index.spec.js
+++ b/packages/electrode-react-webapp/test/spec/index.spec.js
@@ -14,6 +14,11 @@ describe("Test electrode-react-webapp", () => {
 
   const getConfig = () => {
     return {
+      connections: {
+        default: {
+          port: 0
+        }
+      },
       plugins: {
         "./lib/hapi/index": {
           options: {
diff --git a/packages/electrode-ui-config/.eslintrc b/packages/electrode-ui-config/.eslintrc
new file mode 100644
index 000000000..5f6ea6525
--- /dev/null
+++ b/packages/electrode-ui-config/.eslintrc
@@ -0,0 +1,3 @@
+---
+extends:
+  - "./node_modules/electrode-archetype-njs-module-dev/config/eslint/.eslintrc-node"
diff --git a/packages/electrode-ui-config/.npmignore b/packages/electrode-ui-config/.npmignore
new file mode 100644
index 000000000..c318ddda3
--- /dev/null
+++ b/packages/electrode-ui-config/.npmignore
@@ -0,0 +1,229 @@
+
+# Created by https://www.gitignore.io/api/osx,node
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+### Vim template
+[._]*.s[a-w][a-z]
+[._]s[a-w][a-z]
+*.un~
+Session.vim
+.netrwhist
+*~
+### GitBook template
+# Node rules:
+## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+## Dependency directory
+## Commenting this out is preferred by some people, see
+## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Book build output
+_book
+
+# eBook build output
+*.epub
+*.mobi
+*.pdf
+### TortoiseGit template
+# Project-level settings
+/.tgitconfig
+### Xcode template
+# Xcode
+#
+# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
+
+## Build generated
+build/
+DerivedData
+
+## Various settings
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+
+## Other
+*.xccheckout
+*.moved-aside
+*.xcuserstate
+### Emacs template
+# -*- mode: gitignore; -*-
+*~
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+*.elc
+auto-save-list
+tramp
+.\#*
+
+# Org-mode
+.org-id-locations
+*_archive
+
+# flymake-mode
+*_flymake.*
+
+# eshell files
+/eshell/history
+/eshell/lastdir
+
+# elpa packages
+/elpa/
+
+# reftex files
+*.rel
+
+# AUCTeX auto folder
+/auto/
+
+# cask packages
+.cask/
+### OSX template
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
+
+*.iml
+
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+
+## File-based project format:
+*.ipr
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+/xclap.js
+/.npmignore
+.nyc_output
+/test
+/.eslintrc
+
diff --git a/packages/electrode-ui-config/README.md b/packages/electrode-ui-config/README.md
new file mode 100644
index 000000000..eeca522cf
--- /dev/null
+++ b/packages/electrode-ui-config/README.md
@@ -0,0 +1,131 @@
+# electrode-ui-config
+
+Makes the `ui` section from your app config and the filtered CCM settings available to your UI code. It works isomorphically.
+
+## Install
+
+```
+npm install electrode-ui-config --save
+```
+
+## Usage
+
+To access the `ui` section from your app config, use `electrode-ui-config.ui`.
+
+For example.
+
+```js
+import Config from "electrode-ui-config";
+
+export default class MyComponent extends React.Component {
+  render() {
+    if (Config.ui.doThis) {
+      return <This></This>
+    } else {
+      return <That></That>
+    }
+  }
+}
+```
+
+To access the filtered CCM from, use `electrode-ui-config.ccm`.
+
+For example.
+
+```js
+import Config from "electrode-ui-config";
+
+export default class MyComponent extends React.Component {
+  render() {
+    const ccmSetting = Config.ccm.someConfig["setting-key-1"];
+  }
+}
+```
+
+## Utilities
+
+This module provides the following utilities:
+
+### [fullPath](#fullpath)
+
+`fullPath(path)`
+
+It will join `config.ui.basePath` with `path` to make a full UI route path.
+
+Params
+
+  - `path` - the path to join with basePath
+
+Returns
+
+  - A full UI route path with basePath.
+  - if `path` is empty, then `basePath` is returned.
+
+### fullApiPath
+
+`fullApiPath(path)`
+
+Joins `config.ui.basePath`, `config.ui.apiPath` and `path` to make a full API route path.  
+`basePath` defaults to `""`, `apiPath` defaults to `"/api"`.
+
+Params
+
+  - `path` - the path to join with basePath and apiPath
+
+Returns
+
+  - A full API route path. If `path` is empty, then `/<basePath>/<apiPath>` is returned.
+
+## How it works
+
+This package utilize a webpack feature which looks at the `browser` field in `package.json` and use that when bundling.
+
+When running on server side, NodeJS require looks at the `main` field, which points to another file.
+
+## Other Requirements
+
+The client side simply uses `window.config` to retrieve the config values.  Your application needs to be an Electrode app that uses [electrode-server] and [electrode-react-webapp], which sends `ui` section from your app config to the browser in the Index template.
+
+See [electrode server configuration] for details on setting up config files for your app.
+
+### Configuration files
+
+Sample:
+
+```js
+{
+  connections: {
+    ...
+  },
+  plugins: {
+    ...
+  },
+  ui: {
+
+  }
+}
+```
+
+[electrode-server]: https://github.com/electrode-io/electrode-server
+[electrode-react-webapp]: https://github.com/electrode-io/electrode/tree/master/packages/electrode-react-webapp
+[electrode server configuration]: https://github.com/electrode-io/electrode-server#configuration
+
+
+## Server side render specific config
+
+Occasionally apps or components need access to different config on server and client. To do this,
+add a `ssrUi` property to the root level of the config object:
+
+```js
+{
+  ...
+  ssrUi {
+    foo: "ServerOnlyValue"
+  },
+  ui: {
+    foo: "ClientOnlyValue"
+  }
+}
+```
+
+`ssrUi` properties will overwrite any matching properties defined in `ui`. Isomorphic code can use `Config.ui` and properties defined in both `ssrUi` and `ui` will only be available in the respective environments.
diff --git a/packages/electrode-ui-config/hapi-plugin.js b/packages/electrode-ui-config/hapi-plugin.js
new file mode 100644
index 000000000..d1855885e
--- /dev/null
+++ b/packages/electrode-ui-config/hapi-plugin.js
@@ -0,0 +1,16 @@
+"use strict";
+
+const uiConfig = require("./lib/index");
+
+function uiConfigRegister(server, options, next) {
+  uiConfig._server = server;
+
+  next();
+}
+
+uiConfigRegister.attributes = {
+  name: "ui-config",
+  version: "1.0.0"
+};
+
+module.exports = uiConfigRegister;
diff --git a/packages/electrode-ui-config/lib/csindex.js b/packages/electrode-ui-config/lib/csindex.js
new file mode 100644
index 000000000..861166c4e
--- /dev/null
+++ b/packages/electrode-ui-config/lib/csindex.js
@@ -0,0 +1,5 @@
+/* eslint-disable */
+var config = window._wml && window._wml.config;
+module.exports = Object.assign({}, require("./ui-config")(config), {
+  ccm: config && config.ccm || {}
+});
\ No newline at end of file
diff --git a/packages/electrode-ui-config/lib/index.js b/packages/electrode-ui-config/lib/index.js
new file mode 100644
index 000000000..f60e13768
--- /dev/null
+++ b/packages/electrode-ui-config/lib/index.js
@@ -0,0 +1,29 @@
+"use strict";
+
+const defaultsDeep = require("lodash/defaultsDeep");
+const get = require("lodash/get");
+const uiConfig = require("./ui-config");
+
+const _config = {
+  getCcm: function (request) {
+    const store = get(request, "app.ccm._store", _config.server.app.ccm);
+    return store || {};
+  }
+};
+
+Object.defineProperty(_config, "_server", {
+  set: (value) => {
+    _config.server = value;
+    const config = value.app && value.app.config || {};
+    const mergedConfig = defaultsDeep({}, config.ssrUi, config.ui);
+    Object.assign(_config, uiConfig({ui: mergedConfig}));
+  }
+});
+
+Object.defineProperty(_config, "ccm", {
+  get: () => {
+    throw new Error("Getter property deprecated. Invoke uiConfig.getCcm(request) instead");
+  }
+});
+
+module.exports = _config;
diff --git a/packages/electrode-ui-config/lib/ui-config.js b/packages/electrode-ui-config/lib/ui-config.js
new file mode 100644
index 000000000..e0e19254f
--- /dev/null
+++ b/packages/electrode-ui-config/lib/ui-config.js
@@ -0,0 +1,33 @@
+/* eslint-disable */
+
+function join(paths) {
+  var x = paths.filter(function (x) {
+    return x
+  }).join("/");
+
+  if (paths[0] === "/" && x === "/") { // returning "" for [ "/", "", "", ... ]
+    return "";
+  }
+
+  return x.match(/^\/+$/) ? // avoid returning "" for [ "/", "/", ... ]
+    "/"
+    : x.replace(/\/+/g, "/").replace(/\/$/, ""); // remove multiple /'s and trailing /
+}
+
+module.exports = function (config) {
+  config = config || {};
+  var ui = config && config.ui || {};
+  var expoCookies = config && config.expoCookies || {};
+  var basePath = ui.basePath || "";
+  var apiPath = ui.apiPath || "/api";
+  return {
+    ui: ui,
+    expoCookies: expoCookies,
+    fullPath: function (path) {
+      return join([basePath, path]);
+    },
+    fullApiPath: function (path) {
+      return join([basePath, apiPath, path]);
+    }
+  };
+};
diff --git a/packages/electrode-ui-config/package.json b/packages/electrode-ui-config/package.json
new file mode 100644
index 000000000..4e5c39c0b
--- /dev/null
+++ b/packages/electrode-ui-config/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "electrode-ui-config",
+  "version": "1.0.0",
+  "description": "Isomorphic UI config",
+  "main": "lib/index.js",
+  "browser": "lib/csindex.js",
+  "scripts": {
+    "test": "clap check",
+    "format": "prettier --write --print-width 100 *.js `find . -type d -d 1 -exec echo '{}/**/*.js' \\; | egrep -v '(/node_modules/|/dist/|/coverage/)'`"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/electrode-io/electrode.git"
+  },
+  "keywords": [],
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "electrode-archetype-njs-module-dev": "^2.2.0"
+  },
+  "dependencies": {
+    "bluebird": "^2.11.0",
+    "lodash": "^4.13.1"
+  },
+  "nyc": {
+    "all": true,
+    "reporter": [
+      "lcov",
+      "text",
+      "text-summary"
+    ],
+    "exclude": [
+      "coverage",
+      "*clap.js",
+      "gulpfile.js",
+      "dist",
+      "test"
+    ]
+  }
+}
diff --git a/packages/electrode-ui-config/test/.eslintrc b/packages/electrode-ui-config/test/.eslintrc
new file mode 100644
index 000000000..e9da91c41
--- /dev/null
+++ b/packages/electrode-ui-config/test/.eslintrc
@@ -0,0 +1,3 @@
+---
+extends:
+  - "../node_modules/electrode-archetype-njs-module-dev/config/eslint/.eslintrc-test"
\ No newline at end of file
diff --git a/packages/electrode-ui-config/test/mocha.opts b/packages/electrode-ui-config/test/mocha.opts
new file mode 100644
index 000000000..022f99b50
--- /dev/null
+++ b/packages/electrode-ui-config/test/mocha.opts
@@ -0,0 +1,2 @@
+--require node_modules/electrode-archetype-njs-module-dev/config/test/setup.js
+--recursive
diff --git a/packages/electrode-ui-config/test/spec/csindex.spec.js b/packages/electrode-ui-config/test/spec/csindex.spec.js
new file mode 100644
index 000000000..27d7ae5b9
--- /dev/null
+++ b/packages/electrode-ui-config/test/spec/csindex.spec.js
@@ -0,0 +1,26 @@
+"use strict";
+
+const chai = require("chai");
+const expect = chai.expect;
+
+describe("clientUiConfig", function () {
+  it("should provide ui config for client", function () {
+    global.window = {
+      _wml: {
+        config: {
+          ui: {
+            basePath: "/test"
+          },
+          ccm: {
+          }
+        }
+      }
+    };
+
+    const uiConfig = require("../../lib/csindex");
+    expect(uiConfig.fullPath()).to.equal("/test");
+    expect(uiConfig.fullPath("/status")).to.equal("/test/status");
+    expect(uiConfig.ui).to.be.ok;
+    expect(uiConfig.ccm).to.be.ok;
+  });
+});
diff --git a/packages/electrode-ui-config/test/spec/index.spec.js b/packages/electrode-ui-config/test/spec/index.spec.js
new file mode 100644
index 000000000..33586c293
--- /dev/null
+++ b/packages/electrode-ui-config/test/spec/index.spec.js
@@ -0,0 +1,47 @@
+"use strict";
+
+process.env.NODE_CONFIG_DIR = "test/config/default";
+
+const chai = require("chai");
+const expect = chai.expect;
+const _ = require("lodash");
+const uiConfig = require("../../lib");
+
+describe("config", function () {
+  let req;
+
+  beforeEach(() => {
+    req = {};
+    uiConfig._server = {
+      app: {
+        config: {
+          ui: {
+            basePath: "/test"
+          }
+        }
+      }
+    };
+    _.set(req, "app.ccm._store.test", "12345");
+  });
+
+  it("should have ui", () => {
+    expect(uiConfig.ui).to.be.ok;
+    expect(uiConfig.ui.basePath).to.equal("/test");
+  });
+
+  it("should throw error if uiConfig.ccm accessed", () => {
+    expect(() => { return uiConfig.ccm;}).to.throw();
+  });
+
+  describe("fullPath", function () {
+    it("should return '/test' for undefined or empty ''", () => {
+      expect(uiConfig.fullPath()).to.equal("/test");
+      expect(uiConfig.fullPath("")).to.equal("/test");
+    });
+  });
+
+  it("should have ccm", () => {
+    expect(uiConfig.getCcm(req)).to.be.ok;
+  });
+});
+
diff --git a/packages/electrode-ui-config/test/spec/ui-config.spec.js b/packages/electrode-ui-config/test/spec/ui-config.spec.js
new file mode 100644
index 000000000..8970dbc76
--- /dev/null
+++ b/packages/electrode-ui-config/test/spec/ui-config.spec.js
@@ -0,0 +1,140 @@
+"use strict";
+
+process.env.NODE_CONFIG_DIR = "test/config/default";
+const uiConfig = require("../../lib/ui-config");
+
+const chai = require("chai");
+const expect = chai.expect;
+
+describe("uiConfig", function () {
+  it("should create fullPath w/o trailing / for empty basePath", function () {
+    // [ basePath, path ]
+    // [ "", undefined ] => ""
+    // [ "", "" ] => ""
+    // [ "", "/" ] => "/"
+    // [ "", "/abc1" ] => "/abc1"
+    // [ "", "/abc2/" ] => "/abc2"
+    // [ "", "abc3" ] => "abc3"
+    // [ "", "abc4/" ] => "abc4"
+    // [ "", "/abc5/bar" ] => "/abc5/bar"
+    // [ "", "abc6/bar" ] => "abc6/bar"
+
+    const config = uiConfig({ui: {basePath: ""}});
+    expect(config.fullPath()).to.equal("");
+    expect(config.fullPath("")).to.equal("");
+    expect(config.fullPath("/")).to.equal("/");
+    expect(config.fullPath("/abc1")).to.equal("/abc1");
+    expect(config.fullPath("/abc2/")).to.equal("/abc2");
+    expect(config.fullPath("abc3")).to.equal("abc3");
+    expect(config.fullPath("abc4/")).to.equal("abc4");
+    expect(config.fullPath("/abc5/bar")).to.equal("/abc5/bar");
+    expect(config.fullPath("abc6/bar")).to.equal("abc6/bar");
+  });
+
+  it("should create fullPath w/o trailing / for basePath /", function () {
+    // [ basePath, path ]
+    // [ "/", undefined ] => ""
+    // [ "/", "" ] => ""
+    // [ "/", "/" ] => "/"
+    // [ "/", "/abc1" ] => "/abc1"
+    // [ "/", "/abc2/" ] => "/abc2"
+    // [ "/", "abc3" ] => "/abc3"
+    // [ "/", "abc4/" ] => "/abc4"
+    // [ "/", "/abc5/bar" ] => "/abc5/bar"
+    // [ "/", "abc6/bar" ] => "/abc6/bar"
+
+    const config = uiConfig({ui: {basePath: "/"}});
+    expect(config.fullPath()).to.equal("");
+    expect(config.fullPath("")).to.equal("");
+    expect(config.fullPath("/")).to.equal("/");
+    expect(config.fullPath("/abc1")).to.equal("/abc1");
+    expect(config.fullPath("/abc2/")).to.equal("/abc2");
+    expect(config.fullPath("abc3")).to.equal("/abc3");
+    expect(config.fullPath("abc4/")).to.equal("/abc4");
+    expect(config.fullPath("/abc5/bar")).to.equal("/abc5/bar");
+    expect(config.fullPath("abc6/bar")).to.equal("/abc6/bar");
+  });
+
+  it("should create fullPath w/o trailing / for basePath /test", function () {
+    // [ basePath, path ]
+    // [ "/test/", undefined ] => "/test"
+    // [ "/test/", "" ] => "/test"
+    // [ "/test/", "/" ] => "/test"
+    // [ "/test/", "/abc1" ] => "/test/abc1"
+    // [ "/test/", "/abc2/" ] => "/test/abc2"
+    // [ "/test/", "abc3" ] => "/test/abc3"
+    // [ "/test/", "abc4/" ] => "/test/abc4"
+    // [ "/test/", "/abc5/bar" ] => "/test/abc5/bar"
+    // [ "/test/", "abc6/bar" ] => "/test/abc6/bar"
+
+    const config = uiConfig({ui: {basePath: "/test"}});
+    expect(config.fullPath()).to.equal("/test");
+    expect(config.fullPath("")).to.equal("/test");
+    expect(config.fullPath("/")).to.equal("/test");
+    expect(config.fullPath("/abc1")).to.equal("/test/abc1");
+    expect(config.fullPath("/abc2/")).to.equal("/test/abc2");
+    expect(config.fullPath("abc3")).to.equal("/test/abc3");
+    expect(config.fullPath("abc4/")).to.equal("/test/abc4");
+    expect(config.fullPath("/abc5/bar")).to.equal("/test/abc5/bar");
+    expect(config.fullPath("abc6/bar")).to.equal("/test/abc6/bar");
+  });
+
+  it("should create fullPath w/o trailing / for basePath /test/", function () {
+    // [ basePath, path ]
+    // [ "/test/", undefined ] => "/test"
+    // [ "/test/", "" ] => "/test"
+    // [ "/test/", "/" ] => "/test"
+    // [ "/test/", "/abc1" ] => "/test/abc1"
+    // [ "/test/", "/abc2/" ] => "/test/abc2"
+    // [ "/test/", "abc3" ] => "/test/abc3"
+    // [ "/test/", "abc4/" ] => "/test/abc4"
+    // [ "/test/", "/abc5/bar" ] => "/test/abc5/bar"
+    // [ "/test/", "abc6/bar" ] => "/test/abc6/bar"
+
+    const config = uiConfig({ui: {basePath: "/test/"}});
+    expect(config.fullPath()).to.equal("/test");
+    expect(config.fullPath("")).to.equal("/test");
+    expect(config.fullPath("/")).to.equal("/test");
+    expect(config.fullPath("/abc1")).to.equal("/test/abc1");
+    expect(config.fullPath("/abc2/")).to.equal("/test/abc2");
+    expect(config.fullPath("abc3")).to.equal("/test/abc3");
+    expect(config.fullPath("abc4/")).to.equal("/test/abc4");
+    expect(config.fullPath("/abc5/bar")).to.equal("/test/abc5/bar");
+    expect(config.fullPath("abc6/bar")).to.equal("/test/abc6/bar");
+  });
+
+  it("should remove trailing / from fullApiPath to create fullApiPath", function () {
+    const config = uiConfig({ui: {basePath: "/test/", apiPath: "/testApi"}});
+
+    expect(config.fullApiPath()).to.equal("/test/testApi");
+    expect(config.fullApiPath("")).to.equal("/test/testApi");
+    expect(config.fullApiPath("/")).to.equal("/test/testApi");
+    expect(config.fullApiPath("/abc")).to.equal("/test/testApi/abc");
+    expect(config.fullApiPath("/abc/")).to.equal("/test/testApi/abc");
+    expect(config.fullApiPath("abc")).to.equal("/test/testApi/abc");
+    expect(config.fullApiPath("abc/")).to.equal("/test/testApi/abc");
+    expect(config.fullApiPath("/abc/bar")).to.equal("/test/testApi/abc/bar");
+    expect(config.fullApiPath("abc/bar")).to.equal("/test/testApi/abc/bar");
+
+  });
+
+
+  it("should handle missing apiPath", function () {
+    const config = uiConfig({ui: {basePath: "/"}});
+
+    expect(config.fullApiPath()).to.equal("/api");
+    expect(config.fullApiPath("")).to.equal("/api");
+    expect(config.fullApiPath("/")).to.equal("/api");
+    expect(config.fullApiPath("/abc")).to.equal("/api/abc");
+    expect(config.fullApiPath("/abc/")).to.equal("/api/abc");
+    expect(config.fullApiPath("abc")).to.equal("/api/abc");
+    expect(config.fullApiPath("abc/")).to.equal("/api/abc");
+    expect(config.fullApiPath("/abc/bar")).to.equal("/api/abc/bar");
+    expect(config.fullApiPath("abc/bar")).to.equal("/api/abc/bar");
+
+  });
+
+  it("should guard against empty config", function () {
+    expect(uiConfig, undefined).to.not.throw();
+  });
+});
diff --git a/packages/electrode-ui-config/xclap.js b/packages/electrode-ui-config/xclap.js
new file mode 100644
index 000000000..b54223352
--- /dev/null
+++ b/packages/electrode-ui-config/xclap.js
@@ -0,0 +1,3 @@
+"use strict";
+
+require("electrode-archetype-njs-module-dev")();
diff --git a/packages/electrode-ui-logger/.eslintrc b/packages/electrode-ui-logger/.eslintrc
new file mode 100644
index 000000000..5f6ea6525
--- /dev/null
+++ b/packages/electrode-ui-logger/.eslintrc
@@ -0,0 +1,3 @@
+---
+extends:
+  - "./node_modules/electrode-archetype-njs-module-dev/config/eslint/.eslintrc-node"
diff --git a/packages/electrode-ui-logger/.npmignore b/packages/electrode-ui-logger/.npmignore
new file mode 100644
index 000000000..6d477b61d
--- /dev/null
+++ b/packages/electrode-ui-logger/.npmignore
@@ -0,0 +1,228 @@
+
+# Created by https://www.gitignore.io/api/osx,node
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+### Vim template
+[._]*.s[a-w][a-z]
+[._]s[a-w][a-z]
+*.un~
+Session.vim
+.netrwhist
+*~
+### GitBook template
+# Node rules:
+## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+## Dependency directory
+## Commenting this out is preferred by some people, see
+## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Book build output
+_book
+
+# eBook build output
+*.epub
+*.mobi
+*.pdf
+### TortoiseGit template
+# Project-level settings
+/.tgitconfig
+### Xcode template
+# Xcode
+#
+# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
+
+## Build generated
+build/
+DerivedData
+
+## Various settings
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+
+## Other
+*.xccheckout
+*.moved-aside
+*.xcuserstate
+### Emacs template
+# -*- mode: gitignore; -*-
+*~
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+*.elc
+auto-save-list
+tramp
+.\#*
+
+# Org-mode
+.org-id-locations
+*_archive
+
+# flymake-mode
+*_flymake.*
+
+# eshell files
+/eshell/history
+/eshell/lastdir
+
+# elpa packages
+/elpa/
+
+# reftex files
+*.rel
+
+# AUCTeX auto folder
+/auto/
+
+# cask packages
+.cask/
+### OSX template
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
+
+*.iml
+
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+
+## File-based project format:
+*.ipr
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+/xclap.js
+/.npmignore
+.nyc_output
+/test
+/.eslintrc
diff --git a/packages/electrode-ui-logger/README.md b/packages/electrode-ui-logger/README.md
new file mode 100644
index 000000000..0b54d6435
--- /dev/null
+++ b/packages/electrode-ui-logger/README.md
@@ -0,0 +1,75 @@
+<h1>electrode-ui-logger</h1>
+
+Log well and prosper. Happy Logging!
+
+This is a logger for UI code with an Electrode server as backend support.
+
+When your UI code is running on the browser, the logger will save up your logs and send them to the log API `{basePath}/api/logger` every **10** seconds.
+
+When your UI code is running on the server for SSR, the logger will call `request.log`. This is why the `request` option is required on the server.
+
+# Install
+
+```bash
+$ npm install electrode-ui-logger --save
+```
+
+# Logger usage
+
+The logging interface provides a simple api for generating developer logs.
+
+```js
+import logger from "electrode-ui-logger";
+
+logger.log(tags, data, options);
+
+```
+
+  * **`tags`** - array of strings used to specify log level, transport(s) and to otherwise categorize log entries
+
+  * **`data`** - string or object, for transmitting log message and other information
+
+  * **`options`** - object with additional options. Currently the only option is `request` which is required for SSR. For CSR the options are ignored and can be considered optional.
+
+Examples:
+
+```js
+logger.log(["error"], {err: "some error occurred"}, {request: req});
+
+logger.log("info", {msg: "hello, world"}); // you can use a string for tags directly 
+
+logger.info({msg: "info is hello world"});
+```
+
+Data objects have some special keys:
+
+  * `msg`: To include a log message along with other data  
+    
+    `logger.log(["info"], { a: "b", msg: "Log message" });`
+    
+  * `err`: Errors should be passed in using the `err` field:  
+    
+    `logger.log(["error"], { err: err });`
+
+Reserved keys (do not use as top-level keys in `data`): `tags`
+
+## Log levels
+
+* To set the log level, include it in the tags.
+* Valid log levels: `"trace", "debug", "info", "warn", "error", "fatal"`
+  (case insensitive)
+* If more than one level is specified, the higher level is used. E.g.
+  `logger.log(["info", "warn"], {})` will be logged at `warn`
+* Level defaults to `info` if none is specified
+
+## API Aliases
+
+These are the API aliases for different log levels:
+
+  * `logger.info(data, options)`
+  * `logger.warn(data, options)`
+  * `logger.fatal(data, options)`
+  * `logger.error(data, options)`
+  * `logger.debug(data, options)`
+  * `logger.trace(data, options)`
+  
\ No newline at end of file
diff --git a/packages/electrode-ui-logger/lib/csindex.js b/packages/electrode-ui-logger/lib/csindex.js
new file mode 100644
index 000000000..d4e0e20fa
--- /dev/null
+++ b/packages/electrode-ui-logger/lib/csindex.js
@@ -0,0 +1,84 @@
+"use strict";
+/*
+ * This file is intended to be executed by browsers only
+ */
+
+/* eslint-disable */
+
+var stringify = require('json-stringify-safe');
+var safeEventBuilder = require("./safe-event-builder");
+var Log = require("./logger");
+
+// Require the fetch polyfill
+require("whatwg-fetch");
+
+Log._stream = [];
+Log.fetch = window.fetch;
+Log.config = require("electrode-ui-config");
+
+Log.setFetch = function (_fetch) {
+  Log.fetch = _fetch;
+};
+
+Log.setConfig = function (_config) {
+  Log.config = _config;
+};
+
+Log._flush = function () {
+  if (Log._stream.length > 0) {
+    var payload = {
+      credentials: "include",
+      disableAnalytics: true,
+      method: "POST",
+      headers: {
+        "Accept": "application/json",
+        "Content-Type": "application/json"
+      },
+      body: stringify(Log._stream)
+    };
+
+    Log._stream = [];
+
+    return Log.fetch(Log.config.fullApiPath("/logger"), payload);
+  }
+};
+
+Log.setLogInterval = function (_interval) {
+  Log._interval = _interval;
+
+  if (Log._poll) {
+    clearInterval(Log._poll);
+  }
+
+  Log._poll = setInterval(Log._flush, Log._interval);
+};
+
+Log.setLogInterval(10000);
+
+Log._addLogMessage = function (data) {
+  Log._stream.push(data);
+};
+
+// The client logger has an extra endpoint for analytics events
+Log.addLogEvent = function (evt) {
+  if (evt._type === "log") {
+    Log._stream.push({
+      tags: [evt.level],
+      data: {
+        content: evt.content,
+        context: evt.context
+      }
+    });
+    if (process.env.NODE_ENV !== "production") {
+      console.log(["log", evt.level, evt.content]); // eslint-disable-line no-console
+    }
+  } else {
+    /* eslint-disable no-lonely-if */
+    if (process.env.NODE_ENV !== "production") {
+      console.log(evt); // eslint-disable-line no-console
+    }
+    Log._stream.push({tags: ["info"], data: safeEventBuilder(evt)});
+  }
+};
+
+module.exports = Log;
diff --git a/packages/electrode-ui-logger/lib/index.js b/packages/electrode-ui-logger/lib/index.js
new file mode 100644
index 000000000..98fcdcbef
--- /dev/null
+++ b/packages/electrode-ui-logger/lib/index.js
@@ -0,0 +1,36 @@
+"use strict";
+
+const Log = require("./logger");
+
+const fail = {
+  log: (tags, data) => {
+    console.error(`Failed to send logs: ${tags} ${data}.`); // eslint-disable-line
+  }
+};
+
+Log._addLogMessage = function (data, opts) {
+  if (!opts || !opts.request) {
+    fail.log("Missing request option");
+  }
+  opts.request.log(data.tags, data.data);
+};
+
+Log._flush = function (opts) {
+  if (!opts || !opts.request) {
+    fail("Missing request option");
+  }
+  opts.request.log(["warn"], "Log flushing is not valid on server"); //eslint-disable-line
+};
+
+Log.addLogEvent = function (evt, opts) {
+  if (!opts || !opts.request) {
+    fail("Missing request option");
+  }
+  opts.request.log(["warn"], "Logging analytics events not valid on server");
+};
+
+Log.setServer = function (server) {
+  this.server = server;
+};
+
+module.exports = Log;
diff --git a/packages/electrode-ui-logger/lib/logger.js b/packages/electrode-ui-logger/lib/logger.js
new file mode 100644
index 000000000..020fecbad
--- /dev/null
+++ b/packages/electrode-ui-logger/lib/logger.js
@@ -0,0 +1,48 @@
+/*
+ * This file is intended to be executed by browsers and server
+ */
+
+/* eslint-disable */
+
+var Log;
+
+function log(level, data, opts) {
+  Log._addLogMessage({tags: typeof level === "string" ? [level] : level, data: data}, opts);
+}
+
+function flush() {
+  Log._flush();
+}
+
+Log = {
+  info: function (data, opts) {
+    log(["info"], data, opts);
+  },
+
+  warn: function (data, opts) {
+    log(["warn"], data, opts);
+  },
+
+  fatal: function (data, opts) {
+    log(["fatal"], data, opts);
+  },
+
+  error: function (data, opts) {
+    log(["error"], data, opts);
+  },
+
+  debug: function (data, opts) {
+    log(["debug"], data, opts);
+  },
+
+  trace: function (data, opts) {
+    log(["trace"], data, opts);
+  },
+
+  log: log,
+
+  flush: flush
+};
+
+module.exports = Log;
+
diff --git a/packages/electrode-ui-logger/lib/safe-event-builder.js b/packages/electrode-ui-logger/lib/safe-event-builder.js
new file mode 100644
index 000000000..0b1da2eed
--- /dev/null
+++ b/packages/electrode-ui-logger/lib/safe-event-builder.js
@@ -0,0 +1,57 @@
+"use strict";
+/* eslint-env es5 */
+/* eslint-disable no-var */
+
+var omit = require("lodash.omit");
+var keys = require("lodash.keys");
+
+module.exports = function (evt) {
+  if (!(evt && keys(evt).length)) {
+    // We explicitly make a known "undefined" state for traceability
+    // rather than returning an empty object through the logging
+    return {
+      _type: "undefined",
+      state: "undefined"
+    };
+  }
+
+  if (evt._type === "fetch") {
+    var safeEvt = {
+      _type: evt._type,
+      state: evt.state
+    };
+
+    if (evt.extras && evt.extras.request) {
+      safeEvt.extras = {
+        request: evt.extras.request,
+        response: {
+          status: evt.extras.response ? evt.extras.response.status : null
+        },
+        options: evt.extras.options,
+        time: evt.extras.time
+      };
+    } else {
+      safeEvt.extras = {
+        response: {
+          status: null
+        }
+      };
+    }
+
+    return safeEvt;
+
+  } else {
+    var otherProps = null;
+    if (evt.props) {
+      otherProps = omit(evt.props, "children");
+    }
+    return {
+      _type: evt._type,
+      context: evt.context,
+      event: evt.event,
+      extras: evt.extras,
+      props: otherProps,
+      state: evt.state
+    };
+  }
+};
diff --git a/packages/electrode-ui-logger/package.json b/packages/electrode-ui-logger/package.json
new file mode 100644
index 000000000..3989f3447
--- /dev/null
+++ b/packages/electrode-ui-logger/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "electrode-ui-logger",
+  "version": "1.0.0",
+  "description": "Electrode Logging Utility for UI code",
+  "main": "./lib/index.js",
+  "browser": "./lib/csindex.js",
+  "private": false,
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "clap check",
+    "format": "prettier --write --print-width 100 *.js `find . -type d -d 1 -exec echo '{}/**/*.js' \\; | egrep -v '(/node_modules/|/dist/|/coverage/)'`"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/electrode-io/electrode.git"
+  },
+  "keywords": [],
+  "license": "Apache-2.0",
+  "maintainers": [
+    {
+      "name": "jchip",
+      "email": "joel123@gmail.com"
+    }
+  ],
+  "devDependencies": {
+    "electrode-archetype-njs-module-dev": "^2.2.0"
+  },
+  "dependencies": {
+    "electrode-ui-config": "^1.0.0",
+    "json-stringify-safe": "^5.0.1",
+    "lodash.keys": "^4.2.0",
+    "lodash.omit": "^4.5.0",
+    "whatwg-fetch": "^2.0.3"
+  },
+  "nyc": {
+    "all": true,
+    "reporter": [
+      "lcov",
+      "text",
+      "text-summary"
+    ],
+    "exclude": [
+      "coverage",
+      "*clap.js",
+      "gulpfile.js",
+      "dist",
+      "test"
+    ]
+  }
+}
diff --git a/packages/electrode-ui-logger/test/.eslintrc b/packages/electrode-ui-logger/test/.eslintrc
new file mode 100644
index 000000000..e9da91c41
--- /dev/null
+++ b/packages/electrode-ui-logger/test/.eslintrc
@@ -0,0 +1,3 @@
+---
+extends:
+  - "../node_modules/electrode-archetype-njs-module-dev/config/eslint/.eslintrc-test"
\ No newline at end of file
diff --git a/packages/electrode-ui-logger/test/mocha.opts b/packages/electrode-ui-logger/test/mocha.opts
new file mode 100644
index 000000000..022f99b50
--- /dev/null
+++ b/packages/electrode-ui-logger/test/mocha.opts
@@ -0,0 +1,2 @@
+--require node_modules/electrode-archetype-njs-module-dev/config/test/setup.js
+--recursive
diff --git a/packages/electrode-ui-logger/test/spec/csindex.js b/packages/electrode-ui-logger/test/spec/csindex.js
new file mode 100644
index 000000000..b0c95da26
--- /dev/null
+++ b/packages/electrode-ui-logger/test/spec/csindex.js
@@ -0,0 +1,106 @@
+"use strict";
+
+describe("client-side logger", function () {
+  let fetchUrl;
+  let fetchPayload;
+  let Log;
+  let Config;
+
+  function mockFetch(url, payload) {
+    fetchUrl = url;
+    fetchPayload = payload;
+  }
+
+  before(function() {
+    global.window = {
+      _wml: {
+        config: {
+          ui: {}
+        }
+      }
+    };
+
+    Config = require("electrode-ui-config/lib/csindex");
+  });
+
+  beforeEach(function () {
+    delete require.cache[require.resolve("../../lib/csindex")];
+
+    Log = require("../../lib/csindex");
+    Log.setLogInterval(200);
+    Log.setFetch(mockFetch);
+    Log.setConfig(Config);
+  });
+
+  afterEach(function () {
+    fetchUrl = undefined;
+    fetchPayload = undefined;
+    delete global.fetch;
+  });
+
+  after(function () {
+    delete global.fetch;
+  });
+
+  it("should flush the log entries", function () {
+    Log.info("test info");
+    Log.warn("test warn");
+    Log.fatal("test fatal");
+    Log.error("test error");
+    Log.debug("test debug");
+    Log.trace("test trace");
+    Log.log("log", "test log");
+    Log._flush();
+
+    expect(fetchUrl).to.equal("/api/logger");
+    expect(fetchPayload).to.deep.equal(
+      {
+        "credentials": "include",
+        "disableAnalytics": true,
+        "method": "POST",
+        "headers": {
+          "Accept": "application/json",
+          "Content-Type": "application/json"
+        },
+        "body": `[{"tags":["info"],"data":"test info"},{"tags":["warn"],"data":"test warn"},{"tags":["fatal"],"data":"test fatal"},{"tags":["error"],"data":"test error"},{"tags":["debug"],"data":"test debug"},{"tags":["trace"],"data":"test trace"},{"tags":["log"],"data":"test log"}]` // eslint-disable-line
+      }
+    );
+
+  });
+
+  it("should combine and log entries", function (done) {
+    Log.info("test info");
+    Log.warn("test warn");
+    Log.fatal("test fatal");
+    Log.error("test error");
+    Log.debug("test debug");
+    Log.trace("test trace");
+    Log.log("log", "test log");
+
+    setTimeout(() => {
+      expect(fetchUrl).to.equal("/api/logger");
+      expect(fetchPayload).to.deep.equal(
+        {
+          "credentials": "include",
+          "disableAnalytics": true,
+          "method": "POST",
+          "headers": {
+            "Accept": "application/json",
+            "Content-Type": "application/json"
+          },
+          "body": `[{"tags":["info"],"data":"test info"},{"tags":["warn"],"data":"test warn"},{"tags":["fatal"],"data":"test fatal"},{"tags":["error"],"data":"test error"},{"tags":["debug"],"data":"test debug"},{"tags":["trace"],"data":"test trace"},{"tags":["log"],"data":"test log"}]` // eslint-disable-line
+        }
+      );
+
+      done();
+    }, 200);
+  });
+
+  it("should not send any thing to log api if nothing was logged", function (done) {
+    Log.setFetch(function () {
+      throw new Error("fetch should not have been called");
+    });
+
+    setTimeout(done, 200);
+  });
+});
diff --git a/packages/electrode-ui-logger/test/spec/index.spec.js b/packages/electrode-ui-logger/test/spec/index.spec.js
new file mode 100644
index 000000000..3bc53ed4c
--- /dev/null
+++ b/packages/electrode-ui-logger/test/spec/index.spec.js
@@ -0,0 +1,31 @@
+"use strict";
+
+describe("server-side logger", function () {
+  let Log;
+  let callCount = 0;
+  const request = {
+    log: () => callCount++
+  };
+
+  beforeEach(() => {
+    delete require.cache[require.resolve("../../lib")];
+    Log = require("../../lib");
+
+    // Log.setServer(server);
+  });
+
+  it("should log entries", function () {
+    Log.info("test info", {request: request});
+    Log.warn("test warn", {request: request});
+    Log.fatal("test fatal", {request: request});
+    Log.error("test error", {request: request});
+    Log.debug("test debug", {request: request});
+    Log.trace("test trace", {request: request});
+    Log.log(["log"], "test log", {request: request});
+    expect(callCount).to.equal(7);
+  });
+
+  it("should throw error if request option not provided", function () {
+    expect(() => Log.info("test"));
+  });
+});
diff --git a/packages/electrode-ui-logger/test/spec/safe-event-builder.spec.js b/packages/electrode-ui-logger/test/spec/safe-event-builder.spec.js
new file mode 100644
index 000000000..1166347cb
--- /dev/null
+++ b/packages/electrode-ui-logger/test/spec/safe-event-builder.spec.js
@@ -0,0 +1,126 @@
+"use strict";
+
+const safeEventBuilder = require("../../lib/safe-event-builder");
+
+describe("Client/helpers", () => {
+  describe("safeEventBuilder", () => {
+    let evt = null;
+    let expectedEvt = null;
+
+    describe("event is invalid", () => {
+      beforeEach(() => {
+        expectedEvt = {
+          _type: "undefined",
+          state: "undefined"
+        };
+      });
+
+      describe("when falsy", () => {
+        it("should return a safe event object", () => {
+          expect(safeEventBuilder()).to.deep.equal(expectedEvt);
+          expect(safeEventBuilder(null)).to.deep.equal(expectedEvt);
+        });
+      });
+
+      describe("when empty", () => {
+        it("should return a safe event object", () => {
+          expect(safeEventBuilder({})).to.deep.equal(expectedEvt);
+        });
+      });
+    });
+
+    describe("event type is fetch", () => {
+
+      describe("when `extras` attribute exists", () => {
+        beforeEach(() => {
+          evt = {
+            _type: "fetch",
+            context: "some foo context",
+            props: {},
+            extras: {
+              request: "foo request",
+              response: {
+                status: "foo status"
+              },
+              options: "foo options",
+              time: 12345
+            },
+            state: "all good"
+          };
+
+          expectedEvt = {
+            _type: "fetch",
+            extras: {
+              request: "foo request",
+              response: {
+                status: "foo status"
+              },
+              options: "foo options",
+              time: 12345
+            },
+            state: "all good"
+          };
+        });
+
+        it("should make a safe event", () => {
+          expect(safeEventBuilder(evt)).to.deep.equal(expectedEvt);
+        });
+      });
+
+      describe("when `extras` attribute is undefined", () => {
+        beforeEach(() => {
+          evt = {
+            _type: "fetch"
+          };
+
+          expectedEvt = {
+            _type: "fetch",
+            state: undefined,
+            extras: {
+              response: {
+                status: null
+              }
+            }
+          };
+        });
+
+        it("should not throw an error", () => {
+          expect(() => {
+            return safeEventBuilder(evt);
+          }).not.to.throw("TypeError: Cannot read property");
+        });
+
+        it("should return a safe event", () => {
+          expect(safeEventBuilder(evt)).to.deep.equal(expectedEvt);
+        });
+      });
+    });
+
+    describe("event type is NOT fetch", () => {
+      let cycle = null;
+
+      beforeEach(() => {
+        // setup circular reference in children
+        cycle = {};
+        cycle.cycle = cycle;
+        evt = {
+          props: {
+            chooserName: "Quantity: ",
+            automationId: "Dropdown-ProductQuantity",
+            children: [cycle]
+          }
+        };
+      });
+
+      it("should avoid cicular references", () => {
+        expect(() => {
+          return JSON.stringify(safeEventBuilder(evt));
+        }).not.to.throw("JSON.stringify cannot serialize cyclic structures");
+      });
+
+      it("should exclude children in props", () => {
+        expect(safeEventBuilder(evt).props).to.not.include.keys("children");
+      });
+    });
+  });
+});
diff --git a/packages/electrode-ui-logger/xclap.js b/packages/electrode-ui-logger/xclap.js
new file mode 100644
index 000000000..0cc34a430
--- /dev/null
+++ b/packages/electrode-ui-logger/xclap.js
@@ -0,0 +1,3 @@
+"use strict";
+
+require("electrode-archetype-njs-module-dev")();
\ No newline at end of file
diff --git a/packages/generator-electrode/component-add/index.js b/packages/generator-electrode/component-add/index.js
index 0bc41778e..1267759fc 100644
--- a/packages/generator-electrode/component-add/index.js
+++ b/packages/generator-electrode/component-add/index.js
@@ -2,7 +2,7 @@
 
 /* eslint-disable arrow-parens */
 
-var generators = require("yeoman-generator");
+var Generator = require("yeoman-generator");
 var chalk = require("chalk");
 var yosay = require("yosay");
 var path = require("path");
@@ -19,26 +19,26 @@ var demoHelperPath = require.resolve("electrode-demo-helper");
 * so check if cwd ends in packages. also that there is a demo-app folder present
 * demo app folder path should be at the same level as packages.
 * then check if 'demo-app/package.json' and 'demo-app/src/client/components/home.jsx' exist.
-* The folder structure is now sufficiently verified. 
-* generate the component in the cwd and npmi 
+* The folder structure is now sufficiently verified.
+* generate the component in the cwd and npmi
 * modify the demo-app package to add new package.
 * modify the demo-app component home.jsx to import the new packages/component and use class in the div
 */
 
-module.exports = generators.Base.extend({
-  constructor: function() {
-    generators.Base.apply(this, arguments);
+module.exports = class extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
     this.packageName = this.options.packageName || "demo-app";
     this.developerName = this.options.developerName || "demoDeveloper";
     this.className = this.options.className;
-  },
+  }
 
-  initializing: function() {
+  initializing() {
     let appPkgPath = "";
     let homeComponentPath = "";
     this.demoAppName = "";
 
-    //This function checks if all required pieces are present
     const checkError = () => {
       if (_.isEmpty(this.demoAppName)) {
         this.env.error(
@@ -57,7 +57,7 @@ module.exports = generators.Base.extend({
       }
     };
 
-    //check if the command is being run from within an existing app
+    // Check if the command is being run from within an existing app
     if (this.fs.exists(this.destinationPath("package.json"))) {
       var appPkg = this.fs.readJSON(this.destinationPath("package.json"));
       if (
@@ -71,7 +71,7 @@ module.exports = generators.Base.extend({
       }
     }
 
-    //check is the command is run from the correct directory
+    // Check is the command is run from the correct directory
     if (path.basename(this.destinationPath()) != "packages") {
       this.env.error(
         "You need to run this command from the 'packages' folder generated by running 'yo electrode:component'."
@@ -79,7 +79,7 @@ module.exports = generators.Base.extend({
     }
 
     try {
-      //fetch the demo App Name, which is "demo-app" by default
+      // Fetch the demo App Name, which is "demo-app" by default
       this.demoAppName = _.first(glob.sync("**demo-app", { cwd: path.resolve("..") }));
       this.pkg = this.fs.exists(
         this.destinationPath(path.join("..", this.demoAppName, "package.json"))
@@ -93,46 +93,46 @@ module.exports = generators.Base.extend({
       checkError();
     }
 
-    // check for missing
     checkError();
     this.props = this.options.props || {};
-  },
-
-  prompting: {
-    greeting: function() {
-      this.log(yosay("Welcome to the " + chalk.red("Electrode Add Component") + " generator!"));
-    },
-
-    askFor: function() {
-      var prompts = [
-        {
-          type: "input",
-          name: "name",
-          message: "Component Name",
-          when: !this.props.name,
-          default: "wysiwyg-component"
-        },
-        {
-          type: "input",
-          name: "componentName",
-          message: "What is the ClassName for your component?",
-          default: this.props.name,
-          when: !this.props.componentName
-        }
-      ];
-      return this.prompt(prompts).then(props => {
-        this.props = extend(this.props, props);
-        this.packageName = this.props.name;
-        this.componentName = _.kebabCase(_.deburr(this.props.componentName || this.props.name))
-          .replace(/^\s+|\s+$/g, "")
-          .replace(/(^|[-_ ])+(.)/g, function(match, first, second) {
-            return second.toUpperCase();
-          });
-      });
-    }
-  },
+  }
+
+  _askFor() {
+    var prompts = [
+      {
+        type: "input",
+        name: "name",
+        message: "Component Name",
+        when: !this.props.name,
+        default: "untitled" + Math.floor(Math.random() * 1000) + "-component"
+      },
+      {
+        type: "input",
+        name: "componentName",
+        message: "What is the ClassName for your component?",
+        default: this.props.name,
+        when: !this.props.componentName
+      }
+    ];
+
+    return this.prompt(prompts).then(props => {
+      this.props = extend(this.props, props);
+      this.packageName = this.props.name;
+      this.componentName = _.kebabCase(_.deburr(this.props.componentName || this.props.name))
+        .replace(/^\s+|\s+$/g, "")
+        .replace(/(^|[-_ ])+(.)/g, function(match, first, second) {
+          return second.toUpperCase();
+        });
+    });
+  }
+
+  prompting() {
+    this.log(yosay("Welcome to the " + chalk.red("Electrode Add Component") + " generator!"));
 
-  default: function() {
+    return this._askFor();
+  }
+
+  default() {
     let options = {
       isAddon: true,
       name: this.packageName,
@@ -140,15 +140,11 @@ module.exports = generators.Base.extend({
       demoAppName: this.demoAppName,
       quotes: this.props.quotes
     };
-    this.composeWith(
-      "electrode:component",
-      { options },
-      {
-        local: require.resolve("../component")
-      }
-    );
-  },
-  writing: function() {
+
+    this.composeWith(require.resolve("../component"), options);
+  }
+
+  writing() {
     let getDemoFilePath = function(filepath) {
       try {
         let demoFilePath = path.resolve(demoHelperPath, "..", filepath);
@@ -158,7 +154,7 @@ module.exports = generators.Base.extend({
       }
     };
 
-    //overwrite the Demo App package.json
+    // Overwrite the Demo App package.json
     let existingPkg = this.fs.readJSON(
       this.destinationPath(path.join("..", "..", this.demoAppName, "package.json"))
     );
@@ -176,21 +172,24 @@ module.exports = generators.Base.extend({
     );
 
     let homeArray = homeFile.split("\n");
-    // add import at the top
+    // Add import at the top
     let rx = "import {" + this.componentName + '} from "' + this.packageName + '";';
     let rxTag = "<" + this.componentName + " />";
     homeArray.unshift(rx);
-    //get the first closing div, home shoud have one closing div.
+
+    // Get the first closing div, home shoud have one closing div.
     let splitPoint = homeArray.findIndex((value, index, array) => {
       if (value.match("</div>")) {
         return index;
       }
     });
-    // insert the new class before the div
-    //splice the array into 2, before closing div and after
+
+    // Insert the new class before the div
+    // Splice the array into 2, before closing div and after
     let topHalf = homeArray.splice(0, splitPoint);
     topHalf.push(rxTag);
     let newHomeString = topHalf.concat(homeArray).join("\n");
+
     this.fs.write(
       this.destinationPath(
         path.join("..", "..", this.demoAppName, "src", "client", "components", "home.jsx")
@@ -204,9 +203,9 @@ module.exports = generators.Base.extend({
       this.destinationPath(path.join("..", "..", "demo-app", "archetype")),
       { components: directories }
     );
-  },
+  }
 
-  end: function() {
+  end() {
     this.log(
       "\n" +
         chalk.green.underline("Your new Electrode component is ready!") +
@@ -222,4 +221,4 @@ module.exports = generators.Base.extend({
         "\n"
     );
   }
-});
+};
diff --git a/packages/generator-electrode/component/index.js b/packages/generator-electrode/component/index.js
index 09712da9f..bb7758506 100644
--- a/packages/generator-electrode/component/index.js
+++ b/packages/generator-electrode/component/index.js
@@ -1,24 +1,30 @@
 "use strict";
 
+var Generator = require("yeoman-generator");
 var _ = require("lodash");
 var chalk = require("chalk");
-var yeoman = require("yeoman-generator");
 var path = require("path");
 var extend = _.merge;
 var parseAuthor = require("parse-author");
 var optionOrPrompt = require("yeoman-option-or-prompt");
-var nodeFS = require("fs");
 var demoHelperPath = path.join(require.resolve("electrode-demo-helper"), "..");
 
-var ReactComponentGenerator = yeoman.Base.extend({
-  constructor: function() {
-    yeoman.Base.apply(this, arguments);
+const pkg = require("../package.json");
+
+module.exports = class extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.log(chalk.green("Yeoman Electrode Component generator version"), pkg.version);
+    this.log("Loaded from", chalk.magenta(path.dirname(require.resolve("../package.json"))));
+
     this.quotes = this.options.quotes;
     this.githubUrl = this.options.githubUrl || "https://github.com";
     this.optionOrPrompt = optionOrPrompt;
-  },
-  initializing: function() {
-    //check if the command is being run from within an existing app
+  }
+
+  initializing() {
+    // Check if the command is being run from within an existing app
     if (this.fs.exists(this.destinationPath("package.json"))) {
       var appPkg = this.fs.readJSON(this.destinationPath("package.json"));
       if (
@@ -49,197 +55,275 @@ var ReactComponentGenerator = yeoman.Base.extend({
       var info = parseAuthor(this.pkg.author);
       this.props.developerName = info.name;
     }
+
     this.props.quoteType = this.quotes;
-  },
-  prompting: {
-    greeting: function() {
-      if (!this.isAddon) {
-        this.log(
-          "\n" +
-            chalk.bold.underline("Welcome to the Electrode Component Generator") +
-            "\n" +
-            "\nWe're going to set up a new " +
-            chalk.bold("Electrode") +
-            " component, ready for development with" +
-            "\n" +
-            chalk.bold("react, webpack, demo, electrode component archetype, and live-reload")
-        );
-      }
-    },
-    askFor: function() {
-      if (this.pkg.name || this.options.name) {
-        this.props.name = this.pkg.name || _.kebabCase(this.options.name);
+  }
+
+  _askFor() {
+    if (this.pkg.name || this.options.name) {
+      this.props.name = this.pkg.name || _.kebabCase(this.options.name);
+    }
+
+    if (this.options.componentName) {
+      this.props.componentName = this.options.componentName;
+    }
+
+    var prompts = [
+      {
+        type: "input",
+        name: "projectName",
+        message: "What is your Package/GitHub project name? (e.g., 'wysiwyg-component')",
+        default: "wysiwyg-component",
+        when: !this.props.name
+      },
+      {
+        type: "input",
+        name: "packageName",
+        message: "What is the ClassName for your component?",
+        default: this.props.componentName || this.props.projectName,
+        when: !this.props.componentName
+      },
+      {
+        type: "input",
+        name: "packageName",
+        message: "What will be the npm package name?",
+        default: this.props.packageName
+      },
+      {
+        type: "input",
+        name: "packageGitHubOrg",
+        message: "What will be the GitHub organization username (e.g., 'walmartlabs')?",
+        default: this.props.packageGitHubOrg
+      },
+      {
+        type: "input",
+        name: "developerName",
+        message: "What is your name? (for copyright notice, etc.)",
+        default: this.props.developerName
+      },
+      {
+        type: "input",
+        name: "ghUser",
+        message: "What is your GitHub Username?",
+        default: this.props.developerName
+      },
+      {
+        type: "list",
+        name: "quoteType",
+        message: "Use double quotes or single quotes?",
+        choices: ['"', "'"],
+        default: '"',
+        when: !this.props.quoteType
+      },
+      {
+        type: "input",
+        name: "ghRepo",
+        message: "What is the name of the GitHub repo where this will be published?",
+        default: this.packageName
+      },
+      {
+        type: "confirm",
+        name: "createDirectory",
+        message: "Would you like to create a new directory for your project?",
+        default: true
+      },
+      {
+        type: "confirm",
+        name: "yarn",
+        message: "Would you like to yarn install packages?",
+        when: !this.props.yarn,
+        default: false
       }
-      if (this.options.componentName) {
-        this.props.componentName = this.options.componentName;
+    ];
+
+    return this.optionOrPrompt(prompts).then(props => {
+      this.props = extend(this.props, props);
+      this.projectName = this.props.projectName.split(" ").map(_.toLower).join("");
+      this.packageName = this.props.projectName.split(" ").map(_.toLower).join("");
+      this.developerName = this.props.developerName;
+      this.quoteType = this.props.quoteType;
+      this.ghUser = this.props.ghUser;
+      this.ghRepo = this.props.ghRepo;
+      this.packageGitHubOrg = this.props.packageGitHubOrg;
+      this.createDirectory = this.props.createDirectory;
+      this.componentName = _.kebabCase(_.deburr(this.props.projectName))
+        .replace(/^\s+|\s+$/g, "")
+        .replace(/(^|[-_ ])+(.)/g, function(match, first, second) {
+          return second.toUpperCase();
+        });
+      this.currentYear = new Date().getFullYear();
+      if (this.props.createDirectory) {
+        var newRoot = this.destinationPath() + "/" + this.packageName;
+        this.destinationRoot(newRoot);
       }
+      this.rootPath = this.isAddon ? "" : "packages/" + this.projectName + "/";
+    });
+  }
 
-      var prompts = [
-        {
-          type: "input",
-          name: "projectName",
-          message: "What is your Package/GitHub project name? (e.g., 'wysiwyg-component')",
-          default: "wysiwyg-component",
-          when: !this.props.name
-        },
-        {
-          type: "input",
-          name: "packageName",
-          message: "What is the ClassName for your component?",
-          default: this.props.componentName || this.props.projectName,
-          when: !this.props.componentName
-        },
-        {
-          type: "input",
-          name: "packageName",
-          message: "What will be the npm package name?",
-          default: this.props.packageName
-        },
-        {
-          type: "input",
-          name: "packageGitHubOrg",
-          message: "What will be the GitHub organization username (e.g., 'walmartlabs')?",
-          default: this.props.packageGitHubOrg
-        },
-        {
-          type: "input",
-          name: "developerName",
-          message: "What is your name? (for copyright notice, etc.)",
-          default: this.props.developerName
-        },
-        {
-          type: "input",
-          name: "ghUser",
-          message: "What is your GitHub Username?",
-          default: this.props.developerName
-        },
-        {
-          type: "list",
-          name: "quoteType",
-          message: "Use double quotes or single quotes?",
-          choices: ['"', "'"],
-          default: '"',
-          when: !this.props.quoteType
-        },
-        {
-          type: "input",
-          name: "ghRepo",
-          message: "What is the name of the GitHub repo where this will be published?",
-          default: this.packageName
-        },
-        {
-          type: "confirm",
-          name: "createDirectory",
-          message: "Would you like to create a new directory for your project?",
-          default: true
-        }
-      ];
-      return this.optionOrPrompt(prompts).then(props => {
-        this.props = extend(this.props, props);
-        this.projectName = this.props.projectName.split(" ").map(_.toLower).join("");
-        this.packageName = this.props.projectName.split(" ").map(_.toLower).join("");
-        this.developerName = this.props.developerName;
-        this.quoteType = this.props.quoteType;
-        this.ghUser = this.props.ghUser;
-        this.ghRepo = this.props.ghRepo;
-        this.packageGitHubOrg = this.props.packageGitHubOrg;
-        this.createDirectory = this.props.createDirectory;
-        this.componentName = _.kebabCase(_.deburr(this.props.projectName))
-          .replace(/^\s+|\s+$/g, "")
-          .replace(/(^|[-_ ])+(.)/g, function(match, first, second) {
-            return second.toUpperCase();
-          });
-        this.currentYear = new Date().getFullYear();
-        if (this.props.createDirectory) {
-          var newRoot = this.destinationPath() + "/" + this.packageName;
-          this.destinationRoot(newRoot);
-        }
-        this.rootPath = this.isAddon ? "" : "packages/" + this.projectName + "/";
-      });
+  prompting() {
+    if (!this.isAddon) {
+      this.log(
+        "\n" +
+          chalk.bold.underline("Welcome to the Electrode Component Generator") +
+          "\n" +
+          "\nWe're going to set up a new " +
+          chalk.bold("Electrode") +
+          " component, ready for development with" +
+          "\n" +
+          chalk.bold("react, webpack, demo, electrode component archetype, and live-reload")
+      );
     }
-  },
 
-  writing: {
-    lernaStructure: function() {
-      // copy lerna and top level templates
+    return this._askFor();
+  }
+
+  writing() {
+    lernaStructure: {
+      // Copy lerna and top level templates
       if (!this.isAddon) {
-        this.copy("gitignore", ".gitignore");
-        this.template("_package.json", "package.json");
-        this.template("_readme.md", "README.md");
-        this.template("lerna.json", "lerna.json");
+        this.fs.copyTpl(this.templatePath("gitignore"), this.destinationPath(".gitignore"));
+        this.fs.copyTpl(this.templatePath("_package.json"), this.destinationPath("package.json"), {
+          projectName: this.projectName,
+          developerName: this.developerName,
+          githubUrl: this.githubUrl,
+          ghUser: this.ghUser,
+          packageGitHubOrg: this.packageGitHubOrg,
+          ghRepo: this.ghRepo
+        });
+        this.fs.copyTpl(this.templatePath("_readme.md"), this.destinationPath("README.md"));
+        this.fs.copyTpl(this.templatePath("lerna.json"), this.destinationPath("lerna.json"));
       }
-    },
-    project: function() {
-      this.copy("packages/component/babelrc", this.rootPath + ".babelrc");
-      this.copy("packages/component/gitignore", this.rootPath + ".gitignore");
-      this.copy("packages/component/npmignore", this.rootPath + ".npmignore");
-      this.copy("packages/component/editorconfig", this.rootPath + ".editorconfig");
+    }
+
+    project: {
+      this.fs.copy(
+        this.templatePath("packages/component/babelrc"),
+        this.destinationPath(".babelrc")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/gitignore"),
+        this.destinationPath(".gitignore")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/npmignore"),
+        this.destinationPath(".npmignore")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/editorconfig"),
+        this.destinationPath(".editorconfig")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/_xclap.js"),
+        this.destinationPath("xclap.js")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/_package.json"),
+        this.destinationPath("package.json")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/_readme.md"),
+        this.destinationPath("README.md")
+      );
+
       if (this.quoteType === "'") {
-        this.template("packages/component/eslintrc", this.rootPath + ".eslintrc");
+        this.fs.copy(
+          this.templatePath("packages/component/eslintrc"),
+          this.destinationPath(".eslintrc")
+        );
       }
-      this.template("packages/component/_xclap.js", this.rootPath + "xclap.js");
-      this.template("packages/component/_package.json", this.rootPath + "package.json");
-      this.template("packages/component/_readme.md", this.rootPath + "README.md");
-    },
-    component: function() {
-      this.template(
-        "packages/component/src/components/_component.jsx",
-        this.rootPath + "src/components/" + this.projectName + ".jsx"
+    }
+
+    component: {
+      this.fs.copyTpl(
+        this.templatePath("packages/component/src/components/_component.jsx"),
+        this.destinationPath(this.rootPath + "src/components/" + this.projectName + ".jsx")
       );
-      this.template(
-        "packages/component/src/styles/_component.css",
-        this.rootPath + "src/styles/" + this.projectName + ".css"
+      this.fs.copy(
+        this.templatePath("packages/component/src/components/_accordion.jsx"),
+        this.destinationPath(this.rootPath + "src/components/accordion.jsx")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/src/styles/_component.css"),
+        this.destinationPath(this.rootPath + "src/styles/" + this.projectName + ".css")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/src/styles/_accordion.css"),
+        this.destinationPath(this.rootPath + "src/styles/accordion.css")
+      );
+      this.fs.copy(
+        this.templatePath("packages/component/src/styles/_raleway.css"),
+        this.destinationPath(this.rootPath + "src/styles/raleway.css")
       );
 
-      // demo folder files
-      this.template(
-        "packages/component/demo/examples/_component.example",
-        this.rootPath + "demo/examples/" + this.projectName + ".example"
+      this.fs.copyTpl(
+        this.templatePath("packages/component/demo/examples/_component.example"),
+        this.destinationPath(this.rootPath + "demo/examples/" + this.projectName + ".example")
       );
+
       this.fs.copyTpl(
         this.templatePath(path.resolve(demoHelperPath, "demo")),
         this.destinationPath((this.isAddon ? "../" : "packages/") + this.projectName + "/demo"),
-        {packageName: this.projectName}
+        { packageName: this.projectName }
       );
+
       this.fs.copyTpl(
         this.templatePath(path.resolve(demoHelperPath, "components.md")),
-        this.destinationPath((this.isAddon ? "../" : "packages/") + this.projectName + "/components.md"),
-        {packageName: this.projectName}
+        this.destinationPath(
+          (this.isAddon ? "../" : "packages/") + this.projectName + "/components.md"
+        ),
+        { packageName: this.projectName }
       );
 
-      // l10n language templates
-      this.template(
-        "packages/component/src/lang/_DefaultMessages.js",
-        this.rootPath + "src/lang/default-messages.js"
+      this.fs.copy(
+        this.templatePath("packages/component/src/lang/_DefaultMessages.js"),
+        this.destinationPath(this.rootPath + "src/lang/default-messages.js")
       );
-      this.template("packages/component/src/lang/_en.json", this.rootPath + "src/lang/en.json");
-      this.template(
-        "packages/component/src/lang/tenants/electrodeio/_defaultMessages.js",
-        this.rootPath + "src/lang/tenants/electrodeio/default-messages.js"
+
+      this.fs.copy(
+        this.templatePath("packages/component/src/lang/_en.json"),
+        this.destinationPath(this.rootPath + "src/lang/en.json")
       );
 
-      this.template("packages/component/src/_Component.js", this.rootPath + "src/index.js");
-    },
-    test: function() {
-      this.template(
-        "packages/component/test/client/eslintrc",
-        this.rootPath + "test/client/.eslintrc"
+      this.fs.copy(
+        this.templatePath("packages/component/src/lang/tenants/electrodeio/_defaultMessages.js"),
+        this.destinationPath(this.rootPath + "src/lang/tenants/electrodeio/default-messages.js")
       );
-      this.template(
-        "packages/component/test/client/components/_component.spec.jsx",
-        this.rootPath + "test/client/components/" + this.projectName + ".spec.jsx"
+
+      this.fs.copy(
+        this.templatePath("packages/component/src/_Component.js"),
+        this.destinationPath(this.rootPath + "src/index.js")
       );
-      this.copy(
-        "packages/component/test/client/components/helpers/_intlEnzymeTestHelper.js",
-        this.rootPath + "test/client/components/helpers/intl-enzyme-test-helper.js"
+    }
+
+    test: {
+      this.fs.copy(
+        this.templatePath("packages/component/test/client/eslintrc"),
+        this.destinationPath(this.rootPath + "test/client/.eslintrc")
+      );
+
+      this.fs.copy(
+        this.templatePath("packages/component/test/client/components/_component.spec.jsx"),
+        this.destinationPath(
+          this.rootPath + "test/client/components/" + this.projectName + ".spec.jsx"
+        )
       );
-    },
 
-    demoApp: function() {
-      //Do not generate the demo app if called from the add on generator
+      this.fs.copy(
+        this.templatePath(
+          "packages/component/test/client/components/helpers/_intlEnzymeTestHelper.js"
+        ),
+        this.destinationPath(
+          this.rootPath + "test/client/components/helpers/intl-enzyme-test-helper.js"
+        )
+      );
+    }
+
+    demoApp: {
+      // Do not generate the demo app if called from the add on generator
       this.originalDemoAppName = "demo-app";
+
       if (!this.isAddon) {
-        //custom props to pass to the App Generator
+        // Custom props to pass to the App Generator
         this.props.description = this.description || "The demo App";
         this.props.createDirectory = false;
         this.props.packageName = this.packageName;
@@ -262,37 +346,38 @@ var ReactComponentGenerator = yeoman.Base.extend({
           props: this.props
         };
 
-        //change the destinationRoot for generating the demo app
+        // Change the destinationRoot for generating the demo app
         this.oldRoot = this.destinationRoot();
         var newRoot = this.destinationPath() + "/" + this.originalDemoAppName;
         this.destinationRoot(newRoot);
-        this.composeWith(
-          "electrode:app",
-          { options },
-          {
-            local: require.resolve("../generators/app")
-          }
-        );
+
+        this.composeWith(require.resolve("../generators/app"), options);
       }
     }
-  },
+  }
 
-  install: function() {
-    //git init and npmi for lerna lernaStructure
+  install() {
+    // Git init and npmi for lerna lernaStructure
     if (!this.isAddon) {
-      //reset the path to the actual root
+      // Reset the path to the actual root
       this.destinationRoot(this.oldRoot);
       this.destinationRoot();
 
       this.spawnCommandSync("git", ["init"], {
         cwd: this.destinationPath()
       });
-      this.spawnCommandSync("npm", ["install"], {
-        cwd: this.destinationPath()
-      });
+      if (this.props.yarn) {
+        this.spawnCommandSync("yarn", ["install"], {
+          cwd: this.destinationPath()
+        });
+      } else {
+        this.spawnCommandSync("npm", ["install"], {
+          cwd: this.destinationPath()
+        });
+      }
     }
 
-    //install the dependencies for the package
+    // Install the dependencies for the package
     let packageDirectory = this.isAddon
       ? this.destinationPath()
       : this.destinationPath() + "/" + this.rootPath;
@@ -311,9 +396,9 @@ var ReactComponentGenerator = yeoman.Base.extend({
     this.spawnCommandSync("npm", ["install"], {
       cwd: this.destinationPath()
     });
-  },
+  }
 
-  end: function() {
+  end() {
     if (this.quoteType === "'") {
       this.spawnCommandSync("node_modules/.bin/eslint", [
         "--fix",
@@ -349,6 +434,4 @@ var ReactComponentGenerator = yeoman.Base.extend({
       );
     }
   }
-});
-
-module.exports = ReactComponentGenerator;
+};
diff --git a/packages/generator-electrode/component/templates/packages/component/src/components/_accordion.jsx b/packages/generator-electrode/component/templates/packages/component/src/components/_accordion.jsx
new file mode 100644
index 000000000..45e624e36
--- /dev/null
+++ b/packages/generator-electrode/component/templates/packages/component/src/components/_accordion.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import propTypes from "prop-types";
+import styles from "../../src/styles/accordion.css";
+
+export default class Accordion extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      active: false
+    };
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      active: !this.state.active
+    });
+  }
+
+  render() {
+    const stateStyle = this.state.active ? styles.active : styles.inactive;
+
+    return (
+      <section>
+        <a onClick={this.toggle}>
+          {this.props.summary}
+        </a>
+        <p className={stateStyle}>
+          {this.props.details}
+        </p>
+      </section>
+    );
+  }
+}
+
+Accordion.propTypes = {
+  summary: propTypes.string.isRequired,
+  details: propTypes.string.isRequired
+};
diff --git a/packages/generator-electrode/component/templates/packages/component/src/components/_component.jsx b/packages/generator-electrode/component/templates/packages/component/src/components/_component.jsx
index 9108334b7..e79f9286f 100644
--- a/packages/generator-electrode/component/templates/packages/component/src/components/_component.jsx
+++ b/packages/generator-electrode/component/templates/packages/component/src/components/_component.jsx
@@ -2,13 +2,30 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import styles from "../../src/styles/<%= projectName %>.css";
-import messages from "../lang/default-messages";
+import "../../src/styles/raleway.css";
+import Accordion from "./accordion";
 
 export default class <%= componentName %> extends React.Component {
   render() {
+    const data = {
+      definition: "> Archetype",
+      definitionDetails: "Electrode Component Archetype helps developers to quickly build react components.",
+      structure: "> Structure",
+      structureDetails: "We demo components through <repo>/demo-app where import components from <repo>/packages/<componentName>.",
+      benefit: "> Benefit",
+      benefitDetails: "With the new mono-repo structure, you can have multiple smaller components that complement each other in one repo.",
+      others: "> More Info",
+      othersDetails: "https://docs.electrode.io/chapter1/intermediate/component-archetype/"
+    };
+
     return (
-      <div className={styles.someStyle}>
-        <FormattedMessage {...messages.editMe} />
+      <div className={styles.container}>
+        <hr />
+        <h4>New accordion component demo</h4>
+        <Accordion summary={data.definition} details={data.definitionDetails} />
+        <Accordion summary={data.structure} details={data.structureDetails} />
+        <Accordion summary={data.benefit} details={data.benefitDetails} />
+        <Accordion summary={data.others} details={data.othersDetails} />
       </div>
     );
   }
diff --git a/packages/generator-electrode/component/templates/packages/component/src/styles/_accordion.css b/packages/generator-electrode/component/templates/packages/component/src/styles/_accordion.css
new file mode 100644
index 000000000..a658b490b
--- /dev/null
+++ b/packages/generator-electrode/component/templates/packages/component/src/styles/_accordion.css
@@ -0,0 +1,39 @@
+@value blue: #1EAEDB;
+@value black: #000000;
+@value white: #FFFFFF;
+
+section .active {
+  display: inherit;
+}
+
+section .inactive {
+  display: none;
+}
+
+section {
+  background-color: white;
+  border: 1px solid blue;
+  border-radius: 5px;
+  border-top-color: blue;
+  color: black;
+  text-align: left;
+  word-wrap: break-word;
+}
+
+section a {
+  color: blue;
+  display: inline-block;
+  padding: 10px;
+}
+
+section a:hover {
+  color: blue;
+  cursor: pointer;
+}
+
+section p {
+  background-color: blue;
+  color: white;
+  margin-bottom: 0px;
+  padding: 10px;
+}
diff --git a/packages/generator-electrode/component/templates/packages/component/src/styles/_component.css b/packages/generator-electrode/component/templates/packages/component/src/styles/_component.css
index 0a7614565..ab97d6678 100644
--- a/packages/generator-electrode/component/templates/packages/component/src/styles/_component.css
+++ b/packages/generator-electrode/component/templates/packages/component/src/styles/_component.css
@@ -1,14 +1,17 @@
-:root {
-  --black: #000;
-  --white: #fff;
+@value grey: #8C8B8B;
+
+.container {
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0 auto;
+  text-align: center;
+  width: 50%;
 }
 
-.baseStyle {
-  background-color: var(--black);
-  color: var(--white);
+.container hr {
+  border-top: 1px solid grey;
+  margin: 50px 0;
 }
 
-.someStyle {
-  composes: baseStyle;
-  font-size: 18px;
+.container h4 {
+  text-align: left;
 }
diff --git a/packages/generator-electrode/component/templates/packages/component/src/styles/_raleway.css b/packages/generator-electrode/component/templates/packages/component/src/styles/_raleway.css
new file mode 100644
index 000000000..630b751e1
--- /dev/null
+++ b/packages/generator-electrode/component/templates/packages/component/src/styles/_raleway.css
@@ -0,0 +1,96 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Raleway Light'),
+    local('Raleway-Light'),
+    url(http://fonts.gstatic.com/s/raleway/v11/ZKwULyCG95tk6mOqHQfRBAsYbbCjybiHxArTLjt7FRU.woff2)
+      format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Raleway Light'),
+    local('Raleway-Light'),
+    url(http://fonts.gstatic.com/s/raleway/v11/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2)
+      format('woff2');
+  unicode-range: U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2212,
+    U+2215;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Raleway'),
+    local('Raleway-Regular'),
+    url(http://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2)
+      format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Raleway'),
+    local('Raleway-Regular'),
+    url(http://fonts.gstatic.com/s/raleway/v11/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2)
+      format('woff2');
+  unicode-range: U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2212,
+    U+2215;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Raleway SemiBold'),
+    local('Raleway-SemiBold'),
+    url(http://fonts.gstatic.com/s/raleway/v11/STBOO2waD2LpX45SXYjQBQsYbbCjybiHxArTLjt7FRU.woff2)
+      format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Raleway SemiBold'),
+    local('Raleway-SemiBold'),
+    url(http://fonts.gstatic.com/s/raleway/v11/xkvoNo9fC8O2RDydKj12bwzyDMXhdD8sAj6OAJTFsBI.woff2)
+      format('woff2');
+  unicode-range: U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2212,
+    U+2215;
+}
diff --git a/packages/generator-electrode/generators/app/index.js b/packages/generator-electrode/generators/app/index.js
index ab7048648..f10ca349e 100644
--- a/packages/generator-electrode/generators/app/index.js
+++ b/packages/generator-electrode/generators/app/index.js
@@ -2,7 +2,7 @@
 
 /* eslint-disable arrow-parens */
 
-var generators = require("yeoman-generator");
+var Generator = require("yeoman-generator");
 var chalk = require("chalk");
 var yosay = require("yosay");
 var path = require("path");
@@ -15,10 +15,15 @@ var demoHelperPath = require.resolve("electrode-demo-helper");
 const ExpressJS = "ExpressJS";
 const HapiJS = "HapiJS";
 const KoaJS = "KoaJS";
+const pkg = require("../../package.json");
+
+module.exports = class extends Generator {
+  constructor(args, options) {
+    super(args, options);
+
+    this.log(chalk.green("Yeoman Electrode App generator version"), pkg.version);
+    this.log("Loaded from", chalk.magenta(path.dirname(require.resolve("../../package.json"))));
 
-module.exports = generators.Base.extend({
-  constructor: function() {
-    generators.Base.apply(this, arguments);
     this.option("travis", {
       type: Boolean,
       required: false,
@@ -58,14 +63,15 @@ module.exports = generators.Base.extend({
       desc: "Content to insert in the README.md file"
     });
 
+    // Flag to check if the OSS generator is being called as a subgenerator
+    this.isExtended = this.options.isExtended || false;
+
     this.isDemoApp = this.options.isDemoApp || false;
-    //data should be passed to the generator using props
+    // Data should be passed to the generator using props
     this.props = this.options.props || {};
-    //Flag to check if the OSS generator is being called as a subgenerator
-    this.isExtended = this.props.isExtended || false;
-  },
+  }
 
-  initializing: function() {
+  initializing() {
     this.pkg = this.fs.readJSON(this.destinationPath("package.json"), {});
 
     if (this.pkg.keywords) {
@@ -99,146 +105,151 @@ module.exports = generators.Base.extend({
       },
       this.props
     );
-  },
-
-  prompting: {
-    greeting: function() {
-      if (!this.isDemoApp) {
-        this.log(yosay("Welcome to the phenomenal " + chalk.red("Electrode App") + " generator!"));
-      }
-    },
+  }
 
-    askFor: function() {
-      if (this.pkg.name || this.options.name) {
-        this.props.name = this.pkg.name || _.kebabCase(this.options.name);
-      }
+  _askFor() {
+    if (this.pkg.name || this.options.name) {
+      this.props.name = this.pkg.name || _.kebabCase(this.options.name);
+    }
 
-      var prompts = [
-        {
-          type: "input",
-          name: "name",
-          message: "Application Name",
-          when: !this.props.name,
-          default: path.basename(process.cwd())
-        },
-        {
-          type: "input",
-          name: "description",
-          message: "Description",
-          when: !this.props.description
-        },
-        {
-          type: "input",
-          name: "homepage",
-          message: "Project homepage url",
-          when: !this.props.homepage
-        },
-        {
-          type: "list",
-          name: "serverType",
-          message: "Which framework for the server?",
-          when: !this.props.serverType,
-          choices: [HapiJS, ExpressJS, KoaJS],
-          default: HapiJS
-        },
-        {
-          type: "input",
-          name: "authorName",
-          message: "Author's Name",
-          when: !this.props.authorName,
-          default: this.user.git.name(),
-          store: true
-        },
-        {
-          type: "input",
-          name: "authorEmail",
-          message: "Author's Email",
-          when: !this.props.authorEmail,
-          default: this.user.git.email(),
-          store: true
-        },
-        {
-          type: "input",
-          name: "authorUrl",
-          message: "Author's Homepage",
-          when: !this.props.authorUrl,
-          store: true
-        },
-        {
-          type: "input",
-          name: "keywords",
-          message: "Package keywords (comma to split)",
-          when: _.isEmpty(this.pkg.keywords) && _.isEmpty(this.props.keywords),
-          filter: function(words) {
-            return words.split(/\s*,\s*/g).filter(x => x);
-          }
-        },
-        {
-          type: "confirm",
-          name: "pwa",
-          message: "Would you like to make a Progressive Web App?",
-          when: this.props.pwa === undefined,
-          default: false
-        },
-        {
-          type: "confirm",
-          name: "autoSsr",
-          message: "Support disabling server side rendering based on high load?",
-          when: this.props.autoSsr === undefined,
-          default: false
-        },
-        {
-          type: "list",
-          name: "quoteType",
-          message: "Use double quotes or single quotes?",
-          choices: ['"', "'"],
-          when: !this.props.quoteType,
-          default: '"'
-        },
-        {
-          type: "confirm",
-          name: "createDirectory",
-          message: "Would you like to create a new directory for your project?",
-          when: this.props.createDirectory === undefined,
-          default: true
+    var prompts = [
+      {
+        type: "input",
+        name: "name",
+        message: "Application Name",
+        when: !this.props.name,
+        default: path.basename(process.cwd())
+      },
+      {
+        type: "input",
+        name: "description",
+        message: "Description",
+        when: !this.props.description
+      },
+      {
+        type: "input",
+        name: "homepage",
+        message: "Project homepage url",
+        when: !this.props.homepage
+      },
+      {
+        type: "list",
+        name: "serverType",
+        message: "Which framework for the server?",
+        when: !this.props.serverType,
+        choices: [HapiJS, ExpressJS, KoaJS],
+        default: HapiJS
+      },
+      {
+        type: "input",
+        name: "authorName",
+        message: "Author's Name",
+        when: !this.props.authorName,
+        default: this.user.git.name(),
+        store: true
+      },
+      {
+        type: "input",
+        name: "authorEmail",
+        message: "Author's Email",
+        when: !this.props.authorEmail,
+        default: this.user.git.email(),
+        store: true
+      },
+      {
+        type: "input",
+        name: "authorUrl",
+        message: "Author's Homepage",
+        when: !this.props.authorUrl,
+        store: true
+      },
+      {
+        type: "input",
+        name: "keywords",
+        message: "Package keywords (comma to split)",
+        when: _.isEmpty(this.pkg.keywords) && _.isEmpty(this.props.keywords),
+        filter: function(words) {
+          return words.split(/\s*,\s*/g).filter(x => x);
         }
-      ];
+      },
+      {
+        type: "confirm",
+        name: "pwa",
+        message: "Would you like to make a Progressive Web App?",
+        when: !this.props.pwa,
+        default: false
+      },
+      {
+        type: "confirm",
+        name: "autoSsr",
+        message: "Support disabling server side rendering based on high load?",
+        when: !this.props.autoSsr,
+        default: false
+      },
+      {
+        type: "list",
+        name: "quoteType",
+        message: "Use double quotes or single quotes?",
+        choices: ['"', "'"],
+        when: !this.props.quoteType,
+        default: '"'
+      },
+      {
+        type: "confirm",
+        name: "createDirectory",
+        message: "Would you like to create a new directory for your project?",
+        when: !this.props.createDirectory,
+        default: true
+      },
+      {
+        type: "confirm",
+        name: "yarn",
+        message: "Would you like to yarn install packages?",
+        when: !this.props.yarn,
+        default: false
+      }
+    ];
 
-      return this.prompt(prompts).then(props => {
-        this.props = extend(this.props, props);
-        if (this.props.createDirectory) {
-          var newRoot = this.destinationPath() + "/" + _.kebabCase(_.deburr(this.props.name));
-          this.destinationRoot(newRoot);
-        }
-        // saving to storage after the correct destination root is set
-        this.config.set("serverType", this.props.serverType);
-      });
-    },
+    return this.prompt(prompts).then(props => {
+      this.props = extend(this.props, props);
 
-    askForGithubAccount: function() {
-      if (this.props.githubAccount || this.options.githubAccount) {
-        this.props.githubAccount = this.options.githubAccount;
-        return;
+      if (this.props.createDirectory) {
+        var newRoot = this.destinationPath() + "/" + _.kebabCase(_.deburr(this.props.name));
+        this.destinationRoot(newRoot);
       }
-      var done = this.async();
+      // Saving to storage after the correct destination root is set
+      this.config.set("serverType", this.props.serverType);
+    });
+  }
 
-      githubUsername(this.props.authorEmail, (err, username) => {
-        if (err) {
-          username = username || "";
-        }
-        this.prompt({
+  _askForGithubAccount() {
+    if (this.props.githubAccount || this.options.githubAccount) {
+      this.props.githubAccount = this.options.githubAccount;
+      return Promise.resolve();
+    }
+
+    return githubUsername(this.props.authorEmail)
+      .then(username => username, () => "")
+      .then(username => {
+        return this.prompt({
           name: "githubAccount",
           message: "GitHub username or organization",
           default: username
         }).then(prompt => {
           this.props.githubAccount = prompt.githubAccount;
-          done();
         });
       });
+  }
+
+  prompting() {
+    if (!this.isDemoApp) {
+      this.log(yosay("Welcome to the phenomenal " + chalk.red("Electrode App") + " generator!"));
     }
-  },
 
-  writing: function() {
+    return this._askFor().then(this._askForGithubAccount.bind(this));
+  }
+
+  writing() {
     const isHapi = this.config.get("serverType") === HapiJS;
     const isExpress = this.config.get("serverType") === ExpressJS;
     const isPWA = this.props.pwa;
@@ -339,9 +350,13 @@ module.exports = generators.Base.extend({
 
     //copy .eslintc into the client directory
     if (isSingleQuote) {
-      this.template("src/client/.eslintrc", this.destinationPath("src/client/.eslintrc"));
+      this.fs.copy(
+        this.templatePath("src/client/.eslintrc"),
+        this.destinationPath("src/client/.eslintrc")
+      );
     }
-    //special handling for the server file
+
+    // Special handling for the server file
     this.fs.copyTpl(
       this.templatePath("src/server"),
       this.destinationPath("src/server"),
@@ -358,9 +373,8 @@ module.exports = generators.Base.extend({
       this.templatePath("src/client"),
       this.destinationPath("src/client"),
       { pwa: isPWA },
-      {}, // template options
+      {},
       {
-        // copy options
         globOptions: {
           // Images are damaged by the template compiler
           ignore: [
@@ -384,148 +398,101 @@ module.exports = generators.Base.extend({
 
     this.fs.copy(this.templatePath("src/client/images"), this.destinationPath("src/client/images"));
 
-    //copy files from the demoHelper if this is the demo-app
+    // Copy files from the demoHelper if this is the demo-app
     if (this.isDemoApp) {
-      //copy archetype webpack config extension
-      this.fs.copyTpl(
+      // Copy archetype webpack config extension
+      this.fs.copy(
         this.templatePath(getDemoFilePath("archetype")),
         this.destinationPath("archetype"),
         { components: [packageName] }
       );
 
-      //copy home file
+      // Copy home file
       this.fs.copyTpl(
         this.templatePath(getDemoFilePath("src/client/components/Home.jsx")),
         this.destinationPath("src/client/components/home.jsx"),
         { className, packageName, pwa: isPWA }
       );
 
-      //copy reducer file
+      // Copy reducer file
       this.fs.copyTpl(
         this.templatePath(getDemoFilePath("src/client/reducers/index.js")),
         this.destinationPath("src/client/reducers/index.jsx")
       );
 
-      //copy actions file
+      // Copy actions file
       this.fs.copyTpl(
         this.templatePath(getDemoFilePath("src/client/actions/index.js")),
         this.destinationPath("src/client/actions/index.jsx")
       );
     }
-  },
+  }
 
-  default: function() {
+  default() {
     if (this.options.travis) {
-      this.composeWith(
-        "travis",
-        {},
-        {
-          local: require.resolve("generator-travis/generators/app")
-        }
-      );
+      this.composeWith(require.resolve("generator-travis/generators/app"), {});
     }
 
-    this.composeWith(
-      "electrode:editorconfig",
-      {},
-      {
-        local: require.resolve("../editorconfig")
-      }
-    );
+    this.composeWith(require.resolve("../editorconfig"));
+
     if (!this.isDemoApp) {
-      this.composeWith(
-        "electrode:git",
-        {
-          options: {
-            name: this.props.name,
-            githubAccount: this.props.githubAccount,
-            githubUrl: this.props.githubUrl
-          }
-        },
-        {
-          local: require.resolve("../git")
-        }
-      );
+      this.composeWith(require.resolve("../git"), {
+        name: this.props.name,
+        githubAccount: this.props.githubAccount,
+        githubUrl: this.props.githubUrl
+      });
     }
 
     if (this.options.license && !this.pkg.license) {
-      this.composeWith(
-        "license",
-        {
-          options: {
-            name: this.props.authorName,
-            email: this.props.authorEmail,
-            website: this.props.authorUrl,
-            license: this.props.license || ""
-          }
-        },
-        {
-          local: require.resolve("generator-license/app")
-        }
-      );
+      this.composeWith(require.resolve("generator-license"), {
+        name: this.props.authorName,
+        email: this.props.authorEmail,
+        website: this.props.authorUrl,
+        license: this.props.license || ""
+      });
     }
 
     if (!this.fs.exists(this.destinationPath("README.md"))) {
-      this.composeWith(
-        "electrode:readme",
-        {
-          options: {
-            name: this.props.name,
-            description: this.props.description,
-            githubAccount: this.props.githubAccount,
-            authorName: this.props.authorName,
-            authorUrl: this.props.authorUrl,
-            content: this.options.readme
-          }
-        },
-        {
-          local: require.resolve("../readme")
-        }
-      );
+      this.composeWith(require.resolve("../readme"), {
+        name: this.props.name,
+        description: this.props.description,
+        githubAccount: this.props.githubAccount,
+        authorName: this.props.authorName,
+        authorUrl: this.props.authorUrl,
+        content: this.options.readme
+      });
     }
 
     if (!this.fs.exists(this.destinationPath("config/default.js")) && !this.isExtended) {
-      this.composeWith(
-        "electrode:config",
-        {
-          options: {
-            name: this.props.name,
-            pwa: this.props.pwa,
-            serverType: this.props.serverType,
-            isAutoSsr: this.props.autoSsr
-          }
-        },
-        {
-          local: require.resolve("../config")
-        }
-      );
+      this.composeWith(require.resolve("../config"), {
+        name: this.props.name,
+        pwa: this.props.pwa,
+        serverType: this.props.serverType,
+        isAutoSsr: this.props.autoSsr
+      });
     }
 
     if (!this.fs.exists(this.destinationPath("server/plugins/webapp"))) {
-      this.composeWith(
-        "electrode:webapp",
-        {
-          options: {
-            pwa: this.props.pwa,
-            isAutoSsr: this.props.autoSsr
-          }
-        },
-        {
-          local: require.resolve("../webapp")
-        }
-      );
+      this.composeWith(require.resolve("../webapp"), {
+        pwa: this.props.pwa,
+        isAutoSsr: this.props.autoSsr
+      });
     }
-  },
+  }
 
-  install: function() {
+  install() {
     if (!this.isExtended && !this.isDemoApp) {
-      this.installDependencies({
-        bower: false
-      });
+      if (this.props.yarn) {
+        this.yarnInstall();
+      } else {
+        this.installDependencies({
+          bower: false
+        });
+      }
     }
-  },
+  }
 
-  end: function() {
+  end() {
     if (this.props.quoteType === "'") {
       this.spawnCommandSync("node_modules/.bin/eslint", [
         "--fix",
@@ -552,4 +519,4 @@ module.exports = generators.Base.extend({
       );
     }
   }
-});
+};
diff --git a/packages/generator-electrode/generators/app/templates/src/client/styles/custom.css b/packages/generator-electrode/generators/app/templates/src/client/styles/custom.css
index ef971e709..1c3d9bbe1 100644
--- a/packages/generator-electrode/generators/app/templates/src/client/styles/custom.css
+++ b/packages/generator-electrode/generators/app/templates/src/client/styles/custom.css
@@ -58,3 +58,8 @@
 img {
   vertical-align: text-bottom;
 }
+
+.demoAppContainer h2 {
+  margin: 50px 0;
+  text-align: center;
+}
diff --git a/packages/generator-electrode/generators/config/index.js b/packages/generator-electrode/generators/config/index.js
index e2356f69d..2db7de330 100644
--- a/packages/generator-electrode/generators/config/index.js
+++ b/packages/generator-electrode/generators/config/index.js
@@ -1,10 +1,11 @@
 'use strict';
+
+var Generator = require('yeoman-generator');
 var _ = require('lodash');
-var generators = require('yeoman-generator');
 
-module.exports = generators.Base.extend({
-  constructor: function () {
-    generators.Base.apply(this, arguments);
+module.exports = class extends Generator {
+  constructor(args, options) {
+    super(args, options);
 
     this.option('name', {
       type: String,
@@ -21,18 +22,20 @@ module.exports = generators.Base.extend({
     this.option('serverType', {
       type: String,
       required: true,
-      desc: 'Server Type can be hapijs or express'
+      desc: 'Server Type can be hapijs, express or koajs'
     });
+
     this.option('autoSsr', {
       type: String,
       required: true,
       desc: 'Automatically disable server side rendering'
     });
-  },
+  }
 
-  writing: function () {
+  writing() {
     let routeMatch = (this.options.serverType === 'HapiJS') ? "/{args*}" : "*";
-    //do not overwrite if file already exists
+
+    // Do not overwrite if file already exists
     if (!this.fs.exists(this.destinationPath('config/default.js'))) {
       this.fs.copyTpl(
         this.templatePath('default.js'),
@@ -55,4 +58,4 @@ module.exports = generators.Base.extend({
       );
     }
   }
-});
+};
diff --git a/packages/generator-electrode/generators/editorconfig/index.js b/packages/generator-electrode/generators/editorconfig/index.js
index 4f45e7f29..92867874a 100644
--- a/packages/generator-electrode/generators/editorconfig/index.js
+++ b/packages/generator-electrode/generators/editorconfig/index.js
@@ -1,15 +1,16 @@
 'use strict';
-var generators = require('yeoman-generator');
 
-module.exports = generators.Base.extend({
-  constructor: function () {
-    generators.Base.apply(this, arguments);
-  },
+var Generator = require('yeoman-generator');
 
-  initializing: function () {
+module.exports = class extends Generator {
+  constructor(args, options) {
+    super(args, options);
+  }
+
+  initializing() {
     this.fs.copy(
       this.templatePath('editorconfig'),
       this.destinationPath('.editorconfig')
     );
   }
-});
+};
diff --git a/packages/generator-electrode/generators/git/index.js b/packages/generator-electrode/generators/git/index.js
index 5cdf1cb81..4ce5be2ad 100644
--- a/packages/generator-electrode/generators/git/index.js
+++ b/packages/generator-electrode/generators/git/index.js
@@ -1,10 +1,11 @@
 'use strict';
-var generators = require('yeoman-generator');
-var originUrl = require('git-remote-origin-url');
 
-module.exports = generators.Base.extend({
-  constructor: function () {
-    generators.Base.apply(this, arguments);
+var Generator = require('yeoman-generator');
+var gitRemoteOriginUrl = require('git-remote-origin-url');
+
+module.exports = class extends Generator {
+  constructor(args, options) {
+    super(args, options);
 
     this.option('name', {
       type: String,
@@ -17,11 +18,12 @@ module.exports = generators.Base.extend({
       required: true,
       desc: 'GitHub username or organization'
     });
+
     // Set a gitHub uRL if being passed
     this.githubUrl = this.options.githubUrl || "https://github.com";
-  },
+  }
 
-  initializing: function () {
+  initializing() {
     this.fs.copy(
       this.templatePath('gitattributes'),
       this.destinationPath('.gitattributes')
@@ -32,15 +34,15 @@ module.exports = generators.Base.extend({
       this.destinationPath('.gitignore')
     );
 
-    return originUrl(this.destinationPath())
+    return gitRemoteOriginUrl()
       .then(function (url) {
         this.originUrl = url;
       }.bind(this), function () {
         this.originUrl = '';
       }.bind(this));
-  },
+  }
 
-  writing: function () {
+  writing() {
     this.pkg = this.fs.readJSON(this.destinationPath('package.json'), {});
 
     var repository = '';
@@ -56,19 +58,20 @@ module.exports = generators.Base.extend({
       this.pkg.repository.url = repository;
     }
 
-    //overwrite with given repo path if present
+    // Overwrite with given repo path if present
     if (this.options.githubUrl) {
       this.pkg.repository.url = [this.options.githubUrl, this.options.githubAccount, this.options.name].filter((x) => x).join("/");
     }
+
     this.fs.writeJSON(this.destinationPath('package.json'), this.pkg);
-  },
+  }
 
-  end: function () {
+  end() {
     this.spawnCommandSync('git', ['init'], {
       cwd: this.destinationPath()
     });
 
-    // prioritize given repo URL if present
+    // Prioritize given repo URL if present
     if (this.options.githubUrl) {
       this.spawnCommandSync('git', ['remote', 'add', 'origin', this.pkg.repository.url], {
         cwd: this.destinationPath()
@@ -84,4 +87,4 @@ module.exports = generators.Base.extend({
       });
     }
   }
-});
+};
diff --git a/packages/generator-electrode/generators/readme/index.js b/packages/generator-electrode/generators/readme/index.js
index 524572b7f..4243fd89f 100644
--- a/packages/generator-electrode/generators/readme/index.js
+++ b/packages/generator-electrode/generators/readme/index.js
@@ -1,10 +1,11 @@
 'use strict';
+
+var Generator = require('yeoman-generator');
 var _ = require('lodash');
-var generators = require('yeoman-generator');
 
-module.exports = generators.Base.extend({
-  constructor: function () {
-    generators.Base.apply(this, arguments);
+module.exports = class extends Generator {
+  constructor(args, options) {
+    super(args, options);
 
     this.option('name', {
       type: String,
@@ -47,10 +48,11 @@ module.exports = generators.Base.extend({
       required: false,
       desc: 'Readme content'
     });
-  },
+  }
 
-  writing: function () {
+  writing() {
     var pkg = this.fs.readJSON(this.destinationPath('package.json'), {});
+
     this.fs.copyTpl(
       this.templatePath('README.md'),
       this.destinationPath('README.md'),
@@ -69,4 +71,4 @@ module.exports = generators.Base.extend({
       }
     );
   }
-});
+};
diff --git a/packages/generator-electrode/generators/webapp/index.js b/packages/generator-electrode/generators/webapp/index.js
index 94afcae31..d4f294089 100644
--- a/packages/generator-electrode/generators/webapp/index.js
+++ b/packages/generator-electrode/generators/webapp/index.js
@@ -1,9 +1,10 @@
 'use strict';
-var generators = require('yeoman-generator');
 
-module.exports = generators.Base.extend({
-  constructor: function () {
-    generators.Base.apply(this, arguments);
+var Generator = require('yeoman-generator');
+
+module.exports = class extends Generator {
+  constructor(args, options) {
+    super(args, options);
 
     this.option('generateInto', {
       type: String,
@@ -17,12 +18,12 @@ module.exports = generators.Base.extend({
       required: true,
       desc: 'Progressive Web App'
     });
-  },
+  }
 
-  writing: function () {
+  writing() {
     const isHapi = this.config.get('serverType') === 'hapijs';
 
-    this.fs.copyTpl(
+    this.fs.copy(
       this.templatePath('src/server'),
       this.destinationPath(this.options.generateInto, 'src/server'),
       {
@@ -54,4 +55,4 @@ module.exports = generators.Base.extend({
       );
     }
   }
-});
+};
diff --git a/packages/generator-electrode/package.json b/packages/generator-electrode/package.json
index cee7b115e..531944ec4 100644
--- a/packages/generator-electrode/package.json
+++ b/packages/generator-electrode/package.json
@@ -20,24 +20,25 @@
     "component",
     "component-add"
   ],
-  "main": "generators/index.js",
+  "main": "generators/app/index.js",
   "keywords": [
     "Electrode",
     "React",
+    "Nodejs",
     "yeoman-generator"
   ],
   "dependencies": {
     "chalk": "^1.0.0",
     "electrode-demo-helper": "^2.0.0",
-    "generator-license": "^5.0.0",
-    "generator-travis": "^1.3.0",
+    "generator-license": "^5.1.0",
+    "generator-travis": "^1.5.1",
     "git-remote-origin-url": "^2.0.0",
-    "github-username": "^2.1.0",
+    "github-username": "^4.0.0",
     "lodash": "^4.16.1",
-    "parse-author": "^1.0.0",
-    "yeoman-generator": "^0.23.4",
+    "parse-author": "^2.0.0",
+    "yeoman-generator": "^1.1.0",
     "yeoman-option-or-prompt": "^2.0.0",
-    "yosay": "^1.0.0"
+    "yosay": "^2.0.0"
   },
   "devDependencies": {
     "electrode-archetype-njs-module-dev": "^2.1.0",
@@ -45,8 +46,8 @@
     "pinkie-promise": "^2.0.1",
     "xclap": "^0.2.0",
     "xclap-cli": "^0.1.1",
-    "yeoman-assert": "^2.2.1",
-    "yeoman-test": "^1.4.0"
+    "yeoman-assert": "^3.0.0",
+    "yeoman-test": "^1.6.0"
   },
   "eslintConfig": {
     "env": {
diff --git a/packages/generator-electrode/test/app.js b/packages/generator-electrode/test/app.js
new file mode 100644
index 000000000..284f41156
--- /dev/null
+++ b/packages/generator-electrode/test/app.js
@@ -0,0 +1,93 @@
+"use strict";
+const mockery = require("mockery");
+const path = require("path");
+const assert = require("yeoman-assert");
+const helpers = require("yeoman-test");
+const Promise = require("pinkie-promise");
+
+describe("electrode:app", function () {
+  before(function () {
+    mockery.enable({
+      warnOnReplace: false,
+      warnOnUnregistered: false
+    });
+
+    mockery.registerMock("npm-name", function () {
+      return Promise.resolve(true);
+    });
+
+    mockery.registerMock("github-username", function () {
+      return Promise.resolve(true);
+    });
+
+    mockery.registerMock(
+      require.resolve("generator-license/app"),
+      helpers.createDummyGenerator()
+    );
+  });
+
+  after(function () {
+    mockery.disable();
+  });
+
+  describe("running on new project", function () {
+    before(function () {
+      this.answers = {
+        name: "generator-electrode",
+        description: "Electrode app generator",
+        homepage: "http://electrode.io",
+        githubAccount: "electrode-io",
+        authorName: "Electrode",
+        authorEmail: "hi@electrode.io",
+        authorUrl: "http://electrode.io",
+        keywords: ["foo", "bar"]
+      };
+      return helpers.run(path.join(__dirname, "../generators/app"))
+        .withPrompts(this.answers)
+        .toPromise();
+    });
+
+    it("creates files", function () {
+      assert.file([
+        ".travis.yml",
+        ".editorconfig",
+        ".gitignore",
+        ".gitattributes",
+        "README.md"
+      ]);
+    });
+
+    it("creates package.json", function () {
+      assert.file("package.json");
+      assert.jsonFileContent("package.json", {
+        name: "generator-electrode",
+        version: "0.0.1",
+        description: this.answers.description,
+        homepage: this.answers.homepage,
+        repository: {url: "electrode-io/generator-electrode"},
+        author: {
+          name: this.answers.authorName,
+          email: this.answers.authorEmail,
+          url: this.answers.authorUrl
+        },
+        files: [],
+        keywords: this.answers.keywords,
+        main: "server/index.js"
+      });
+    });
+
+    it("creates and fill contents in README.md", function () {
+      assert.file("README.md");
+      assert.fileContent("README.md", "var generatorElectrode = require(\"generator-electrode\");");
+      assert.fileContent("README.md", "> Electrode app generator");
+      assert.fileContent("README.md", "$ npm install --save generator-electrode");
+      assert.fileContent("README.md", "© [Electrode](http://electrode.io)");
+      assert.fileContent("README.md", "[travis-image]: https://travis-ci.org/electrode-io/generator-electrode.svg?branch=master");
+    });
+
+    it("creates and fills the pageTitle field in config/default.js", function () {
+      assert.file("./config/default.js");
+      assert.fileContent("./config/default.js", "'pageTitle': 'generator-electrode'");
+    });
+  });
+});
diff --git a/packages/generator-electrode/test/spec/app.spec.js b/packages/generator-electrode/test/spec/app.spec.js
index 59eb0b47a..ffdad5424 100644
--- a/packages/generator-electrode/test/spec/app.spec.js
+++ b/packages/generator-electrode/test/spec/app.spec.js
@@ -17,8 +17,8 @@ describe("electrode:app", function() {
       return Promise.resolve(true);
     });
 
-    mockery.registerMock("github-username", function(name, cb) {
-      cb(null, "unicornUser");
+    mockery.registerMock("github-username", function() {
+      return Promise.resolve(true);
     });
 
     mockery.registerMock(require.resolve("generator-license/app"), helpers.createDummyGenerator());