chore(dev): use webpack dev server, HMR

Author: Awk34

templates/app/_package.json

@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     <%# CLIENT %>
+    "@angularclass/hmr-loader": "^3.0.2",
     "@angularclass/match-control": "^2.0.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.12",
@@ -139,8 +140,7 @@
     "lazypipe": "^1.0.1",
     <%# WEBPACK %>
     "webpack": "2.2.0",
-    "webpack-dev-middleware": "^1.9.0",
-    "webpack-dev-server": "^2.2.0-rc.0",
+    "webpack-dev-server": "^2.2.0",
     "extract-text-webpack-plugin": "2.0.0",
     "html-webpack-plugin": "^2.24.1",
     "html-webpack-harddisk-plugin": "~0.0.2",

templates/app/client/app/app.js

@@ -1,4 +1,4 @@
-import '!!style!css!sass!./app.<%= styleExt %>';
+import '!!style-loader!css-loader!sass-loader!./app.scss';
 
 import './polyfills';
 

templates/app/client/app/app.module.js

@@ -44,14 +44,26 @@
 //   })<% } %>;
 
 
-import { NgModule, ErrorHandler, Injectable } from '@angular/core';
+import {
+  NgModule,
+  ErrorHandler,
+  Injectable,
+  ApplicationRef,
+} from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import {
   HttpModule,
   BaseRequestOptions,
   RequestOptions,
   RequestOptionsArgs,
 } from '@angular/http';
+import {
+  removeNgStyles,
+  createNewHosts,
+  disposeOldHosts,
+  createInputTransfer,
+  restoreInputValues,
+} from '@angularclass/hmr';
 <%_ if (filters.uirouter) { -%>
 import { UIRouterModule } from 'ui-router-ng2';<% } %>
 import { provideAuth } from 'angular2-jwt';
@@ -99,4 +111,45 @@ if(constants.env === 'development') {
     ],
     bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+  static parameters = [ApplicationRef];
+  constructor(appRef/*: ApplicationRef*/) {
+    this.appRef = appRef;
+  }
+
+  hmrOnInit(store) {
+    if (!store || !store.state) return;
+    console.log('HMR store', store);
+    console.log('store.state.data:', store.state.data)
+    // inject AppStore here and update it
+    // this.AppStore.update(store.state)
+    if ('restoreInputValues' in store) {
+      store.restoreInputValues();
+    }
+    // change detection
+    this.appRef.tick();
+    delete store.state;
+    delete store.restoreInputValues;
+  }
+
+  hmrOnDestroy(store) {
+    var cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+    // recreate elements
+    store.disposeOldHosts = createNewHosts(cmpLocation)
+    // inject your AppStore and grab state then set it on store
+    // var appState = this.AppStore.get()
+    store.state = {data: 'yolo'};
+    // store.state = Object.assign({}, appState)
+    // save input values
+    store.restoreInputValues  = createInputTransfer();
+    // remove styles
+    removeNgStyles();
+  }
+
+  hmrAfterDestroy(store) {
+    // display new elements
+    store.disposeOldHosts()
+    delete store.disposeOldHosts;
+    // anything you need done the component is removed
+  }
+}

templates/app/gulpfile.babel.js

@@ -299,8 +299,8 @@ gulp.task('jscs', () => {
 gulp.task('clean:tmp', () => del(['.tmp/**/*'], {dot: true}));
 
 gulp.task('start:client', cb => {
-    whenServerReady(() => {
-        open('http://localhost:' + config.browserSyncPort);
+    return require('./webpack.server').start(config.clientPort).then(() => {
+        open(`http://localhost:${config.clientPort}`);
         cb();
     });
 });

templates/app/server/config/environment/index.js

@@ -19,8 +19,8 @@ var all = {
   // Root path of server
   root: path.normalize(`${__dirname}/../../..`),
 
-  // Browser-sync port
-  browserSyncPort: process.env.BROWSER_SYNC_PORT || 3000,
+  // dev client port
+  clientPort: process.env.CLIENT_PORT || 3000,
 
   // Server port
   port: process.env.PORT || <%= devPort %>,

templates/app/server/config/express.js

@@ -86,64 +86,6 @@ export default function(app) {
     }));
   }<% } %>
 
-  if(env === 'development') {
-    const webpackDevMiddleware = require('webpack-dev-middleware');
-    const stripAnsi = require('strip-ansi'); 
-    const webpack = require('webpack');
-    const makeWebpackConfig = require('../../webpack.make');
-    const webpackConfig = makeWebpackConfig({ DEV: true });
-    const compiler = webpack(webpackConfig);
-    const browserSync = require('browser-sync').create();
-
-    app.use(cors({
-      origin: true,
-      credentials: true,
-    }));
-
-    app.use(function(req, res, next) {
-      res.setHeader('Access-Control-Allow-Origin', `http://localhost:${config.browserSyncPort}`);
-      next();
-    });
-
-    /**
-     * Run Browsersync and use middleware for Hot Module Replacement
-     */
-    browserSync.init({
-      open: false,
-      logFileChanges: false,
-      proxy: `localhost:${config.port}`,
-      ws: true,
-      middleware: [
-        webpackDevMiddleware(compiler, {
-          noInfo: false,
-          stats: {
-            colors: true,
-            timings: true,
-            chunks: false   
-          }
-        })
-      ],
-      port: config.browserSyncPort,
-      plugins: ['bs-fullscreen-message']
-    });
-
-    /**
-     * Reload all devices when bundle is complete
-     * or send a fullscreen error message to the browser instead
-     */
-    compiler.plugin('done', function(stats) {
-      console.log('webpack done hook');
-      if(stats.hasErrors() || stats.hasWarnings()) {
-        return browserSync.sockets.emit('fullscreen:message', {
-          title: "Webpack Error:",
-          body: stripAnsi(stats.toString()),
-          timeout: 100000
-        });
-      }
-      browserSync.reload();
-    });
-  }
-
   if(env === 'development' || env === 'test') {
     app.use(errorHandler()); // Error handler - has to be last
   }

templates/app/webpack.make.js

@@ -1,5 +1,6 @@
 'use strict';
 /*eslint-env node*/
+const _ = require('lodash');
 var webpack = require('webpack');
 var autoprefixer = require('autoprefixer');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -84,7 +85,7 @@ module.exports = function makeWebpackConfig(options) {
             modulesDirectories: [
                 'node_modules'
             ],
-            extensions: ['', '.js', '.ts']
+            extensions: ['.js', '.ts']
         };
     }
 
@@ -110,22 +111,18 @@ module.exports = function makeWebpackConfig(options) {
 
     // Initialize module
     config.module = {
-        noParse: [
-            path.join(__dirname, 'node_modules', 'zone.js', 'dist'),
-            path.join(__dirname, 'node_modules', '@angular', 'bundles'),
-        ],
         rules: [{
             // JS LOADER
             // Reference: https://github.com/babel/babel-loader
             // Transpile .js files using babel-loader
             // Compiles ES6 and ES7 into ES5 code
             test: /\.js$/,
-            use: {
-                loader: 'babel',
+            use: [{
+                loader: 'babel-loader',
                 options: {
                     plugins: TEST ? ['istanbul'] : [],
                 }
-            },
+            }].concat(DEV ? '@angularclass/hmr-loader' : []),
             include: [
                 path.resolve(__dirname, 'client/'),
                 path.resolve(__dirname, 'server/config/environment/shared.js'),
@@ -136,13 +133,13 @@ module.exports = function makeWebpackConfig(options) {
             // Reference: https://github.com/s-panferov/awesome-typescript-loader
             // Transpile .ts files using awesome-typescript-loader
             test: /\.ts$/,
-            use: {
+            use: [{
                 loader: 'awesome-typescript-loader',
                 <%_ if(filters.ts) { -%>
                 options: {
                     tsconfig: path.resolve(__dirname, 'tsconfig.client.json')
                 },<% } %>
-            },
+            }].concat(DEV ? '@angularclass/hmr-loader' : []),
             include: [
                 path.resolve(__dirname, 'client/')
             ]
@@ -154,21 +151,21 @@ module.exports = function makeWebpackConfig(options) {
             // Pass along the updated reference to your code
             // You can add here any file extension you want to get copied to your output
             test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)([\?]?.*)$/,
-            use: 'file'
+            use: 'file-loader'
         }, {
             <%_ if(filters.pug) { _%>
             // Pug HTML LOADER
             // Reference: https://github.com/willyelm/pug-html-loader
             // Allow loading Pug throw js
             test: /\.(jade|pug)$/,
-            use: 'pug-html'
+            use: 'pug-html-loader'
         }, {<% } %>
             <%_ if(filters.html) { _%>
             // HTML LOADER
             // Reference: https://github.com/webpack/raw-loader
             // Allow loading html through js
             test: /\.html$/,
-            use: 'raw'
+            use: 'raw-loader'
         }, {<% } %>
             // CSS LOADER
             // Reference: https://github.com/webpack/css-loader
@@ -183,16 +180,16 @@ module.exports = function makeWebpackConfig(options) {
                 //
                 // Reference: https://github.com/webpack/style-loader
                 // Use style-loader in development for hot-loading
-                ? ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
+                ? ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader']})
                 // Reference: https://github.com/webpack/null-loader
                 // Skip loading css in test mode
-                : 'null'
+                : 'null-loader'
         }<% if(!filters.css) { %>, {
             <%_ if(filters.sass) { _%>
             // SASS LOADER
             // Reference: https://github.com/jtangelder/sass-loader
             test: /\.(scss|sass)$/,
-            use: ['raw', 'sass'],
+            use: ['raw-loader', 'sass-loader'],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap-sass/assets/stylesheets/*.scss'),
                 path.resolve(__dirname, 'client')
@@ -201,7 +198,7 @@ module.exports = function makeWebpackConfig(options) {
             // LESS LOADER
             // Reference: https://github.com/
             test: /\.less$/,
-            use: ['style', 'css', 'less'],
+            use: ['style-loader', 'css-loader', 'less-loader'],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap/less/*.less'),
                 path.resolve(__dirname, 'client/app/app.less')
@@ -210,7 +207,7 @@ module.exports = function makeWebpackConfig(options) {
             // Stylus LOADER
             // Reference: https://github.com/
             test: /\.styl$/,
-            use: ['style', 'css', 'stylus'],
+            use: ['style-loader', 'css-loader', 'stylus-loader'],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap-styl/bootstrap/*.styl'),
                 path.resolve(__dirname, 'client/app/app.styl')
@@ -238,8 +235,9 @@ module.exports = function makeWebpackConfig(options) {
         // Reference: https://github.com/webpack/extract-text-webpack-plugin
         // Extract css files
         // Disabled when in test mode or not in build mode
-        new ExtractTextPlugin('[name].[hash].css', {
-            disable: !BUILD || TEST
+        new ExtractTextPlugin({
+            filename: '[name].[hash].css',
+            disable: !BUILD || TEST,
         }),
 
         new webpack.LoaderOptionsPlugin({
@@ -366,21 +364,6 @@ module.exports = function makeWebpackConfig(options) {
         config.debug = false;
     }
 
-    /**
-     * Dev server configuration
-     * Reference: http://webpack.github.io/docs/configuration.html#devserver
-     * Reference: http://webpack.github.io/docs/webpack-dev-server.html
-     */
-    config.devServer = {
-        contentBase: './client/',
-        stats: {
-            modules: false,
-            cached: false,
-            colors: true,
-            chunk: false
-        }
-    };
-
     config.node = {
         global: true,
         process: true,

templates/app/webpack.server.js

@@ -0,0 +1,54 @@
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const config = require('./webpack.make')({ DEV: true });
+const appConfig = require('./server/config/environment');
+const devServerEntry = [`webpack-dev-server/client?http://localhost:${appConfig.clientPort}/`, 'webpack/hot/dev-server'];
+
+config.entry.app = devServerEntry.concat(config.entry.app);
+
+console.log(config.entry);
+console.log(config.entry.app);
+
+const compiler = webpack(config);
+
+export const server = new WebpackDevServer(compiler, {
+    contentBase: './client/',
+
+    hot: true,
+
+    historyApiFallback: true,
+
+    stats: {
+        modules: false,
+        cached: false,
+        colors: true,
+        chunk: false
+    },
+    quiet: false,
+    noInfo: false,
+
+    proxy: {
+      '/api': {
+        target: 'http://localhost:9000',
+        secure: false,
+      },
+      '/auth': {
+        target: 'http://localhost:9000',
+        secure: false,
+      },
+      '/socket.io': {
+        target: 'http://localhost:9000',
+        secure: false,
+      },
+    },
+});
+
+/**
+ * Starts the dev server
+ * @returns {Promise}
+ */
+export function start() {
+    return new Promise(resolve => {
+        server.listen(appConfig.clientPort, resolve);
+    });
+}