From 7f6f312acd535aeeb3a17f945621db5c3bf1c49b Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Fri, 27 Jan 2017 15:37:36 -0800 Subject: [PATCH 1/4] archetype-react-app: fix WDS HMR --- .../config/webpack/partial/hot.js | 7 ++++++- .../electrode-archetype-react-app/arch-gulpfile.js | 10 ++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/hot.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/hot.js index bf522b93d..78281c5fc 100644 --- a/packages/electrode-archetype-react-app-dev/config/webpack/partial/hot.js +++ b/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 [ @@ -27,7 +28,11 @@ module.exports = function () { return mergeWebpackConfig(config, { devtool: "eval", - entry: entry + entry: entry, + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin() + ] }); }; }; diff --git a/packages/electrode-archetype-react-app/arch-gulpfile.js b/packages/electrode-archetype-react-app/arch-gulpfile.js index 3742f1cc8..ebfb9e81d 100644 --- a/packages/electrode-archetype-react-app/arch-gulpfile.js +++ b/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"]] }, @@ -500,7 +506,7 @@ INFO: Individual .babelrc files were generated for you in src/client and src/ser desc: "Start webpack-dev-server in hot mode", task: mkCmd("webpack-dev-server", `--config ${config.webpack}/webpack.config.hot.js`, - `--hot --progress --colors --inline`, + `--progress --colors --inline`, `--port ${archetype.webpack.devPort}`) }, From 25c20de424cf83a053868689f29229605523f46d Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Fri, 27 Jan 2017 15:40:56 -0800 Subject: [PATCH 2/4] universal-react-node: add HMR accept --- samples/universal-react-node/client/app.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/samples/universal-react-node/client/app.jsx b/samples/universal-react-node/client/app.jsx index 1f96bc770..dce98573f 100644 --- a/samples/universal-react-node/client/app.jsx +++ b/samples/universal-react-node/client/app.jsx @@ -22,6 +22,9 @@ const enhancer = compose( ); window.webappStart = () => { + if (module.hot) { + module.hot.accept(); + } const initialState = window.__PRELOADED_STATE__; const store = createStore(rootReducer, initialState, enhancer); render( From efd4151dc9b0c52e05401d45413e080502430c25 Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Fri, 27 Jan 2017 16:12:05 -0800 Subject: [PATCH 3/4] generator-electrode: app.jsx accepts HMR --- .../generators/app/templates/src/client/app.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/generator-electrode/generators/app/templates/src/client/app.jsx b/packages/generator-electrode/generators/app/templates/src/client/app.jsx index f09a29633..8e6720372 100644 --- a/packages/generator-electrode/generators/app/templates/src/client/app.jsx +++ b/packages/generator-electrode/generators/app/templates/src/client/app.jsx @@ -8,19 +8,24 @@ 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 = () => { + if (module.hot) { + module.hot.accept(); + } const initialState = window.__PRELOADED_STATE__; const store = createStore(rootReducer, initialState); render( From f29ab090c5e15d0571526213702292e8940ed3c1 Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Mon, 30 Jan 2017 09:56:59 -0800 Subject: [PATCH 4/4] archetype-react-app: fix HMR --- .../config/webpack/partial/babel.js | 27 ++++++++++++------- .../config/webpack/partial/hot.js | 6 +---- .../config/webpack/webpack.config.hot.js | 19 +++++-------- .../arch-gulpfile.js | 3 ++- .../app/templates/src/client/app.jsx | 7 ++--- .../templates/src/client/components/home.jsx | 12 ++++++--- samples/universal-react-node/client/app.jsx | 3 --- 7 files changed, 37 insertions(+), 40 deletions(-) diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/babel.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/babel.js index 785123f8d..293bd1127 100644 --- a/packages/electrode-archetype-react-app-dev/config/webpack/partial/babel.js +++ b/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" - }] + } + ] } }); }; diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/hot.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/hot.js index 78281c5fc..21fbccf02 100644 --- a/packages/electrode-archetype-react-app-dev/config/webpack/partial/hot.js +++ b/packages/electrode-archetype-react-app-dev/config/webpack/partial/hot.js @@ -28,11 +28,7 @@ module.exports = function () { return mergeWebpackConfig(config, { devtool: "eval", - entry: entry, - plugins: [ - new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin() - ] + entry: entry }); }; }; diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/webpack.config.hot.js b/packages/electrode-archetype-react-app-dev/config/webpack/webpack.config.hot.js index b3789e9ba..a78f112e2 100644 --- a/packages/electrode-archetype-react-app-dev/config/webpack/webpack.config.hot.js +++ b/packages/electrode-archetype-react-app-dev/config/webpack/webpack.config.hot.js @@ -2,8 +2,10 @@ /** * 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"); @@ -11,8 +13,6 @@ 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")); diff --git a/packages/electrode-archetype-react-app/arch-gulpfile.js b/packages/electrode-archetype-react-app/arch-gulpfile.js index ebfb9e81d..9a6528b25 100644 --- a/packages/electrode-archetype-react-app/arch-gulpfile.js +++ b/packages/electrode-archetype-react-app/arch-gulpfile.js @@ -506,7 +506,7 @@ INFO: Individual .babelrc files were generated for you in src/client and src/ser desc: "Start webpack-dev-server in hot mode", task: mkCmd("webpack-dev-server", `--config ${config.webpack}/webpack.config.hot.js`, - `--progress --colors --inline`, + `--hot --progress --colors --inline`, `--port ${archetype.webpack.devPort}`) }, @@ -615,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); }; diff --git a/packages/generator-electrode/generators/app/templates/src/client/app.jsx b/packages/generator-electrode/generators/app/templates/src/client/app.jsx index 8e6720372..d70ecff7b 100644 --- a/packages/generator-electrode/generators/app/templates/src/client/app.jsx +++ b/packages/generator-electrode/generators/app/templates/src/client/app.jsx @@ -17,15 +17,12 @@ 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 = () => { - if (module.hot) { - module.hot.accept(); - } const initialState = window.__PRELOADED_STATE__; const store = createStore(rootReducer, initialState); render( diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx index 0ac5e05c5..5c6de54c3 100644 --- a/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx +++ b/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx @@ -1,6 +1,8 @@ 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 { @@ -8,8 +10,10 @@ class Home extends React.Component { const props = this.props; const {checked, value} = props; return ( -
<%if(pwa){%> - <%}%> +
+ {/*<% if (pwa) { %>*/} + + {/*<% } %>*/}

Hello {"Electrode"}

Managing States with Redux

diff --git a/samples/universal-react-node/client/app.jsx b/samples/universal-react-node/client/app.jsx index dce98573f..1f96bc770 100644 --- a/samples/universal-react-node/client/app.jsx +++ b/samples/universal-react-node/client/app.jsx @@ -22,9 +22,6 @@ const enhancer = compose( ); window.webappStart = () => { - if (module.hot) { - module.hot.accept(); - } const initialState = window.__PRELOADED_STATE__; const store = createStore(rootReducer, initialState, enhancer); render(