From 7c6fb94fbe9a04fda4447dc759baf19f2dcdbcf1 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Sun, 23 Nov 2014 21:49:49 -0800
Subject: [PATCH 01/20] Integrate npm bootstrap-sass; Remove bootstrap-sass
 gem; Update README

---
 Gemfile                                     |  3 ---
 README.md                                   | 20 ++++++++++--------
 app/assets/javascripts/application.js       |  1 -
 app/assets/stylesheets/application.css.scss |  2 --
 package.json                                |  4 ++++
 webpack/webpack.rails.config.js             | 23 ++++++++++++++++++---
 6 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/Gemfile b/Gemfile
index 106e047c1..423e37b6c 100644
--- a/Gemfile
+++ b/Gemfile
@@ -51,7 +51,4 @@ group :development, :test do
   gem 'spring'
 end
 
-
-gem 'bootstrap-sass', '~> 3.2.0'
 gem 'autoprefixer-rails'
-
diff --git a/README.md b/README.md
index 283d4c86b..4681f02dc 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,17 @@ That's totally different than "Live Reload" which refreshes the browser.
 
 # Rails
 
+## Automatically building the rails-bundle.js
+Run this command to automatically build the rails-bundle.js file in the
+javascript directory whenever your jsx files change.
+
+```
+cd webpack
+webpack -w --config webpack.rails.config.js
+```
+
+## Run Rails
+
 ```
 bundle install
 rake db:setup
@@ -47,15 +58,6 @@ Point browser to [http://0.0.0.0:4000]().
 
 It's important to run the rails server on different port than the node server.
 
-## Automatically Building the rails-bundle.js
-Run this command to automatically build the rails-bundle.js file in the
-javascript directory whenever your jsx files change.
-
-```
-cd webpack
-webpack -w --config webpack.rails.config.js
-```
-
 # Webpack Configuration
 `webpack.hot.config.js`: Used by server.js to run the demo server.
 `webpack.rails.config.js`: Used to generate the rails-bundle.js file
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 84848b981..6849a6c6b 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -17,4 +17,3 @@
 
 //= require rails-bundle
 //= require turbolinks
-//= require bootstrap-sprockets
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 362920b02..42d5221b1 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,4 +1,2 @@
-@import "bootstrap-sprockets";
-@import "bootstrap";
 @import "../../../webpack/assets/stylesheets/test-stylesheet";
 @import "../../../webpack/assets/stylesheets/test-sass-stylesheet";
diff --git a/package.json b/package.json
index 954f50004..debf2bb18 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,10 @@
     "node": "0.10.32"
   },
   "dependencies": {
+    "bootstrap-sass": "~3.3.1",
+    "bootstrap-sass-loader": "~0.0.4",
+    "imports-loader": "^0.6.3",
+    "extract-text-webpack-plugin": "~0.3.5",
     "body-parser": "^1.9.0",
     "bootstrap-webpack": "*",
     "es6-loader": "^0.2.0",
diff --git a/webpack/webpack.rails.config.js b/webpack/webpack.rails.config.js
index b0b194322..e958ea4ef 100644
--- a/webpack/webpack.rails.config.js
+++ b/webpack/webpack.rails.config.js
@@ -12,7 +12,16 @@ module.exports = {
   entry: [
     // to expose something Rails specific, uncomment the next line
     //"./scripts/rails_only",
-    "./assets/javascripts/example"
+    "./assets/javascripts/example",
+
+    // Alternative for including everything with no customization
+    'bootstrap-sass-loader'
+    //
+    // Example of using customization file
+    //'bootstrap-sass!./bootstrap-sass.config.js'
+    //
+    // Example of using customization file with ExtractTextPlugin
+    //"bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js"
   ],
   output: {
     filename: railsBundleFile,
@@ -28,9 +37,18 @@ module.exports = {
   },
   module: {
     loaders: [
+      // **IMPORTANT** This is needed so that each bootstrap js file required by
+      // bootstrap-sass-loader has access to the jQuery object
+      { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
+      { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
+      { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
+      { test: /\.ttf$/,    loader: "file-loader" },
+      { test: /\.eot$/,    loader: "file-loader" },
+      { test: /\.svg$/,    loader: "file-loader" },
+
       { test: /\.jsx$/, loaders: ['es6', 'jsx?harmony'] },
       // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
-      //   in the Rails Asset Pipeline. Thus, load this one prior.
+      // in the Rails Asset Pipeline. Thus, load this one prior.
       { test: require.resolve("jquery"), loader: "expose?jQuery" },
       { test: require.resolve("jquery"), loader: "expose?$" }
     ]
@@ -47,4 +65,3 @@ if (devBuild) {
 } else {
   console.log("Webpack production build for rails");
 }
-

From 3856dc80585cbb3b0ba3f13dacd1ee83b68ccfae Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Wed, 26 Nov 2014 09:14:34 -0800
Subject: [PATCH 02/20] Integrate with webpack ExtractTextPlugin

---
 Gemfile.lock                                  |  3 -
 app/assets/stylesheets/application.css.scss   |  1 +
 package.json                                  |  1 -
 webpack/_bootstrap-customizations.scss        | 10 +++
 webpack/_main.scss                            | 66 ++++++++++++++
 webpack/bootstrap-sass.config.js              | 79 +++++++++++++++++
 ...otstrap-sass.extract-text-plugin.config.js | 85 +++++++++++++++++++
 webpack/webpack.rails.config.js               | 38 +++++----
 8 files changed, 262 insertions(+), 21 deletions(-)
 create mode 100644 webpack/_bootstrap-customizations.scss
 create mode 100644 webpack/_main.scss
 create mode 100644 webpack/bootstrap-sass.config.js
 create mode 100644 webpack/bootstrap-sass.extract-text-plugin.config.js

diff --git a/Gemfile.lock b/Gemfile.lock
index cb7d8e3d4..03075eb5e 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -39,8 +39,6 @@ GEM
       execjs
     binding_of_caller (0.7.3.pre1)
       debug_inspector (>= 0.0.1)
-    bootstrap-sass (3.2.0.1)
-      sass (~> 3.2)
     builder (3.2.2)
     byebug (3.2.0)
       columnize (~> 0.8)
@@ -161,7 +159,6 @@ PLATFORMS
 
 DEPENDENCIES
   autoprefixer-rails
-  bootstrap-sass (~> 3.2.0)
   byebug
   coffee-rails (~> 4.0.0)
   jbuilder (~> 2.0)
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 42d5221b1..efac9f1ce 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,2 +1,3 @@
 @import "../../../webpack/assets/stylesheets/test-stylesheet";
 @import "../../../webpack/assets/stylesheets/test-sass-stylesheet";
+@import "bootstrap-and-customizations";
diff --git a/package.json b/package.json
index debf2bb18..a1003c843 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
     "bootstrap-sass": "~3.3.1",
     "bootstrap-sass-loader": "~0.0.4",
     "imports-loader": "^0.6.3",
-    "extract-text-webpack-plugin": "~0.3.5",
     "body-parser": "^1.9.0",
     "bootstrap-webpack": "*",
     "es6-loader": "^0.2.0",
diff --git a/webpack/_bootstrap-customizations.scss b/webpack/_bootstrap-customizations.scss
new file mode 100644
index 000000000..61f7b9bbd
--- /dev/null
+++ b/webpack/_bootstrap-customizations.scss
@@ -0,0 +1,10 @@
+// ## Customize Variables
+
+// This gets loaded after bootstrap/variables is loaded, so you can refer to bootstrap variables
+// Remove borders around `<pre>` block so the code
+// flows with our right column layout.
+$pre-border-color: $pre-bg; // hide the border.
+
+// This makes the font on the buttons and the text BIG
+$font-size-base: 18px;
+
diff --git a/webpack/_main.scss b/webpack/_main.scss
new file mode 100644
index 000000000..5a0cb7809
--- /dev/null
+++ b/webpack/_main.scss
@@ -0,0 +1,66 @@
+// This file is used as part of the bootstrap-sass-loader customization
+// Compare this to main.scss (no underscore) which is loaded by itself
+// ## Baseline
+
+// Included from bootstrap.config.less.
+body {
+  padding-top: 20px;
+}
+
+#main-entry-point {
+  color: pink;
+}
+
+.doc-content {
+  padding-top: 10px;
+}
+
+// ## Nav
+// When nav is affixed, set it's position and size.
+#nav.affix {
+  position: fixed;
+  top: 3px;
+  width: 80%;
+  z-index: 10;
+}
+
+// ## Code
+// Set up table to render two column view
+// of documentation on left and code, syntax
+// highlighted on the right.
+table.file-table {
+  width: 100%;
+  border-radius: $border-radius-base;
+  border: 0px;
+  border-spacing: 0px;
+  display: table;
+  table-layout: fixed;
+
+  td.file-docs {
+    background-color: #fff;
+    width: 30%;
+    max-width: 30%;
+    text-overflow: ellipsis;
+    padding: 5px;
+    vertical-align: top;
+  }
+
+  td.file-code {
+    border-left: 1px groove darken(#f5f5f5, 20%);
+    background-color: #f5f5f5;
+    color: #333;
+    width: 70%;
+    max-width: 70%;
+    text-overflow: ellipsis;
+    padding-left: 5px;
+    vertical-align: bottom;
+  }
+  // Remove extra separation between the code
+  // so it looks more like one continuous block.
+  pre.prettyprint {
+    padding: 0 !important;
+    border: 0 !important;
+    margin: 0 0 !important;
+  }
+}
+
diff --git a/webpack/bootstrap-sass.config.js b/webpack/bootstrap-sass.config.js
new file mode 100644
index 000000000..c8717b1a1
--- /dev/null
+++ b/webpack/bootstrap-sass.config.js
@@ -0,0 +1,79 @@
+module.exports = {
+  bootstrapCustomizations: "./_bootstrap-customizations.scss",
+  mainSass: "./_main.scss",
+
+  // Default for the style loading is to put in your js files
+  // styleLoader: "style-loader!css-loader!sass-loader";
+
+  // If you want to use the ExtractTextPlugin
+  //   and you want compressed
+  //     styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
+  //   or if you want expanded CSS
+  //     styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass?outputStyle=expanded"),
+
+  // ### Scripts
+  // Any scripts here set to false will never
+  // make it to the client, it's not packaged
+  // by webpack.
+  scripts: {
+    'transition': true,
+    'alert': true,
+    'button': true,
+    'carousel': true,
+    'collapse': true,
+    'dropdown': true,
+    'modal': true,
+    'tooltip': true,
+    'popover': true,
+    'scrollspy': true,
+    'tab': true,
+    'affix': true
+  },
+  // ### Styles
+  // Enable or disable certain less components and thus remove
+  // the css for them from the build.
+  styles: {
+    "mixins": true,
+
+    "normalize": true,
+    "print": true,
+
+    "scaffolding": true,
+    "type": true,
+    "code": true,
+    "grid": true,
+    "tables": true,
+    "forms": true,
+    "buttons": true,
+
+    "component-animations": true,
+    "glyphicons": true,
+    "dropdowns": true,
+    "button-groups": true,
+    "input-groups": true,
+    "navs": true,
+    "navbar": true,
+    "breadcrumbs": true,
+    "pagination": true,
+    "pager": true,
+    "labels": true,
+    "badges": true,
+    "jumbotron": true,
+    "thumbnails": true,
+    "alerts": true,
+    "progress-bars": true,
+    "media": true,
+    "list-group": true,
+    "panels": true,
+    "wells": true,
+    "close": true,
+
+    "modals": true,
+    "tooltip": true,
+    "popovers": true,
+    "carousel": true,
+
+    "utilities": true,
+    "responsive-utilities": true
+  }
+};
diff --git a/webpack/bootstrap-sass.extract-text-plugin.config.js b/webpack/bootstrap-sass.extract-text-plugin.config.js
new file mode 100644
index 000000000..289545a00
--- /dev/null
+++ b/webpack/bootstrap-sass.extract-text-plugin.config.js
@@ -0,0 +1,85 @@
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+  verbose: true, // Set to true to show diagnostic information
+
+  bootstrapCustomizations: "./_bootstrap-customizations.scss",
+  mainSass: "./_main.scss",
+
+  // Default for the style loading is to put in your js files
+  // styleLoader: "style-loader!css-loader!sass-loader",
+  // If you want to use the ExtractTextPlugin
+  //   and you want compressed
+  //styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
+
+  // If you want expanded CSS
+  styleLoader: ExtractTextPlugin.extract("style-loader",
+                                         "css-loader!sass-loader?outputStyle=expanded"),
+                                         //{ publicPath: "../" }),
+
+  // ### Scripts
+  // Any scripts here set to false will never
+  // make it to the client, it's not packaged
+  // by webpack.
+  scripts: {
+    'transition': true,
+    'alert': true,
+    'button': true,
+    'carousel': true,
+    'collapse': true,
+    'dropdown': true,
+    'modal': true,
+    'tooltip': true,
+    'popover': true,
+    'scrollspy': true,
+    'tab': true,
+    'affix': true
+  },
+  // ### Styles
+  // Enable or disable certain less components and thus remove
+  // the css for them from the build.
+  styles: {
+    "mixins": true,
+
+    "normalize": true,
+    "print": true,
+
+    "scaffolding": true,
+    "type": true,
+    "code": true,
+    "grid": true,
+    "tables": true,
+    "forms": true,
+    "buttons": true,
+
+    "component-animations": true,
+    "glyphicons": true,
+    "dropdowns": true,
+    "button-groups": true,
+    "input-groups": true,
+    "navs": true,
+    "navbar": true,
+    "breadcrumbs": true,
+    "pagination": true,
+    "pager": true,
+    "labels": true,
+    "badges": true,
+    "jumbotron": true,
+    "thumbnails": true,
+    "alerts": true,
+    "progress-bars": true,
+    "media": true,
+    "list-group": true,
+    "panels": true,
+    "wells": true,
+    "close": true,
+
+    "modals": true,
+    "tooltip": true,
+    "popovers": true,
+    "carousel": true,
+
+    "utilities": true,
+    "responsive-utilities": true
+  }
+};
diff --git a/webpack/webpack.rails.config.js b/webpack/webpack.rails.config.js
index e958ea4ef..4e78e4b86 100644
--- a/webpack/webpack.rails.config.js
+++ b/webpack/webpack.rails.config.js
@@ -2,26 +2,21 @@
 // cd webpack && webpack -w --config webpack.rails.config.js
 
 var path = require("path");
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var railsBundleFile = "rails-bundle.js";
 var railsJsAssetsDir = "../app/assets/javascripts";
-var railsBundleMapFile = railsBundleFile + ".map";
-var railsBundleMapRelativePath = "../../../public/assets/" + railsBundleMapFile;
+//var railsBundleMapFile = railsBundleFile + ".map";
+//var railsBundleMapRelativePath = "../../../public/assets/" + railsBundleMapFile;
 
 module.exports = {
   context: __dirname,
   entry: [
-    // to expose something Rails specific, uncomment the next line
-    //"./scripts/rails_only",
+    //"./scripts/rails_only", // uncomment to expose Rails specific
     "./assets/javascripts/example",
 
-    // Alternative for including everything with no customization
-    'bootstrap-sass-loader'
-    //
-    // Example of using customization file
-    //'bootstrap-sass!./bootstrap-sass.config.js'
-    //
-    // Example of using customization file with ExtractTextPlugin
-    //"bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js"
+    //'bootstrap-sass-loader' // include all bootstrap
+    //'bootstrap-sass!./bootstrap-sass.config.js' // use custom bootstrap file
+    'bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js' // use custom bootstrap file w/ ExtractTextPlugin
   ],
   output: {
     filename: railsBundleFile,
@@ -41,10 +36,16 @@ module.exports = {
       // bootstrap-sass-loader has access to the jQuery object
       { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
       { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
-      { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
-      { test: /\.ttf$/,    loader: "file-loader" },
-      { test: /\.eot$/,    loader: "file-loader" },
-      { test: /\.svg$/,    loader: "file-loader" },
+      // Load Bootstrap's CSS
+      // Needed for the css-loader when [bootstrap-sass-loader]
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&minetype=application/font-woff" },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=application/octet-stream" },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=image/svg+xml" },
+      //{ test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
+      //{ test: /\.ttf$/,    loader: "file-loader" },
+      //{ test: /\.eot$/,    loader: "file-loader" },
+      //{ test: /\.svg$/,    loader: "file-loader" },
 
       { test: /\.jsx$/, loaders: ['es6', 'jsx?harmony'] },
       // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
@@ -52,7 +53,10 @@ module.exports = {
       { test: require.resolve("jquery"), loader: "expose?jQuery" },
       { test: require.resolve("jquery"), loader: "expose?$" }
     ]
-  }
+  },
+  plugins: [
+    new ExtractTextPlugin("../stylesheets/bootstrap-and-customizations.css")
+  ]
 };
 
 var devBuild = (typeof process.env["BUILDPACK_URL"]) === "undefined";

From 2c9724093499cc144f7341f73d290a66c76b6e16 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Wed, 26 Nov 2014 20:46:23 -0800
Subject: [PATCH 03/20] Create webpack.common.config.js

---
 webpack/webpack.common.config.js | 35 ++++++++++++++++++++++++++++++++
 webpack/webpack.hot.config.js    |  5 +----
 webpack/webpack.rails.config.js  | 22 +++++++++++++-------
 3 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 webpack/webpack.common.config.js

diff --git a/webpack/webpack.common.config.js b/webpack/webpack.common.config.js
new file mode 100644
index 000000000..29e17903d
--- /dev/null
+++ b/webpack/webpack.common.config.js
@@ -0,0 +1,35 @@
+// Common webpack configuration used by webpack.hot.config and webpack.rails.config.
+
+var path = require("path");
+
+module.exports = {
+  devtool: "eval-source-map",
+  context: __dirname, // the project dir
+  entry: [
+    "./assets/javascripts/example"
+  ],
+  // In case you wanted to load jQuery from the CDN, this is how you would do it:
+  // externals: {
+  //   jquery: "var jQuery"
+  // },
+  resolve: {
+    root: [ path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
+            path.join(__dirname, "assets/stylesheets") ],
+    extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".scss", ".css", "config.js"]
+  },
+  module: {
+    loaders: [
+      { test: require.resolve("react"), loader: "expose?React" },
+      { test: /\.jsx$/, loaders: ["react-hot", "es6", "jsx?harmony"] },
+      { test: /\.css$/, loader: "style-loader!css-loader" },
+      { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
+
+      // the url-loader uses DataUrls.
+      // the file-loader emits files.
+      { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
+      { test: /\.ttf$/,    loader: "file-loader" },
+      { test: /\.eot$/,    loader: "file-loader" },
+      { test: /\.svg$/,    loader: "file-loader" }
+    ]
+  }
+};
diff --git a/webpack/webpack.hot.config.js b/webpack/webpack.hot.config.js
index 95f1bd28a..7bfc2c5a5 100644
--- a/webpack/webpack.hot.config.js
+++ b/webpack/webpack.hot.config.js
@@ -1,5 +1,6 @@
 var webpack = require("webpack");
 var path = require("path");
+
 module.exports = {
   devtool: "eval-source-map",
 
@@ -18,10 +19,6 @@ module.exports = {
   plugins: [
     new webpack.HotModuleReplacementPlugin()
   ],
-  // In case you wanted to load jQuery from the CDN, this is how you would do it:
-  // externals: {
-  //   jquery: "var jQuery"
-  // },
   resolve: {
     root: [ path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
             path.join(__dirname, "assets/stylesheets") ],
diff --git a/webpack/webpack.rails.config.js b/webpack/webpack.rails.config.js
index 4e78e4b86..5cd705a0e 100644
--- a/webpack/webpack.rails.config.js
+++ b/webpack/webpack.rails.config.js
@@ -22,7 +22,7 @@ module.exports = {
     filename: railsBundleFile,
     path: railsJsAssetsDir
   },
-  // Let's load jQuery from the CDN or rails asset pipeline
+  // Load jQuery from the CDN or rails asset pipeline
   externals: {
     jquery: "var jQuery"
   },
@@ -34,20 +34,28 @@ module.exports = {
     loaders: [
       // **IMPORTANT** This is needed so that each bootstrap js file required by
       // bootstrap-sass-loader has access to the jQuery object
-      { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
-      { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
+      { test: /bootstrap-sass\/assets\/javascripts\//,
+        loader: 'imports?jQuery=jquery' },
+      { test: /\.scss$/,
+        loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
+
       // Load Bootstrap's CSS
       // Needed for the css-loader when [bootstrap-sass-loader]
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&minetype=application/font-woff" },
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=application/octet-stream" },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=image/svg+xml" },
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url?limit=10000&minetype=application/font-woff" },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url?limit=10000&minetype=application/octet-stream" },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "file" },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url?limit=10000&minetype=image/svg+xml" },
       //{ test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
       //{ test: /\.ttf$/,    loader: "file-loader" },
       //{ test: /\.eot$/,    loader: "file-loader" },
       //{ test: /\.svg$/,    loader: "file-loader" },
 
       { test: /\.jsx$/, loaders: ['es6', 'jsx?harmony'] },
+
       // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
       // in the Rails Asset Pipeline. Thus, load this one prior.
       { test: require.resolve("jquery"), loader: "expose?jQuery" },

From 8e860f7ad116addf71e723b2ce3e5e955ad1058a Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Wed, 26 Nov 2014 21:41:31 -0800
Subject: [PATCH 04/20] Extract duplicate code into webpack.common.config

---
 webpack/server.js                |  10 +--
 webpack/webpack.common.config.js |   4 +-
 webpack/webpack.hot.config.js    |  48 +++-----------
 webpack/webpack.rails.config.js  | 108 ++++++++++++-------------------
 4 files changed, 52 insertions(+), 118 deletions(-)

diff --git a/webpack/server.js b/webpack/server.js
index 5e746c649..447770027 100644
--- a/webpack/server.js
+++ b/webpack/server.js
@@ -5,14 +5,13 @@ var config = require('./webpack.hot.config');
 var sleep = require('sleep');
 
 var comments = [{author: 'Pete Hunt', text: 'Hey there!'},
-  {author: 'Justin Gordon', text: 'Aloha from @railsonmaui'}
-];
+                {author: 'Justin Gordon', text: 'Aloha from @railsonmaui'}];
 
 var server = new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
   hot: true,
   stats: { colors: true}
-})
+});
 
 server.app.use(bodyParser.json());
 server.app.use(bodyParser.urlencoded({extended: true}));
@@ -33,9 +32,6 @@ server.app.post('/comments.json', function(req, res) {
 });
 
 server.listen(3000, 'localhost', function (err, result) {
-  if (err) {
-    console.log(err);
-  }
-
+  if (err) { console.log(err); }
   console.log('Listening at localhost:3000');
 });
diff --git a/webpack/webpack.common.config.js b/webpack/webpack.common.config.js
index 29e17903d..73c4a2190 100644
--- a/webpack/webpack.common.config.js
+++ b/webpack/webpack.common.config.js
@@ -5,9 +5,7 @@ var path = require("path");
 module.exports = {
   devtool: "eval-source-map",
   context: __dirname, // the project dir
-  entry: [
-    "./assets/javascripts/example"
-  ],
+  entry: [ "./assets/javascripts/example" ],
   // In case you wanted to load jQuery from the CDN, this is how you would do it:
   // externals: {
   //   jquery: "var jQuery"
diff --git a/webpack/webpack.hot.config.js b/webpack/webpack.hot.config.js
index 7bfc2c5a5..7540ab59e 100644
--- a/webpack/webpack.hot.config.js
+++ b/webpack/webpack.hot.config.js
@@ -1,42 +1,10 @@
+var config = require("./webpack.common.config");
 var webpack = require("webpack");
-var path = require("path");
 
-module.exports = {
-  devtool: "eval-source-map",
-
-  context: __dirname, //  + "/../app/assets/javascripts",
-  entry: [
-    "webpack-dev-server/client?http://localhost:3000",
-    "webpack/hot/dev-server",
-    "./scripts/webpack_only",
-    "./assets/javascripts/example"
-  ],
-  // Note, this file is not actually saved, but used by the express server
-  output: {
-    filename: "express-bundle.js",
-    path: __dirname
-  },
-  plugins: [
-    new webpack.HotModuleReplacementPlugin()
-  ],
-  resolve: {
-    root: [ path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
-            path.join(__dirname, "assets/stylesheets") ],
-    extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".scss", ".css", "config.js"]
-  },
-  module: {
-    loaders: [
-      { test: require.resolve("react"), loader: "expose?React" },
-      { test: /\.jsx$/, loaders: ["react-hot", "es6", "jsx?harmony"] },
-      { test: /\.css$/, loader: "style-loader!css-loader" },
-      { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
-
-      // the url-loader uses DataUrls.
-      // the file-loader emits files.
-      { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
-      { test: /\.ttf$/,    loader: "file-loader" },
-      { test: /\.eot$/,    loader: "file-loader" },
-      { test: /\.svg$/,    loader: "file-loader" }
-    ]
-  }
-};
+config.entry.push("webpack-dev-server/client?http://localhost:3000",
+                  "webpack/hot/dev-server",
+                  "./scripts/webpack_only");
+config.output = { filename: "express-bundle.js", // this file is never saved
+                  path: __dirname };
+config.plugins = [ new webpack.HotModuleReplacementPlugin() ];
+module.exports = config;
diff --git a/webpack/webpack.rails.config.js b/webpack/webpack.rails.config.js
index 5cd705a0e..74315c79f 100644
--- a/webpack/webpack.rails.config.js
+++ b/webpack/webpack.rails.config.js
@@ -1,79 +1,51 @@
 // Run like this
 // cd webpack && webpack -w --config webpack.rails.config.js
 
+var config = require("./webpack.common.config");
 var path = require("path");
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
-var railsBundleFile = "rails-bundle.js";
-var railsJsAssetsDir = "../app/assets/javascripts";
-//var railsBundleMapFile = railsBundleFile + ".map";
-//var railsBundleMapRelativePath = "../../../public/assets/" + railsBundleMapFile;
 
-module.exports = {
-  context: __dirname,
-  entry: [
-    //"./scripts/rails_only", // uncomment to expose Rails specific
-    "./assets/javascripts/example",
-
-    //'bootstrap-sass-loader' // include all bootstrap
-    //'bootstrap-sass!./bootstrap-sass.config.js' // use custom bootstrap file
-    'bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js' // use custom bootstrap file w/ ExtractTextPlugin
-  ],
-  output: {
-    filename: railsBundleFile,
-    path: railsJsAssetsDir
-  },
-  // Load jQuery from the CDN or rails asset pipeline
-  externals: {
-    jquery: "var jQuery"
-  },
-  resolve: {
-    root: [ path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts")],
-    extensions: ["", ".js", ".jsx"]
-  },
-  module: {
-    loaders: [
-      // **IMPORTANT** This is needed so that each bootstrap js file required by
-      // bootstrap-sass-loader has access to the jQuery object
-      { test: /bootstrap-sass\/assets\/javascripts\//,
-        loader: 'imports?jQuery=jquery' },
-      { test: /\.scss$/,
-        loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
-
-      // Load Bootstrap's CSS
-      // Needed for the css-loader when [bootstrap-sass-loader]
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "url?limit=10000&minetype=application/font-woff" },
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "url?limit=10000&minetype=application/octet-stream" },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "file" },
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "url?limit=10000&minetype=image/svg+xml" },
-      //{ test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
-      //{ test: /\.ttf$/,    loader: "file-loader" },
-      //{ test: /\.eot$/,    loader: "file-loader" },
-      //{ test: /\.svg$/,    loader: "file-loader" },
-
-      { test: /\.jsx$/, loaders: ['es6', 'jsx?harmony'] },
-
-      // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
-      // in the Rails Asset Pipeline. Thus, load this one prior.
-      { test: require.resolve("jquery"), loader: "expose?jQuery" },
-      { test: require.resolve("jquery"), loader: "expose?$" }
-    ]
-  },
-  plugins: [
-    new ExtractTextPlugin("../stylesheets/bootstrap-and-customizations.css")
-  ]
-};
+// Add the following entries as appropriate:
+// "./scripts/rails_only" --> rails specific assets
+// "bootstrap-sass-loader" --> all bootstrap assets
+// "bootstrap-sass!./bootstrap-sass.config.js" --> custom bootstrap
+// "bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js" --> custom bootstrap w/ separate css bundle (see https://github.com/webpack/extract-text-webpack-plugin)
+config.entry.push("./assets/javascripts/example",
+                  "bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js");
+config.output = { filename: "rails-bundle.js",
+                  path: "../app/assets/javascripts" };
+config.externals = { jquery: "var jQuery" }; // load jQuery from cdn or rails asset pipeline
+config.module.loaders.push(
+  // **IMPORTANT** This is needed so that each bootstrap js file required by
+  // bootstrap-sass-loader has access to the jQuery object
+  { test: /bootstrap-sass\/assets\/javascripts\//, loader: "imports?jQuery=jquery" },
+  { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
+  //{ test: /\.jsx$/, loaders: ['es6', 'jsx?harmony'] },
+  // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
+  // in the Rails Asset Pipeline. Thus, load this one prior.
+  { test: require.resolve("jquery"), loader: "expose?jQuery" },
+  { test: require.resolve("jquery"), loader: "expose?$" }
+);
+  // Load Bootstrap's CSS
+  // Needed for the css-loader when [bootstrap-sass-loader]
+  //{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
+  //  loader: "url?limit=10000&minetype=application/font-woff" },
+  //{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+  //  loader: "url?limit=10000&minetype=application/octet-stream" },
+  //{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+  //  loader: "file" },
+  //{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+  //  loader: "url?limit=10000&minetype=image/svg+xml" },
+config.plugins = [ new ExtractTextPlugin("../stylesheets/bootstrap-and-customizations.css") ];
+module.exports = config;
 
 var devBuild = (typeof process.env["BUILDPACK_URL"]) === "undefined";
 if (devBuild) {
-  console.log("Webpack dev build for rails");
-  module.exports.devtool = "eval-source-map";
-  module.exports.module.loaders.push(
-    { test: require.resolve("react"), loader: "expose?React" }
-  );
+  console.log("Webpack dev build for Rails");
+  //module.exports.devtool = "eval-source-map";
+  //module.exports.module.loaders.push(
+  //  { test: require.resolve("react"), loader: "expose?React" }
+  //);
 } else {
-  console.log("Webpack production build for rails");
+  console.log("Webpack production build for Rails");
 }

From c8fc39a2fdc4565932ca49bcf348000ffa42480d Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Wed, 26 Nov 2014 21:57:48 -0800
Subject: [PATCH 05/20] Update README

---
 README.md | 51 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 4681f02dc..af55069b7 100644
--- a/README.md
+++ b/README.md
@@ -13,43 +13,55 @@ Full tutorial can be found at: [Fast Rich Client Rails Development With Webpack
 3. Enable the use of the JavaScript es6 transpiler.
 4. Enable easily using npm modules with a Rails application.
 
-# Example of the following technologies:
+# Example of the following technologies
 
-1. react
-2. react-bootstrap
-3. webpack with hot-reload
+1. React
+2. React-bootstrap
+3. Webpack with hot-reload
+4. Webpack ExtractTextPlugin
 4. es6-loader (es6 transpiler)
 5. Simultaneously working with Rails 4.2
 6. Deployable to Heroku
 
-# Running without Rails using Hot Reload
+# Running without Rails using Module Hot Replacement
 
 Setup node and run the node server.
+
 ```
 npm install
-cd webpack && node server.js
+cd webpack && webpack --config webpack.hot.config.js
+node server.js
 ```
 
 Point browser to [http://0.0.0.0:3000]().
 
+Note: Make sure to invoke your local copy of the webpack executable as opposed
+to any globally installed webpack.
+See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
+
 Save a change to a JSX file and see it update immediately in the browser! Note,
 any browser state still exists, such as what you've typed in the comments box.
 That's totally different than "Live Reload" which refreshes the browser.
 
-# Rails
+# Running with Rails
 
-## Automatically building the rails-bundle.js
-Run this command to automatically build the rails-bundle.js file in the
-javascript directory whenever your jsx files change.
+## Build Rails bundles
+Run this command to have webpack build the Rails bundles in the Rails
+asset pipeline.
+Note that the Webpack ExtractTextPlugin is used so that two bundles are generated:
+- rails-bundle.js which gets copied to app/assets/javascripts
+- bootstrap-and-customizations.css which gets copied in app/assets/stylesheet
+Observe how the bundles are automatically re-generated whever your JSX changes.
 
 ```
 cd webpack
 webpack -w --config webpack.rails.config.js
 ```
 
-## Run Rails
+## Run Rails server
 
 ```
+cd <rails_project_name>
 bundle install
 rake db:setup
 rails s -p 4000
@@ -58,17 +70,18 @@ Point browser to [http://0.0.0.0:4000]().
 
 It's important to run the rails server on different port than the node server.
 
-# Webpack Configuration
-`webpack.hot.config.js`: Used by server.js to run the demo server.
-`webpack.rails.config.js`: Used to generate the rails-bundle.js file
+# Webpack configuration files
+- `webpack.hot.config.js`: Used by server.js to run the demo express server.
+- `webpack.rails.config.js`: Used to generate the Rails bundles.
+- `webpack.common.config.js`: Common configuration file to minimize code duplication.
 
-# Notes on Rails Assets
+# Notes on Rails assets
 ## Javascript
-The `webpack.rails.config.js` file generates rails-bundle.js which is included
+The `webpack.rails.config.js` file generates rails-bundle.js which is then included
 by the Rails asset pipeline.
 
 ## Sass and images
-1. The Webpack server loads the images from the **symlink** of of the
+1. The Webpack server loads the images from the **symlink** of the
    app/assets/images directory.
 2. Since the images are not moved, Rails loads images via the normal asset
    pipeline features.
@@ -91,7 +104,3 @@ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-mult
 ```
 
 This runs the two buildpacks in the `.buildpacks` directory.
-
-# TO DO
-1. (Optionally) integrate twitter bootstrap assets into webpack build with way
-   to configure same options for Rails and Webpack.

From 5fb984d6170d5a692c5cf7dc825ce16208533c32 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Wed, 26 Nov 2014 21:58:46 -0800
Subject: [PATCH 06/20] Update README, take 2

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index af55069b7..d0fb9be8d 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ node server.js
 
 Point browser to [http://0.0.0.0:3000]().
 
-Note: Make sure to invoke your local copy of the webpack executable as opposed
+Make sure to invoke your local copy of the webpack executable as opposed
 to any globally installed webpack.
 See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
 

From 53bf8477d20b523fe0bd74a2469deb095452b34b Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Wed, 26 Nov 2014 21:59:26 -0800
Subject: [PATCH 07/20] Update README, take 3

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index d0fb9be8d..db67f62fe 100644
--- a/README.md
+++ b/README.md
@@ -89,7 +89,9 @@ by the Rails asset pipeline.
    images. The image directory for the webpack server is configured by this
    line:
 
+```
     { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"}
+```
 
 # Source Maps
 They work for both Rails and the Webpack Server!

From a98f761a4e9aa1ac4f919929844dd6db8cf934d0 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Wed, 26 Nov 2014 22:25:38 -0800
Subject: [PATCH 08/20] Add foreman gem; Update Procfile.dev and README

---
 Gemfile      |  3 +++
 Gemfile.lock |  5 +++++
 Procfile.dev |  2 +-
 README.md    | 10 ++++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/Gemfile b/Gemfile
index 423e37b6c..16b707915 100644
--- a/Gemfile
+++ b/Gemfile
@@ -49,6 +49,9 @@ group :development, :test do
 
   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
   gem 'spring'
+
+  # Manage application processes
+  gem 'foreman'
 end
 
 gem 'autoprefixer-rails'
diff --git a/Gemfile.lock b/Gemfile.lock
index 03075eb5e..2373c94ec 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -53,8 +53,12 @@ GEM
     columnize (0.8.9)
     debug_inspector (0.0.2)
     debugger-linecache (1.2.0)
+    dotenv (1.0.2)
     erubis (2.7.0)
     execjs (2.2.1)
+    foreman (0.76.0)
+      dotenv (~> 1.0.2)
+      thor (~> 0.19.1)
     globalid (0.2.3)
       activesupport (>= 4.1.0)
     hike (1.2.3)
@@ -161,6 +165,7 @@ DEPENDENCIES
   autoprefixer-rails
   byebug
   coffee-rails (~> 4.0.0)
+  foreman
   jbuilder (~> 2.0)
   jquery-rails
   pg
diff --git a/Procfile.dev b/Procfile.dev
index a612ec359..e06964a10 100644
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,2 +1,2 @@
 web: rails s -p 4000
-webpack: cd webpack && webpack -w --config webpack.rails.config.js
+webpack: cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js
diff --git a/README.md b/README.md
index db67f62fe..a777af71b 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,10 @@ Point browser to [http://0.0.0.0:3000]().
 Make sure to invoke your local copy of the webpack executable as opposed
 to any globally installed webpack.
 See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
+In doubt you can run the following command:
+```
+$(npm bin)/webpack --config webpack.hot.config.js
+```
 
 Save a change to a JSX file and see it update immediately in the browser! Note,
 any browser state still exists, such as what you've typed in the comments box.
@@ -93,6 +97,12 @@ by the Rails asset pipeline.
     { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"}
 ```
 
+# Process management
+Run the following command in your development environment to invoke both Webpack and Rails.
+```
+bundle exec foreman start -f Procfile.dev
+```
+
 # Source Maps
 They work for both Rails and the Webpack Server!
 

From 8b44d978d6cb02d30737d73d4e0cc5195e78e8c8 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Sun, 30 Nov 2014 16:42:21 -0800
Subject: [PATCH 09/20] Remove ExtractTextPlugin

---
 webpack/bootstrap-sass.config.js              | 11 +--
 ...otstrap-sass.extract-text-plugin.config.js | 85 -------------------
 webpack/webpack.common.config.js              |  4 +-
 webpack/webpack.hot.config.js                 |  2 +-
 webpack/webpack.rails.config.js               | 21 +----
 5 files changed, 7 insertions(+), 116 deletions(-)
 delete mode 100644 webpack/bootstrap-sass.extract-text-plugin.config.js

diff --git a/webpack/bootstrap-sass.config.js b/webpack/bootstrap-sass.config.js
index c8717b1a1..b9726d7a6 100644
--- a/webpack/bootstrap-sass.config.js
+++ b/webpack/bootstrap-sass.config.js
@@ -5,16 +5,9 @@ module.exports = {
   // Default for the style loading is to put in your js files
   // styleLoader: "style-loader!css-loader!sass-loader";
 
-  // If you want to use the ExtractTextPlugin
-  //   and you want compressed
-  //     styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
-  //   or if you want expanded CSS
-  //     styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass?outputStyle=expanded"),
-
   // ### Scripts
-  // Any scripts here set to false will never
-  // make it to the client, it's not packaged
-  // by webpack.
+  // Any scripts here set to false will never make it to the client,
+  // i.e. it's not packaged by webpack.
   scripts: {
     'transition': true,
     'alert': true,
diff --git a/webpack/bootstrap-sass.extract-text-plugin.config.js b/webpack/bootstrap-sass.extract-text-plugin.config.js
deleted file mode 100644
index 289545a00..000000000
--- a/webpack/bootstrap-sass.extract-text-plugin.config.js
+++ /dev/null
@@ -1,85 +0,0 @@
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-module.exports = {
-  verbose: true, // Set to true to show diagnostic information
-
-  bootstrapCustomizations: "./_bootstrap-customizations.scss",
-  mainSass: "./_main.scss",
-
-  // Default for the style loading is to put in your js files
-  // styleLoader: "style-loader!css-loader!sass-loader",
-  // If you want to use the ExtractTextPlugin
-  //   and you want compressed
-  //styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
-
-  // If you want expanded CSS
-  styleLoader: ExtractTextPlugin.extract("style-loader",
-                                         "css-loader!sass-loader?outputStyle=expanded"),
-                                         //{ publicPath: "../" }),
-
-  // ### Scripts
-  // Any scripts here set to false will never
-  // make it to the client, it's not packaged
-  // by webpack.
-  scripts: {
-    'transition': true,
-    'alert': true,
-    'button': true,
-    'carousel': true,
-    'collapse': true,
-    'dropdown': true,
-    'modal': true,
-    'tooltip': true,
-    'popover': true,
-    'scrollspy': true,
-    'tab': true,
-    'affix': true
-  },
-  // ### Styles
-  // Enable or disable certain less components and thus remove
-  // the css for them from the build.
-  styles: {
-    "mixins": true,
-
-    "normalize": true,
-    "print": true,
-
-    "scaffolding": true,
-    "type": true,
-    "code": true,
-    "grid": true,
-    "tables": true,
-    "forms": true,
-    "buttons": true,
-
-    "component-animations": true,
-    "glyphicons": true,
-    "dropdowns": true,
-    "button-groups": true,
-    "input-groups": true,
-    "navs": true,
-    "navbar": true,
-    "breadcrumbs": true,
-    "pagination": true,
-    "pager": true,
-    "labels": true,
-    "badges": true,
-    "jumbotron": true,
-    "thumbnails": true,
-    "alerts": true,
-    "progress-bars": true,
-    "media": true,
-    "list-group": true,
-    "panels": true,
-    "wells": true,
-    "close": true,
-
-    "modals": true,
-    "tooltip": true,
-    "popovers": true,
-    "carousel": true,
-
-    "utilities": true,
-    "responsive-utilities": true
-  }
-};
diff --git a/webpack/webpack.common.config.js b/webpack/webpack.common.config.js
index 73c4a2190..3e5c3de5d 100644
--- a/webpack/webpack.common.config.js
+++ b/webpack/webpack.common.config.js
@@ -11,8 +11,8 @@ module.exports = {
   //   jquery: "var jQuery"
   // },
   resolve: {
-    root: [ path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
-            path.join(__dirname, "assets/stylesheets") ],
+    root: [path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
+           path.join(__dirname, "assets/stylesheets")],
     extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".scss", ".css", "config.js"]
   },
   module: {
diff --git a/webpack/webpack.hot.config.js b/webpack/webpack.hot.config.js
index 7540ab59e..c24ca76a3 100644
--- a/webpack/webpack.hot.config.js
+++ b/webpack/webpack.hot.config.js
@@ -4,7 +4,7 @@ var webpack = require("webpack");
 config.entry.push("webpack-dev-server/client?http://localhost:3000",
                   "webpack/hot/dev-server",
                   "./scripts/webpack_only");
-config.output = { filename: "express-bundle.js", // this file is never saved
+config.output = { filename: "express-bundle.js", // this file is never saved on disk
                   path: __dirname };
 config.plugins = [ new webpack.HotModuleReplacementPlugin() ];
 module.exports = config;
diff --git a/webpack/webpack.rails.config.js b/webpack/webpack.rails.config.js
index 74315c79f..c73506c45 100644
--- a/webpack/webpack.rails.config.js
+++ b/webpack/webpack.rails.config.js
@@ -1,17 +1,15 @@
 // Run like this
-// cd webpack && webpack -w --config webpack.rails.config.js
+// cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js
 
 var config = require("./webpack.common.config");
 var path = require("path");
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 // Add the following entries as appropriate:
 // "./scripts/rails_only" --> rails specific assets
 // "bootstrap-sass-loader" --> all bootstrap assets
 // "bootstrap-sass!./bootstrap-sass.config.js" --> custom bootstrap
-// "bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js" --> custom bootstrap w/ separate css bundle (see https://github.com/webpack/extract-text-webpack-plugin)
 config.entry.push("./assets/javascripts/example",
-                  "bootstrap-sass!./bootstrap-sass.extract-text-plugin.config.js");
+                  "bootstrap-sass!./bootstrap-sass.config.js");
 config.output = { filename: "rails-bundle.js",
                   path: "../app/assets/javascripts" };
 config.externals = { jquery: "var jQuery" }; // load jQuery from cdn or rails asset pipeline
@@ -20,32 +18,17 @@ config.module.loaders.push(
   // bootstrap-sass-loader has access to the jQuery object
   { test: /bootstrap-sass\/assets\/javascripts\//, loader: "imports?jQuery=jquery" },
   { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
-  //{ test: /\.jsx$/, loaders: ['es6', 'jsx?harmony'] },
   // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
   // in the Rails Asset Pipeline. Thus, load this one prior.
   { test: require.resolve("jquery"), loader: "expose?jQuery" },
   { test: require.resolve("jquery"), loader: "expose?$" }
 );
-  // Load Bootstrap's CSS
-  // Needed for the css-loader when [bootstrap-sass-loader]
-  //{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-  //  loader: "url?limit=10000&minetype=application/font-woff" },
-  //{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-  //  loader: "url?limit=10000&minetype=application/octet-stream" },
-  //{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-  //  loader: "file" },
-  //{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-  //  loader: "url?limit=10000&minetype=image/svg+xml" },
-config.plugins = [ new ExtractTextPlugin("../stylesheets/bootstrap-and-customizations.css") ];
 module.exports = config;
 
 var devBuild = (typeof process.env["BUILDPACK_URL"]) === "undefined";
 if (devBuild) {
   console.log("Webpack dev build for Rails");
   //module.exports.devtool = "eval-source-map";
-  //module.exports.module.loaders.push(
-  //  { test: require.resolve("react"), loader: "expose?React" }
-  //);
 } else {
   console.log("Webpack production build for Rails");
 }

From c8172eac38301768731a20712504251697c51961 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Sun, 30 Nov 2014 21:02:25 -0800
Subject: [PATCH 10/20] Add bootstrap-sass gem; Use bootstrap-sass loader with
 local webpack dev server

---
 Gemfile                                       |  5 +-
 Gemfile.lock                                  |  3 +
 README.md                                     |  3 +-
 app/assets/stylesheets/application.css.scss   |  3 +-
 webpack/_bootstrap-customizations.scss        |  1 -
 webpack/assets/javascripts/CommentBox.jsx     |  1 -
 webpack/bootstrap-sass.config.js              |  4 +-
 webpack/bootstrap-sass.extract-text.config.js | 75 +++++++++++++++++++
 webpack/scripts/rails_only.jsx                |  2 -
 webpack/scripts/webpack_only.jsx              |  8 +-
 webpack/server.js                             |  7 +-
 webpack/webpack.common.config.js              |  6 +-
 webpack/webpack.hot.config.js                 | 20 ++++-
 webpack/webpack.rails.config.js               | 15 +---
 14 files changed, 116 insertions(+), 37 deletions(-)
 create mode 100644 webpack/bootstrap-sass.extract-text.config.js

diff --git a/Gemfile b/Gemfile
index 16b707915..30a416510 100644
--- a/Gemfile
+++ b/Gemfile
@@ -12,6 +12,7 @@ gem 'rails_12factor'
 
 # Use SCSS for stylesheets
 gem 'sass-rails', '~> 5.0.0.beta1'
+gem 'bootstrap-sass', '~> 3.3.1'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .js.coffee assets and views
@@ -37,6 +38,8 @@ gem 'rails-html-sanitizer', '~> 1.0'
 # Use Unicorn as the app server
 gem 'unicorn'
 
+gem 'autoprefixer-rails'
+
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development
 
@@ -53,5 +56,3 @@ group :development, :test do
   # Manage application processes
   gem 'foreman'
 end
-
-gem 'autoprefixer-rails'
diff --git a/Gemfile.lock b/Gemfile.lock
index 2373c94ec..1ed6b385b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -39,6 +39,8 @@ GEM
       execjs
     binding_of_caller (0.7.3.pre1)
       debug_inspector (>= 0.0.1)
+    bootstrap-sass (3.3.1.0)
+      sass (~> 3.2)
     builder (3.2.2)
     byebug (3.2.0)
       columnize (~> 0.8)
@@ -163,6 +165,7 @@ PLATFORMS
 
 DEPENDENCIES
   autoprefixer-rails
+  bootstrap-sass (~> 3.3.1)
   byebug
   coffee-rails (~> 4.0.0)
   foreman
diff --git a/README.md b/README.md
index a777af71b..177f666d9 100644
--- a/README.md
+++ b/README.md
@@ -29,8 +29,7 @@ Setup node and run the node server.
 
 ```
 npm install
-cd webpack && webpack --config webpack.hot.config.js
-node server.js
+cd webpack && node server.js
 ```
 
 Point browser to [http://0.0.0.0:3000]().
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index efac9f1ce..121d354a0 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,3 +1,4 @@
 @import "../../../webpack/assets/stylesheets/test-stylesheet";
 @import "../../../webpack/assets/stylesheets/test-sass-stylesheet";
-@import "bootstrap-and-customizations";
+@import "bootstrap-sprockets";
+@import "bootstrap";
diff --git a/webpack/_bootstrap-customizations.scss b/webpack/_bootstrap-customizations.scss
index 61f7b9bbd..3fded0a39 100644
--- a/webpack/_bootstrap-customizations.scss
+++ b/webpack/_bootstrap-customizations.scss
@@ -7,4 +7,3 @@ $pre-border-color: $pre-bg; // hide the border.
 
 // This makes the font on the buttons and the text BIG
 $font-size-base: 18px;
-
diff --git a/webpack/assets/javascripts/CommentBox.jsx b/webpack/assets/javascripts/CommentBox.jsx
index 8762c388f..0cb6c9005 100644
--- a/webpack/assets/javascripts/CommentBox.jsx
+++ b/webpack/assets/javascripts/CommentBox.jsx
@@ -7,7 +7,6 @@ module React from 'react/addons';
 // the React Developer Tools: http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
 // require("expose?React!react");
 
-
 var Input = require('react-bootstrap/Input');
 var Button = require('react-bootstrap/Button');
 var Row = require('react-bootstrap/Row');
diff --git a/webpack/bootstrap-sass.config.js b/webpack/bootstrap-sass.config.js
index b9726d7a6..0d6bc68e3 100644
--- a/webpack/bootstrap-sass.config.js
+++ b/webpack/bootstrap-sass.config.js
@@ -12,10 +12,10 @@ module.exports = {
     'transition': true,
     'alert': true,
     'button': true,
-    'carousel': true,
+    'carousel': false,
     'collapse': true,
     'dropdown': true,
-    'modal': true,
+    'modal': false,
     'tooltip': true,
     'popover': true,
     'scrollspy': true,
diff --git a/webpack/bootstrap-sass.extract-text.config.js b/webpack/bootstrap-sass.extract-text.config.js
new file mode 100644
index 000000000..16bde1ec9
--- /dev/null
+++ b/webpack/bootstrap-sass.extract-text.config.js
@@ -0,0 +1,75 @@
+//var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+  bootstrapCustomizations: "./_bootstrap-customizations.scss",
+  mainSass: "./_main.scss",
+
+  // Default for the style loading is to put in your js files
+  // styleLoader: "style-loader!css-loader!sass-loader";
+  // styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader"),
+
+  // ### Scripts
+  // Any scripts here set to false will never make it to the client,
+  // i.e. it's not packaged by webpack.
+  scripts: {
+    'transition': true,
+    'alert': true,
+    'button': true,
+    'carousel': true,
+    'collapse': true,
+    'dropdown': true,
+    'modal': false,
+    'tooltip': true,
+    'popover': true,
+    'scrollspy': true,
+    'tab': true,
+    'affix': true
+  },
+  // ### Styles
+  // Enable or disable certain less components and thus remove
+  // the css for them from the build.
+  styles: {
+    "mixins": true,
+
+    "normalize": true,
+    "print": true,
+
+    "scaffolding": true,
+    "type": true,
+    "code": true,
+    "grid": true,
+    "tables": true,
+    "forms": true,
+    "buttons": true,
+
+    "component-animations": true,
+    "glyphicons": true,
+    "dropdowns": true,
+    "button-groups": true,
+    "input-groups": true,
+    "navs": true,
+    "navbar": true,
+    "breadcrumbs": true,
+    "pagination": true,
+    "pager": true,
+    "labels": true,
+    "badges": true,
+    "jumbotron": true,
+    "thumbnails": true,
+    "alerts": true,
+    "progress-bars": true,
+    "media": true,
+    "list-group": true,
+    "panels": true,
+    "wells": true,
+    "close": true,
+
+    "modals": true,
+    "tooltip": true,
+    "popovers": true,
+    "carousel": true,
+
+    "utilities": true,
+    "responsive-utilities": true
+  }
+};
diff --git a/webpack/scripts/rails_only.jsx b/webpack/scripts/rails_only.jsx
index baabb4bdf..b1f50b8d0 100755
--- a/webpack/scripts/rails_only.jsx
+++ b/webpack/scripts/rails_only.jsx
@@ -4,5 +4,3 @@
 // Showing this for example purposes
 // require("expose?$!jquery");
 // require("expose?jQuery!jquery");
-
-
diff --git a/webpack/scripts/webpack_only.jsx b/webpack/scripts/webpack_only.jsx
index ff48f8d89..9daa8bcb6 100755
--- a/webpack/scripts/webpack_only.jsx
+++ b/webpack/scripts/webpack_only.jsx
@@ -1,11 +1,7 @@
-// These are only loaded by only by the webpack server
+// These are only loaded by the webpack dev server
 
-// Option to load stylesheets via webpack
 require("test-stylesheet.css");
-
-// Test out sass
-require("test-sass-stylesheet.scss");
+require("test-sass-stylesheet.scss"); // test out sass
 
 require("expose?$!jquery");
 require("expose?jQuery!jquery");
-require("bootstrap-webpack");
diff --git a/webpack/server.js b/webpack/server.js
index 447770027..9e8c75ef1 100644
--- a/webpack/server.js
+++ b/webpack/server.js
@@ -8,9 +8,10 @@ var comments = [{author: 'Pete Hunt', text: 'Hey there!'},
                 {author: 'Justin Gordon', text: 'Aloha from @railsonmaui'}];
 
 var server = new WebpackDevServer(webpack(config), {
+  //contentBase: "/public",
   publicPath: config.output.publicPath,
   hot: true,
-  stats: { colors: true}
+  stats: {colors: true}
 });
 
 server.app.use(bodyParser.json());
@@ -31,7 +32,7 @@ server.app.post('/comments.json', function(req, res) {
   res.send(JSON.stringify(comments));
 });
 
-server.listen(3000, 'localhost', function (err, result) {
+server.listen(3000, 'localhost', function(err, result) {
   if (err) { console.log(err); }
-  console.log('Listening at localhost:3000');
+  console.log('Listening at localhost:3000...');
 });
diff --git a/webpack/webpack.common.config.js b/webpack/webpack.common.config.js
index 3e5c3de5d..d65e57ebd 100644
--- a/webpack/webpack.common.config.js
+++ b/webpack/webpack.common.config.js
@@ -11,7 +11,8 @@ module.exports = {
   //   jquery: "var jQuery"
   // },
   resolve: {
-    root: [path.join(__dirname, "scripts"), path.join(__dirname, "assets/javascripts"),
+    root: [path.join(__dirname, "scripts"),
+           path.join(__dirname, "assets/javascripts"),
            path.join(__dirname, "assets/stylesheets")],
     extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".scss", ".css", "config.js"]
   },
@@ -22,8 +23,7 @@ module.exports = {
       { test: /\.css$/, loader: "style-loader!css-loader" },
       { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
 
-      // the url-loader uses DataUrls.
-      // the file-loader emits files.
+      // The url-loader uses DataUrls. The file-loader emits files.
       { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
       { test: /\.ttf$/,    loader: "file-loader" },
       { test: /\.eot$/,    loader: "file-loader" },
diff --git a/webpack/webpack.hot.config.js b/webpack/webpack.hot.config.js
index c24ca76a3..e7d818e23 100644
--- a/webpack/webpack.hot.config.js
+++ b/webpack/webpack.hot.config.js
@@ -1,10 +1,26 @@
+// Run like this:
+// cd webpack && $(npm bin)/webpack -w --config webpack.hot.config.js
+// or:
+// cd webpack && node server.js
+
 var config = require("./webpack.common.config");
 var webpack = require("webpack");
+//var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
+// Add the following entries as appropriate:
+// "bootstrap-sass-loader" -> all bootstrap assets
+// "bootstrap-sass!./bootstrap-sass.config.js" -> custom bootstrap
+// "bootstrap-sass!./bootstrap-sass.extract-text.config.js" -> custom bootstrap w/ ExtractTextPlugin
 config.entry.push("webpack-dev-server/client?http://localhost:3000",
                   "webpack/hot/dev-server",
-                  "./scripts/webpack_only");
-config.output = { filename: "express-bundle.js", // this file is never saved on disk
+                  "./scripts/webpack_only",
+                  "bootstrap-sass!./bootstrap-sass.config.js");
+                  //"bootstrap-sass!./bootstrap-sass.extract-text.config.js");
+config.output = { filename: "express-bundle.js", // this file is served directly by webpack
                   path: __dirname };
+//config.module.loaders.push(
+//  { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
+//);
 config.plugins = [ new webpack.HotModuleReplacementPlugin() ];
+                   //new ExtractTextPlugin("bootstrap-and-customizations.css") ];
 module.exports = config;
diff --git a/webpack/webpack.rails.config.js b/webpack/webpack.rails.config.js
index c73506c45..f8758beb4 100644
--- a/webpack/webpack.rails.config.js
+++ b/webpack/webpack.rails.config.js
@@ -1,22 +1,13 @@
-// Run like this
-// cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js
+// Run like this:
+// cd webpack && $(npm bin)/webpack -w --config webpack.hot.config.js
 
 var config = require("./webpack.common.config");
-var path = require("path");
 
-// Add the following entries as appropriate:
-// "./scripts/rails_only" --> rails specific assets
-// "bootstrap-sass-loader" --> all bootstrap assets
-// "bootstrap-sass!./bootstrap-sass.config.js" --> custom bootstrap
-config.entry.push("./assets/javascripts/example",
-                  "bootstrap-sass!./bootstrap-sass.config.js");
+config.entry.push("./scripts/rails_only"); // rails specific assets
 config.output = { filename: "rails-bundle.js",
                   path: "../app/assets/javascripts" };
 config.externals = { jquery: "var jQuery" }; // load jQuery from cdn or rails asset pipeline
 config.module.loaders.push(
-  // **IMPORTANT** This is needed so that each bootstrap js file required by
-  // bootstrap-sass-loader has access to the jQuery object
-  { test: /bootstrap-sass\/assets\/javascripts\//, loader: "imports?jQuery=jquery" },
   { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
   // Next 2 lines expose jQuery and $ to any JavaScript files loaded after rails-bundle.js
   // in the Rails Asset Pipeline. Thus, load this one prior.

From 142e8924e238a5eeae8a74a826ea3f66a21d969b Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Mon, 1 Dec 2014 21:33:27 -0800
Subject: [PATCH 11/20] Add bootstrap-sprockets to js manifest

---
 app/assets/javascripts/application.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 6849a6c6b..91011c85c 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,6 +13,8 @@
 //= require jquery
 //= require jquery_ujs
 
+//= require bootstrap-sprockets
+
 // Important to import jquery_ujs before rails-bundle as that patches jquery xhr to use the authenticity token!
 
 //= require rails-bundle

From e4a2a05242796790f995137d6da1e8a1c548cbe6 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Thu, 4 Dec 2014 21:07:40 -0800
Subject: [PATCH 12/20] Add custom bootstrap css

---
 app/assets/stylesheets/_bootstrap-custom.scss | 50 +++++++++++++++++++
 app/assets/stylesheets/application.css.scss   |  2 +-
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/_bootstrap-custom.scss

diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss
new file mode 100644
index 000000000..65204aad1
--- /dev/null
+++ b/app/assets/stylesheets/_bootstrap-custom.scss
@@ -0,0 +1,50 @@
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 121d354a0..6e4e39e08 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,4 +1,4 @@
 @import "../../../webpack/assets/stylesheets/test-stylesheet";
 @import "../../../webpack/assets/stylesheets/test-sass-stylesheet";
 @import "bootstrap-sprockets";
-@import "bootstrap";
+@import "bootstrap-custom";

From 09efcf9cbc5ab42333a9320fc5b11633471b6ce4 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Thu, 4 Dec 2014 22:06:17 -0800
Subject: [PATCH 13/20] Move bootstrap variables customization scss to webpack
 assets dir; Configure asset pipeline's search patch to include
 webpack/assets/stylesheets

---
 app/assets/stylesheets/_bootstrap-custom.scss            | 9 +++++++--
 app/assets/stylesheets/application.css.scss              | 1 +
 config/application.rb                                    | 3 +++
 .../stylesheets/_bootstrap-variables-customization.scss  | 1 +
 4 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 webpack/assets/stylesheets/_bootstrap-variables-customization.scss

diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss
index 65204aad1..def41f92d 100644
--- a/app/assets/stylesheets/_bootstrap-custom.scss
+++ b/app/assets/stylesheets/_bootstrap-custom.scss
@@ -1,3 +1,6 @@
+// Customizations
+@import "bootstrap-variables-customization";
+
 // Core variables and mixins
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
@@ -28,10 +31,10 @@
 @import "bootstrap/pager";
 @import "bootstrap/labels";
 @import "bootstrap/badges";
-@import "bootstrap/jumbotron";
+//@import "bootstrap/jumbotron";
 @import "bootstrap/thumbnails";
 @import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
+//@import "bootstrap/progress-bars";
 @import "bootstrap/media";
 @import "bootstrap/list-group";
 @import "bootstrap/panels";
@@ -48,3 +51,5 @@
 // Utility classes
 @import "bootstrap/utilities";
 @import "bootstrap/responsive-utilities";
+
+//@import "bootstrap-style-customizations";
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 6e4e39e08..3010f2534 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,4 +1,5 @@
 @import "../../../webpack/assets/stylesheets/test-stylesheet";
 @import "../../../webpack/assets/stylesheets/test-sass-stylesheet";
+
 @import "bootstrap-sprockets";
 @import "bootstrap-custom";
diff --git a/config/application.rb b/config/application.rb
index bb301f3bc..63807b854 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -22,5 +22,8 @@ class Application < Rails::Application
 
     # For not swallow errors in after_commit/after_rollback callbacks.
     config.active_record.raise_in_transactional_callbacks = true
+
+    # Add webpack/assets/stylesheets to asset pipeline's search path.
+    config.assets.paths << Rails.root.join("webpack", "assets" ,"stylesheets")
   end
 end
diff --git a/webpack/assets/stylesheets/_bootstrap-variables-customization.scss b/webpack/assets/stylesheets/_bootstrap-variables-customization.scss
new file mode 100644
index 000000000..d1e1bbcb0
--- /dev/null
+++ b/webpack/assets/stylesheets/_bootstrap-variables-customization.scss
@@ -0,0 +1 @@
+$navbar-default-bg: #FFFFE0;

From 3c59196fb0dfceda2976cdd4c639f678efc69c12 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Thu, 4 Dec 2014 22:26:20 -0800
Subject: [PATCH 14/20] Consolidate webpack and rails bootstrap customization
 file

---
 webpack/_bootstrap-customizations.scss                   | 9 ---------
 .../stylesheets/_bootstrap-variables-customization.scss  | 3 ++-
 webpack/bootstrap-sass.config.js                         | 6 +++---
 3 files changed, 5 insertions(+), 13 deletions(-)
 delete mode 100644 webpack/_bootstrap-customizations.scss

diff --git a/webpack/_bootstrap-customizations.scss b/webpack/_bootstrap-customizations.scss
deleted file mode 100644
index 3fded0a39..000000000
--- a/webpack/_bootstrap-customizations.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// ## Customize Variables
-
-// This gets loaded after bootstrap/variables is loaded, so you can refer to bootstrap variables
-// Remove borders around `<pre>` block so the code
-// flows with our right column layout.
-$pre-border-color: $pre-bg; // hide the border.
-
-// This makes the font on the buttons and the text BIG
-$font-size-base: 18px;
diff --git a/webpack/assets/stylesheets/_bootstrap-variables-customization.scss b/webpack/assets/stylesheets/_bootstrap-variables-customization.scss
index d1e1bbcb0..471878954 100644
--- a/webpack/assets/stylesheets/_bootstrap-variables-customization.scss
+++ b/webpack/assets/stylesheets/_bootstrap-variables-customization.scss
@@ -1 +1,2 @@
-$navbar-default-bg: #FFFFE0;
+$navbar-default-bg: #FFFFE0; // fancy yellow navbar
+$font-size-base: 15px; // make it bigger!
diff --git a/webpack/bootstrap-sass.config.js b/webpack/bootstrap-sass.config.js
index 0d6bc68e3..48b1600a7 100644
--- a/webpack/bootstrap-sass.config.js
+++ b/webpack/bootstrap-sass.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  bootstrapCustomizations: "./_bootstrap-customizations.scss",
+  bootstrapCustomizations: "./assets/stylesheets/_bootstrap-variables-customization.scss",
   mainSass: "./_main.scss",
 
   // Default for the style loading is to put in your js files
@@ -51,10 +51,10 @@ module.exports = {
     "pager": true,
     "labels": true,
     "badges": true,
-    "jumbotron": true,
+    "jumbotron": false,
     "thumbnails": true,
     "alerts": true,
-    "progress-bars": true,
+    "progress-bars": false,
     "media": true,
     "list-group": true,
     "panels": true,

From fb28f3f61bd7b9ad0f66bd3e6660b0e80a97fffd Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Fri, 5 Dec 2014 20:00:19 -0800
Subject: [PATCH 15/20] Add comments; Do another pass on README

---
 README.md                                     | 58 ++++++++++---------
 app/assets/stylesheets/_bootstrap-custom.scss | 12 ++--
 webpack/bootstrap-sass.config.js              |  8 +--
 3 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/README.md b/README.md
index 177f666d9..2eff10af0 100644
--- a/README.md
+++ b/README.md
@@ -8,22 +8,23 @@ Full tutorial can be found at: [Fast Rich Client Rails Development With Webpack
 
 # Motivation
 
-1. Enable development of a JS client separate from Rails.
-2. Enable easily retrofitting such a JS framework into an existing Rails app.
-3. Enable the use of the JavaScript es6 transpiler.
-4. Enable easily using npm modules with a Rails application.
+In no particular order:
+1. Enable development of a JS client independently from Rails.
+2. Easily enable use of npm modules with a Rails application.
+3. Easily enable retrofitting such a JS framework into an existing Rails app.
+4. Enable the use of the JavaScript ES6 transpiler.
 
-# Example of the following technologies
+# Technologies involved
 
-1. React
-2. React-bootstrap
-3. Webpack with hot-reload
-4. Webpack ExtractTextPlugin
-4. es6-loader (es6 transpiler)
-5. Simultaneously working with Rails 4.2
-6. Deployable to Heroku
+1. React 0.11 (for front-end app)
+2. React-bootstrap 0.12
+3. Webpack with hot-reload 1.4 (for local dev)
+4. Webpack ExtractTextPlugin (to extract CSS out of JS bundle)
+4. ES6 transpiler (es6-loader) 0.2
+5. Rails 4.2 (for backend app)
+6. Heroku (for deployment)
 
-# Running without Rails using Module Hot Replacement
+# Javascript development without Rails using Hot Module Replacement (HMR)
 
 Setup node and run the node server.
 
@@ -37,24 +38,26 @@ Point browser to [http://0.0.0.0:3000]().
 Make sure to invoke your local copy of the webpack executable as opposed
 to any globally installed webpack.
 See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
-In doubt you can run the following command:
+If in doubt, run the following command:
 ```
 $(npm bin)/webpack --config webpack.hot.config.js
 ```
 
 Save a change to a JSX file and see it update immediately in the browser! Note,
 any browser state still exists, such as what you've typed in the comments box.
-That's totally different than "Live Reload" which refreshes the browser.
+That's totally different than [Live Reload](http://livereload.com/) which refreshes
+the browser.
 
-# Running with Rails
+# Rails integration
 
-## Build Rails bundles
-Run this command to have webpack build the Rails bundles in the Rails
-asset pipeline.
-Note that the Webpack ExtractTextPlugin is used so that two bundles are generated:
-- rails-bundle.js which gets copied to app/assets/javascripts
-- bootstrap-and-customizations.css which gets copied in app/assets/stylesheet
-Observe how the bundles are automatically re-generated whever your JSX changes.
+## Build JS/CSS bundles
+Run this command to have webpack build the JS/CSS bundles and have them saved in the Rails
+asset pipeline (app/assets).
+The Webpack ExtractTextPlugin can optionally be used to extract the CSS out of
+the JS bundle. The following bundles would then be generated:
+- rails-bundle.js which gets saved to app/assets/javascripts
+- bootstrap-and-customizations.css which gets saved in app/assets/stylesheets
+Observe how the bundles are automatically re-generated whenever your JSX changes.
 
 ```
 cd webpack
@@ -63,6 +66,9 @@ webpack -w --config webpack.rails.config.js
 
 ## Run Rails server
 
+Once the JS/CSS bundled have been generated into the Rails asset pipeline, you can start
+the Rails server.
+
 ```
 cd <rails_project_name>
 bundle install
@@ -71,9 +77,9 @@ rails s -p 4000
 ```
 Point browser to [http://0.0.0.0:4000]().
 
-It's important to run the rails server on different port than the node server.
+It's important to run the Rails server on different port than the node server.
 
-# Webpack configuration files
+# Webpack configuration
 - `webpack.hot.config.js`: Used by server.js to run the demo express server.
 - `webpack.rails.config.js`: Used to generate the Rails bundles.
 - `webpack.common.config.js`: Common configuration file to minimize code duplication.
@@ -107,7 +113,7 @@ They work for both Rails and the Webpack Server!
 
 # Deploying to Heroku
 
-In order to deploy to heroku, you'll need run this command once to set a custom
+In order to deploy to heroku, you'll need to run this command once to set a custom
 buildpack:
 
 ```
diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss
index def41f92d..62264e0e1 100644
--- a/app/assets/stylesheets/_bootstrap-custom.scss
+++ b/app/assets/stylesheets/_bootstrap-custom.scss
@@ -1,4 +1,4 @@
-// Customizations
+// Customizations - needs to be imported first!
 @import "bootstrap-variables-customization";
 
 // Core variables and mixins
@@ -31,10 +31,10 @@
 @import "bootstrap/pager";
 @import "bootstrap/labels";
 @import "bootstrap/badges";
-//@import "bootstrap/jumbotron";
+//@import "bootstrap/jumbotron"; // excluding as an example
 @import "bootstrap/thumbnails";
 @import "bootstrap/alerts";
-//@import "bootstrap/progress-bars";
+//@import "bootstrap/progress-bars"; // excluding as an example
 @import "bootstrap/media";
 @import "bootstrap/list-group";
 @import "bootstrap/panels";
@@ -43,13 +43,11 @@
 @import "bootstrap/close";
 
 // Components w/ JavaScript
-@import "bootstrap/modals";
+@import "bootstrap/modals"; // excluding as an example
 @import "bootstrap/tooltip";
 @import "bootstrap/popovers";
-@import "bootstrap/carousel";
+@import "bootstrap/carousel"; // excluding as an example
 
 // Utility classes
 @import "bootstrap/utilities";
 @import "bootstrap/responsive-utilities";
-
-//@import "bootstrap-style-customizations";
diff --git a/webpack/bootstrap-sass.config.js b/webpack/bootstrap-sass.config.js
index 48b1600a7..13ef5792f 100644
--- a/webpack/bootstrap-sass.config.js
+++ b/webpack/bootstrap-sass.config.js
@@ -12,10 +12,10 @@ module.exports = {
     'transition': true,
     'alert': true,
     'button': true,
-    'carousel': false,
+    'carousel': false, // excluding as an example
     'collapse': true,
     'dropdown': true,
-    'modal': false,
+    'modal': false, // excluding as an example
     'tooltip': true,
     'popover': true,
     'scrollspy': true,
@@ -51,10 +51,10 @@ module.exports = {
     "pager": true,
     "labels": true,
     "badges": true,
-    "jumbotron": false,
+    "jumbotron": false, // excluding as an example
     "thumbnails": true,
     "alerts": true,
-    "progress-bars": false,
+    "progress-bars": false, // excluding as an example
     "media": true,
     "list-group": true,
     "panels": true,

From 73d504b1b54b31cf3862102fb163cc093bac7031 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Sat, 6 Dec 2014 18:43:49 -0800
Subject: [PATCH 16/20] Add section about Bootstrap integration

---
 README.md | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2eff10af0..e72734a81 100644
--- a/README.md
+++ b/README.md
@@ -75,15 +75,32 @@ bundle install
 rake db:setup
 rails s -p 4000
 ```
-Point browser to [http://0.0.0.0:4000]().
+Point your browser to [http://0.0.0.0:4000]().
 
-It's important to run the Rails server on different port than the node server.
+It's important to run the Rails server on a different port than the node server.
 
 # Webpack configuration
 - `webpack.hot.config.js`: Used by server.js to run the demo express server.
 - `webpack.rails.config.js`: Used to generate the Rails bundles.
 - `webpack.common.config.js`: Common configuration file to minimize code duplication.
 
+# Bootstrap integration
+Notice that Bootstrap Sass is installed as both a gem and an npm package.
+When running the Rails app, the bootstrap-sass gem assets are loaded directly
+through the asset pipeline without passing through Webpack.
+See app/assets/application.css.scss.
+On the other hand when running the Webpack dev server, the bootrap-sass npm
+assets are loaded through Webpack (with help of the bootstrap-sass-loader).
+See webpack/webpack.hot.config.js.
+
+
+To avoid duplicating any Bootstrap customization between Rails and Webpack,
+all Bootstrap customizations have been consolidated under Webpack in
+webpack/assets/stylesheets/_bootstrap-variables-customization.scss and the
+webpack/assets/stylesheets directory added to the Rails asset pipeline
+search path. See config config/application.rb. Keep that in mind as you
+need to customize Bootstrap.
+
 # Notes on Rails assets
 ## Javascript
 The `webpack.rails.config.js` file generates rails-bundle.js which is then included

From 7a314d7b56f9ce1bf96353a96264b67d15ab418d Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Sun, 7 Dec 2014 15:28:47 -0800
Subject: [PATCH 17/20] Incorporte Justin's comments

---
 Procfile.dev                                  |  2 +-
 README.md                                     | 48 ++++++++----
 webpack/bootstrap-sass.config.js              |  3 +
 webpack/bootstrap-sass.extract-text.config.js | 75 -------------------
 webpack/scripts/rails_only.jsx                |  2 +-
 webpack/scripts/webpack_only.jsx              |  5 +-
 ...ils.config.js => webpack.bundle.config.js} |  5 +-
 webpack/webpack.common.config.js              |  3 +-
 webpack/webpack.hot.config.js                 | 16 +---
 9 files changed, 50 insertions(+), 109 deletions(-)
 delete mode 100644 webpack/bootstrap-sass.extract-text.config.js
 rename webpack/{webpack.rails.config.js => webpack.bundle.config.js} (82%)

diff --git a/Procfile.dev b/Procfile.dev
index e06964a10..d7740e1b0 100644
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,2 +1,2 @@
 web: rails s -p 4000
-webpack: cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js
+webpack: cd webpack && $(npm bin)/webpack -w --config webpack.bundle.config.js
diff --git a/README.md b/README.md
index e72734a81..ba3f9f594 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,6 @@ In no particular order:
 1. React 0.11 (for front-end app)
 2. React-bootstrap 0.12
 3. Webpack with hot-reload 1.4 (for local dev)
-4. Webpack ExtractTextPlugin (to extract CSS out of JS bundle)
 4. ES6 transpiler (es6-loader) 0.2
 5. Rails 4.2 (for backend app)
 6. Heroku (for deployment)
@@ -35,13 +34,6 @@ cd webpack && node server.js
 
 Point browser to [http://0.0.0.0:3000]().
 
-Make sure to invoke your local copy of the webpack executable as opposed
-to any globally installed webpack.
-See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
-If in doubt, run the following command:
-```
-$(npm bin)/webpack --config webpack.hot.config.js
-```
 
 Save a change to a JSX file and see it update immediately in the browser! Note,
 any browser state still exists, such as what you've typed in the comments box.
@@ -61,7 +53,15 @@ Observe how the bundles are automatically re-generated whenever your JSX changes
 
 ```
 cd webpack
-webpack -w --config webpack.rails.config.js
+webpack -w --config webpack.bundle.config.js
+```
+
+Make sure to invoke your local copy of the webpack executable as opposed
+to any globally installed webpack.
+See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
+If in doubt, run the following command:
+```
+$(npm bin)/webpack -w --config webpack.bundle.config.js
 ```
 
 ## Run Rails server
@@ -81,7 +81,7 @@ It's important to run the Rails server on a different port than the node server.
 
 # Webpack configuration
 - `webpack.hot.config.js`: Used by server.js to run the demo express server.
-- `webpack.rails.config.js`: Used to generate the Rails bundles.
+- `webpack.bundle.config.js`: Used to generate the Rails bundles.
 - `webpack.common.config.js`: Common configuration file to minimize code duplication.
 
 # Bootstrap integration
@@ -94,16 +94,36 @@ assets are loaded through Webpack (with help of the bootstrap-sass-loader).
 See webpack/webpack.hot.config.js.
 
 
-To avoid duplicating any Bootstrap customization between Rails and Webpack,
-all Bootstrap customizations have been consolidated under Webpack in
+Bootstrap can be customized by hand-picking which modules to load and/or overwriting
+some of the Sass variables defined by the frameworks.
+
+## Bootstrap modules customization
+
+If you are not using all the Bootstrap modules then you'll likely want to customize
+it to avoid loading unused assets. This customization is done in separate files
+for the Rails app versus the Webpack dev server so it's important to keep these
+in-sync as you develop your app in parallel using the Rails and the Webpack HMR
+environments.
+
+- Rails Bootstrap customization file: app/assets/stylesheets/_bootstrap-custom.scss
+- Webpack HMR Bootstrap customization file: webpack/bootstrap-sass.config.js
+
+## Bootstrap variables customization
+
+If you need to customize some of the Sass variables defined in Bootstrap you
+can do so by overwriting these variables in a separate file and have it loaded
+before other Bootstrap modules.
+
+To avoid duplicating this customization between Rails and Webpack HMR,
+this custom code has been consolidated under Webpack in
 webpack/assets/stylesheets/_bootstrap-variables-customization.scss and the
 webpack/assets/stylesheets directory added to the Rails asset pipeline
 search path. See config config/application.rb. Keep that in mind as you
-need to customize Bootstrap.
+customize the Bootstrap Sass variables.
 
 # Notes on Rails assets
 ## Javascript
-The `webpack.rails.config.js` file generates rails-bundle.js which is then included
+The `webpack.bundle.config.js` file generates rails-bundle.js which is then included
 by the Rails asset pipeline.
 
 ## Sass and images
diff --git a/webpack/bootstrap-sass.config.js b/webpack/bootstrap-sass.config.js
index 13ef5792f..1faa24639 100644
--- a/webpack/bootstrap-sass.config.js
+++ b/webpack/bootstrap-sass.config.js
@@ -1,3 +1,6 @@
+// IMPORTANT: Make sure to keep the customizations defined in this file
+//            in-sync with the ones defined in app/assets/stylesheets/_bootstrap-custom.scss.
+
 module.exports = {
   bootstrapCustomizations: "./assets/stylesheets/_bootstrap-variables-customization.scss",
   mainSass: "./_main.scss",
diff --git a/webpack/bootstrap-sass.extract-text.config.js b/webpack/bootstrap-sass.extract-text.config.js
deleted file mode 100644
index 16bde1ec9..000000000
--- a/webpack/bootstrap-sass.extract-text.config.js
+++ /dev/null
@@ -1,75 +0,0 @@
-//var ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-module.exports = {
-  bootstrapCustomizations: "./_bootstrap-customizations.scss",
-  mainSass: "./_main.scss",
-
-  // Default for the style loading is to put in your js files
-  // styleLoader: "style-loader!css-loader!sass-loader";
-  // styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader"),
-
-  // ### Scripts
-  // Any scripts here set to false will never make it to the client,
-  // i.e. it's not packaged by webpack.
-  scripts: {
-    'transition': true,
-    'alert': true,
-    'button': true,
-    'carousel': true,
-    'collapse': true,
-    'dropdown': true,
-    'modal': false,
-    'tooltip': true,
-    'popover': true,
-    'scrollspy': true,
-    'tab': true,
-    'affix': true
-  },
-  // ### Styles
-  // Enable or disable certain less components and thus remove
-  // the css for them from the build.
-  styles: {
-    "mixins": true,
-
-    "normalize": true,
-    "print": true,
-
-    "scaffolding": true,
-    "type": true,
-    "code": true,
-    "grid": true,
-    "tables": true,
-    "forms": true,
-    "buttons": true,
-
-    "component-animations": true,
-    "glyphicons": true,
-    "dropdowns": true,
-    "button-groups": true,
-    "input-groups": true,
-    "navs": true,
-    "navbar": true,
-    "breadcrumbs": true,
-    "pagination": true,
-    "pager": true,
-    "labels": true,
-    "badges": true,
-    "jumbotron": true,
-    "thumbnails": true,
-    "alerts": true,
-    "progress-bars": true,
-    "media": true,
-    "list-group": true,
-    "panels": true,
-    "wells": true,
-    "close": true,
-
-    "modals": true,
-    "tooltip": true,
-    "popovers": true,
-    "carousel": true,
-
-    "utilities": true,
-    "responsive-utilities": true
-  }
-};
diff --git a/webpack/scripts/rails_only.jsx b/webpack/scripts/rails_only.jsx
index b1f50b8d0..4413630d5 100755
--- a/webpack/scripts/rails_only.jsx
+++ b/webpack/scripts/rails_only.jsx
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 
-// This could be done here, but instead it's done in the webpack.rails.config.js file
+// This could be done here, but instead it's done in the webpack.bundle.config.js file
 // Showing this for example purposes
 // require("expose?$!jquery");
 // require("expose?jQuery!jquery");
diff --git a/webpack/scripts/webpack_only.jsx b/webpack/scripts/webpack_only.jsx
index 9daa8bcb6..ae61684c8 100755
--- a/webpack/scripts/webpack_only.jsx
+++ b/webpack/scripts/webpack_only.jsx
@@ -1,7 +1,10 @@
 // These are only loaded by the webpack dev server
 
 require("test-stylesheet.css");
-require("test-sass-stylesheet.scss"); // test out sass
+// Test out Sass.
+// Note that any sass in here cannot use the variables and mixins
+// defined in the boostrap customizations file.
+require("test-sass-stylesheet.scss");
 
 require("expose?$!jquery");
 require("expose?jQuery!jquery");
diff --git a/webpack/webpack.rails.config.js b/webpack/webpack.bundle.config.js
similarity index 82%
rename from webpack/webpack.rails.config.js
rename to webpack/webpack.bundle.config.js
index f8758beb4..5ba4986d8 100644
--- a/webpack/webpack.rails.config.js
+++ b/webpack/webpack.bundle.config.js
@@ -1,5 +1,6 @@
 // Run like this:
-// cd webpack && $(npm bin)/webpack -w --config webpack.hot.config.js
+// cd webpack && $(npm bin)/webpack -w --config webpack.bundle.config.js
+// Note that Foreman (Procfile.dev) has also been configured to take care of this.
 
 var config = require("./webpack.common.config");
 
@@ -19,7 +20,7 @@ module.exports = config;
 var devBuild = (typeof process.env["BUILDPACK_URL"]) === "undefined";
 if (devBuild) {
   console.log("Webpack dev build for Rails");
-  //module.exports.devtool = "eval-source-map";
+  module.exports.devtool = "eval-source-map";
 } else {
   console.log("Webpack production build for Rails");
 }
diff --git a/webpack/webpack.common.config.js b/webpack/webpack.common.config.js
index d65e57ebd..9dda9ee1a 100644
--- a/webpack/webpack.common.config.js
+++ b/webpack/webpack.common.config.js
@@ -1,9 +1,8 @@
-// Common webpack configuration used by webpack.hot.config and webpack.rails.config.
+// Common webpack configuration used by webpack.hot.config and webpack.bundle.config.
 
 var path = require("path");
 
 module.exports = {
-  devtool: "eval-source-map",
   context: __dirname, // the project dir
   entry: [ "./assets/javascripts/example" ],
   // In case you wanted to load jQuery from the CDN, this is how you would do it:
diff --git a/webpack/webpack.hot.config.js b/webpack/webpack.hot.config.js
index e7d818e23..d00180348 100644
--- a/webpack/webpack.hot.config.js
+++ b/webpack/webpack.hot.config.js
@@ -1,26 +1,16 @@
 // Run like this:
-// cd webpack && $(npm bin)/webpack -w --config webpack.hot.config.js
-// or:
 // cd webpack && node server.js
 
 var config = require("./webpack.common.config");
 var webpack = require("webpack");
-//var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
-// Add the following entries as appropriate:
-// "bootstrap-sass-loader" -> all bootstrap assets
-// "bootstrap-sass!./bootstrap-sass.config.js" -> custom bootstrap
-// "bootstrap-sass!./bootstrap-sass.extract-text.config.js" -> custom bootstrap w/ ExtractTextPlugin
 config.entry.push("webpack-dev-server/client?http://localhost:3000",
                   "webpack/hot/dev-server",
                   "./scripts/webpack_only",
-                  "bootstrap-sass!./bootstrap-sass.config.js");
-                  //"bootstrap-sass!./bootstrap-sass.extract-text.config.js");
+                  "bootstrap-sass!./bootstrap-sass.config.js"); // custom bootstrap
+                  //"bootstrap-sass-loader" -> all bootstrap assets
 config.output = { filename: "express-bundle.js", // this file is served directly by webpack
                   path: __dirname };
-//config.module.loaders.push(
-//  { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
-//);
 config.plugins = [ new webpack.HotModuleReplacementPlugin() ];
-                   //new ExtractTextPlugin("bootstrap-and-customizations.css") ];
+config.devtool = "eval-source-map";
 module.exports = config;

From f82c7ab3396368f837e97fb88c4cb47c67ba8fc8 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Sun, 7 Dec 2014 15:35:30 -0800
Subject: [PATCH 18/20] Overwrite default body-bg variable (instant bootstrap
 customization feedback)

---
 .../assets/stylesheets/_bootstrap-variables-customization.scss   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webpack/assets/stylesheets/_bootstrap-variables-customization.scss b/webpack/assets/stylesheets/_bootstrap-variables-customization.scss
index 471878954..07b1cd3ee 100644
--- a/webpack/assets/stylesheets/_bootstrap-variables-customization.scss
+++ b/webpack/assets/stylesheets/_bootstrap-variables-customization.scss
@@ -1,2 +1,3 @@
+$body-bg: #EFF8FB; // background w/ character
 $navbar-default-bg: #FFFFE0; // fancy yellow navbar
 $font-size-base: 15px; // make it bigger!

From e9793828cc10a64b108298f575eb68f13f709244 Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Sun, 7 Dec 2014 16:09:26 -0800
Subject: [PATCH 19/20] Fix Readme

---
 README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ba3f9f594..5e020cefa 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,10 @@ Full tutorial can be found at: [Fast Rich Client Rails Development With Webpack
 # Motivation
 
 In no particular order:
-1. Enable development of a JS client independently from Rails.
-2. Easily enable use of npm modules with a Rails application.
-3. Easily enable retrofitting such a JS framework into an existing Rails app.
-4. Enable the use of the JavaScript ES6 transpiler.
+- Enable development of a JS client independently from Rails.
+- Easily enable use of npm modules with a Rails application.
+- Easily enable retrofitting such a JS framework into an existing Rails app.
+- Enable the use of the JavaScript ES6 transpiler.
 
 # Technologies involved
 
@@ -32,7 +32,7 @@ npm install
 cd webpack && node server.js
 ```
 
-Point browser to [http://0.0.0.0:3000]().
+Point your browser to [http://0.0.0.0:3000]().
 
 
 Save a change to a JSX file and see it update immediately in the browser! Note,

From 223b5493c8e6c9b6c04a155e452e93d061bc3fef Mon Sep 17 00:00:00 2001
From: Martin Breining <martin.breining@gmail.com>
Date: Sun, 7 Dec 2014 17:34:43 -0800
Subject: [PATCH 20/20] Rename webpack rails config file back to
 webpack.rails.config.js

---
 README.md                                                 | 8 ++++----
 app/assets/javascripts/application.js                     | 2 +-
 webpack/scripts/rails_only.jsx                            | 2 +-
 webpack/webpack.hot.config.js                             | 1 -
 .../{webpack.bundle.config.js => webpack.rails.config.js} | 4 ++--
 5 files changed, 8 insertions(+), 9 deletions(-)
 rename webpack/{webpack.bundle.config.js => webpack.rails.config.js} (89%)

diff --git a/README.md b/README.md
index 5e020cefa..e42f5f1d1 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@ Observe how the bundles are automatically re-generated whenever your JSX changes
 
 ```
 cd webpack
-webpack -w --config webpack.bundle.config.js
+webpack -w --config webpack.rails.config.js
 ```
 
 Make sure to invoke your local copy of the webpack executable as opposed
@@ -61,7 +61,7 @@ to any globally installed webpack.
 See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
 If in doubt, run the following command:
 ```
-$(npm bin)/webpack -w --config webpack.bundle.config.js
+$(npm bin)/webpack -w --config webpack.rails.config.js
 ```
 
 ## Run Rails server
@@ -81,7 +81,7 @@ It's important to run the Rails server on a different port than the node server.
 
 # Webpack configuration
 - `webpack.hot.config.js`: Used by server.js to run the demo express server.
-- `webpack.bundle.config.js`: Used to generate the Rails bundles.
+- `webpack.rails.config.js`: Used to generate the Rails bundles.
 - `webpack.common.config.js`: Common configuration file to minimize code duplication.
 
 # Bootstrap integration
@@ -123,7 +123,7 @@ customize the Bootstrap Sass variables.
 
 # Notes on Rails assets
 ## Javascript
-The `webpack.bundle.config.js` file generates rails-bundle.js which is then included
+The `webpack.rails.config.js` file generates rails-bundle.js which is then included
 by the Rails asset pipeline.
 
 ## Sass and images
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 91011c85c..99bdec017 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -17,5 +17,5 @@
 
 // Important to import jquery_ujs before rails-bundle as that patches jquery xhr to use the authenticity token!
 
-//= require rails-bundle
+//= require webpack-bundle
 //= require turbolinks
diff --git a/webpack/scripts/rails_only.jsx b/webpack/scripts/rails_only.jsx
index 4413630d5..b1f50b8d0 100755
--- a/webpack/scripts/rails_only.jsx
+++ b/webpack/scripts/rails_only.jsx
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 
-// This could be done here, but instead it's done in the webpack.bundle.config.js file
+// This could be done here, but instead it's done in the webpack.rails.config.js file
 // Showing this for example purposes
 // require("expose?$!jquery");
 // require("expose?jQuery!jquery");
diff --git a/webpack/webpack.hot.config.js b/webpack/webpack.hot.config.js
index d00180348..fe16e40d0 100644
--- a/webpack/webpack.hot.config.js
+++ b/webpack/webpack.hot.config.js
@@ -8,7 +8,6 @@ config.entry.push("webpack-dev-server/client?http://localhost:3000",
                   "webpack/hot/dev-server",
                   "./scripts/webpack_only",
                   "bootstrap-sass!./bootstrap-sass.config.js"); // custom bootstrap
-                  //"bootstrap-sass-loader" -> all bootstrap assets
 config.output = { filename: "express-bundle.js", // this file is served directly by webpack
                   path: __dirname };
 config.plugins = [ new webpack.HotModuleReplacementPlugin() ];
diff --git a/webpack/webpack.bundle.config.js b/webpack/webpack.rails.config.js
similarity index 89%
rename from webpack/webpack.bundle.config.js
rename to webpack/webpack.rails.config.js
index 5ba4986d8..75829fcda 100644
--- a/webpack/webpack.bundle.config.js
+++ b/webpack/webpack.rails.config.js
@@ -1,11 +1,11 @@
 // Run like this:
-// cd webpack && $(npm bin)/webpack -w --config webpack.bundle.config.js
+// cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js
 // Note that Foreman (Procfile.dev) has also been configured to take care of this.
 
 var config = require("./webpack.common.config");
 
 config.entry.push("./scripts/rails_only"); // rails specific assets
-config.output = { filename: "rails-bundle.js",
+config.output = { filename: "webpack-bundle.js",
                   path: "../app/assets/javascripts" };
 config.externals = { jquery: "var jQuery" }; // load jQuery from cdn or rails asset pipeline
 config.module.loaders.push(