archetype-react-app: Fix webpack-dev-server HMR

packages/electrode-archetype-react-app-dev/config/webpack/partial/babel.js

@@ -4,25 +4,34 @@ var mergeWebpackConfig = require("webpack-partial").default;
 var archetype = require("../../archetype");
 var AppMode = archetype.AppMode;
 var Path = archetype.Path;
+var _ = require("lodash");
 
 module.exports = function (babel) {
+  // regex \b for word boundaries
   var babelExcludeRegex = new RegExp(`(node_modules|\b${Path.join(AppMode.src.client, "vendor")}\b)`);
   return function (config) {
+    var hmr = process.env.HMR !== undefined;
+
     return mergeWebpackConfig(config, {
       module: {
-        loaders: [{
-          name: "babel",
-          test: /\.jsx?$/,
-          exclude: babelExcludeRegex,
-          // NOTE: webpack.config.hot.js inserts "react-hot" into loaders array
-          loader: "babel-loader",
-          query: babel
-        },
+        loaders: [
+          {
+            name: "babel",
+            test: /\.jsx?$/,
+            include: hmr && Path.resolve(AppMode.src.client),
+            exclude: babelExcludeRegex,
+            loaders: [
+              hmr && "react-hot-loader",
+              "babel-loader"
+            ].filter(_.identity),
+            query: babel
+          },
           {
             name: "json",
             test: /\.json$/,
             loader: "json"
-          }]
+          }
+        ]
       }
     });
   };

packages/electrode-archetype-react-app-dev/config/webpack/partial/hot.js

@@ -2,6 +2,7 @@
 
 var archetype = require("../../archetype");
 var mergeWebpackConfig = require("webpack-partial").default;
+var webpack = require("webpack");
 
 var getDefaultEntry = function (entry) {
   return [

packages/electrode-archetype-react-app-dev/config/webpack/webpack.config.hot.js

@@ -2,17 +2,17 @@
 /**
  * Webpack hot configuration
  */
+
+process.env.HMR = "true";
+
 var _ = require("lodash");
-var path = require("path");
 var mergeWebpackConfig = require("webpack-partial").default;
 var hotConfig = require("./partial/hot");
 var baseConfig = require("./base.js");
 var defineConfig = require("./partial/define.js");
 var devConfig = require("./partial/dev.js");
 var WebpackConfig = require("webpack-config").default;
 var getRootConfig = require("./get-root-config");
-var fs = require("fs");
-var archetype = require("../archetype");
 
 var config = module.exports = _.flow(
   mergeWebpackConfig.bind(null, {}, baseConfig),
@@ -21,13 +21,6 @@ var config = module.exports = _.flow(
   hotConfig()
 )();
 
-/****
- * Hot Mods
- */
-var babel = _.find(config.module.loaders, {name: "babel"});
-
-// update babel loaders for hot loading
-babel.loaders = [].concat(["react-hot"], babel.loaders);
-babel.include = path.resolve(archetype.AppMode.src.client);
-
-module.exports = new WebpackConfig().merge(config).merge(getRootConfig("webpack.config.hot.js"));
+module.exports = new WebpackConfig()
+  .merge(config)
+  .merge(getRootConfig("webpack.config.hot.js"));

packages/electrode-archetype-react-app/arch-gulpfile.js

@@ -31,6 +31,10 @@ function setProductionEnv() {
   process.env.NODE_ENV = "production";
 }
 
+function setDevelopmentEnv() {
+  process.env.NODE_ENV = "development";
+}
+
 function setStaticFilesEnv() {
   process.env.STATIC_FILES = "true";
 }
@@ -52,7 +56,7 @@ function createGitIgnoreDir(dir, comment) {
   const dirFP = Path.resolve(dir);
   try {
     mkdirp.sync(dirFP);
-  } catch(e) {
+  } catch (e) {
     console.log("mkdir", e);
   }
 
@@ -254,6 +258,7 @@ function makeTasks(gulp) {
   let tasks = {
     ".mk-prod-dir": () => createGitIgnoreDir(Path.resolve(archetype.prodDir), "Electrode production dir"),
     ".production-env": () => setProductionEnv(),
+    ".development-env": () => setDevelopmentEnv(),
     ".webpack-dev": () => setWebpackDev(),
     ".static-files-env": () => setStaticFilesEnv(),
     ".optimize-stats": () => setOptimizeStats(),
@@ -406,6 +411,7 @@ INFO: Individual .babelrc files were generated for you in src/client and src/ser
 
     "hot": {
       desc: "Start server with watch in hot mode with webpack-dev-server",
+      dep: [".development-env"],
       task: [".webpack-dev", ["server-hot", "server-watch", "generate-service-worker"]]
     },
 
@@ -609,5 +615,6 @@ module.exports = function (gulp) {
   setupPath();
   createElectrodeTmpDir();
   gulp = gulp || require("gulp");
+  process.env.FORCE_COLOR = "true"; // force color for chalk
   gulpHelper.loadTasks(makeTasks(gulp), gulp);
 };

packages/generator-electrode/generators/app/templates/src/client/app.jsx

@@ -8,18 +8,20 @@ import {routes} from "./routes";
 import {Router, browserHistory} from "react-router";
 import {createStore} from "redux";
 import {Provider} from "react-redux";
-<% if (pwa) { %>import {notify} from "react-notify-toast";<% } %>
+/* <% if (pwa) { %> */
+import {notify} from "react-notify-toast";
+/* <% } %> */
 import "./styles/base.css";
 import rootReducer from "./reducers";
 
 // Add the client app start up code to a function as window.webappStart.
 // The webapp's full HTML will check and call it once the js-content
 // DOM is created.
-<% if (pwa) { %>
+/*<% if (pwa) { %>*/
 require.ensure(["./sw-registration"], (require) => {
   require("./sw-registration")(notify);
 }, "sw-registration");
-<% } %>
+/*<% } %>*/
 window.webappStart = () => {
   const initialState = window.__PRELOADED_STATE__;
   const store = createStore(rootReducer, initialState);

packages/generator-electrode/generators/app/templates/src/client/components/home.jsx

@@ -1,15 +1,19 @@
 import React, {PropTypes} from "react";
-import {connect} from "react-redux";<%if(pwa){%>
-import Notifications from "react-notify-toast";<%}%>
+import {connect} from "react-redux";
+/*<% if (pwa) { %>*/
+import Notifications from "react-notify-toast";
+/*<% } %>*/
 import {toggleCheck, incNumber, decNumber} from "../actions";
 
 class Home extends React.Component {
   render() {
     const props = this.props;
     const {checked, value} = props;
     return (
-      <div><%if(pwa){%>
-        <Notifications /><%}%>
+      <div>
+        {/*<% if (pwa) { %>*/}
+        <Notifications />
+        {/*<% } %>*/}
         <h1>Hello <a href={"https://github.com/electrode-io"}>{"Electrode"}</a></h1>
         <div>
           <h2>Managing States with Redux</h2>