How to use the webpack-hot-middleware function in webpack-hot-middleware

import { PORT, HOST, ASSETS_PATH } from '../../config';

const app: express$Application = express();
app.use(express.static('static'));

const compiler = webpack(webpackConfig);

app.use(
  webpackDevMiddleware(compiler, {
    heartbeat: 2000,
    log: false,
    publicPath: webpackConfig.output.publicPath,
    stats: { colors: true },
  }),
);
app.use(webpackHotMiddleware(compiler));

// just throws back an empty html page.
app.get('*', (req: express$Request, res: express$Response) => {
  res.status(200).send(
    html({
      'app.css': `${ASSETS_PATH}app.css`,
      'app.js': `${ASSETS_PATH}app.js`,
      'vendor.js': '',
    }),
  );
});

app.listen(PORT, HOST, (err) => {
  if (err) {
    // eslint-disable-next-line no-console
    console.log(err);

const onWebpackDone: Promise = new Promise(resolve => {
    webpackCompiler.plugin('done', () => resolve(true));
  });

  console.log('[Cosmos] Building webpack...');
  const wdmInst = webpackDevMiddleware(webpackCompiler, {
    // publicPath is the base path for the webpack assets and has to match
    // webpack.output.path
    publicPath: getRootUrl(publicUrl),
    logLevel: 'warn'
  });

  app.use(wdmInst);

  if (hot) {
    app.use(webpackHotMiddleware(webpackCompiler));
  }

  function stopWebpack() {
    return promisify(wdmInst.close.bind(wdmInst))();
  }

  return { onWebpackDone, stopWebpack };
}

import IntlWrapper from '../client/modules/Intl/IntlWrapper';

// Webpack Requirements
import webpack from 'webpack';
import config from '../webpack.config.dev';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

// Initialize the Express App
const app = new Express();

// Run Webpack dev server in development mode
if (process.env.NODE_ENV === 'development') {
  const compiler = webpack(config);
  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
  app.use(webpackHotMiddleware(compiler));
}

// React And Redux Setup
import { configureStore } from '../client/store';
import { Provider } from 'react-redux';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import Helmet from 'react-helmet';

// Import required modules
import routes from '../client/routes';
import { fetchComponentData } from './util/fetchData';
import posts from './routes/post.routes';
import dummyData from './dummyData';
import serverConfig from './config';

stats: {
                    assets: false,
                    colors: true,
                    version: false,
                    hash: false,
                    timings: false,
                    chunks: false,
                    chunkModules: false
                },

                // for other settings see
                // http://webpack.github.io/docs/webpack-dev-middleware.html
            }),

            // bundler should be the same as above
            webpackHotMiddleware(bundler)
        ]
    },

    // no need to watch '*.js' here, webpack will take care of it for us,
    // including full page reloads if HMR won't work
    files: [
        'index.html'
    ]
});

export const handleWebpackDevServer = (app: Express) => {
  // eslint-disable-next-line
  const webpackDevConfig = require('../../webpack/client/dev')

  const compiler = webpack(webpackDevConfig)

  app.use(
    webpackDevMiddleware(compiler, {
      publicPath: webpackDevConfig.output.publicPath,
    })
  )

  app.use(webpackHotMiddleware(compiler, { log: false }))

  return { compiler }
}

app.use(bodyParser.json());

if (process.env.NODE_ENV === 'development') {
	const compiler = webpack(webpackConfig);

	app.use(webpackDevMiddleware(compiler, {
		publicPath: '/dist',
		hot: true,
		filename: 'bundle.js',
		stats: {
			colors: true,
		},
		historyApiFallback: true,
	}));

	app.use(webpackHotMiddleware(compiler, {
		log: console.log,
		path: '/__webpack_hmr',
		heartbeat: 10 * 1000,
	}));
}

function handleReactRender(req, res, initState = {}, assets = {}) {
	const store = createStore(reducers, initState, applyMiddleware(thunk));
	const location = createLocation(req.originalUrl);

	match({ routes, location }, (error, redirectLocation, renderProps) => {
		if (error) {
			console.error(error);
			return res.status(500).end('Server Error');
		}
		if (!renderProps) {

import {parse as urlParse} from 'url';

import config from './webpack.config.development.babel';

const app = express();
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  noInfo: true,
  stats: {
    colors: true
  }
}));

app.use(webpackHotMiddleware(compiler));

const parsedUrl = urlParse(config.output.publicPath);
app.listen(parsedUrl.port, parsedUrl.hostname, err => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(`Listening at http://${parsedUrl.hostname}:${parsedUrl.port}`);
});

      .map(compiler => webpackHotMiddleware(compiler));

const compiler = webpack(config);
  const devMiddlewareOptions = {
    noInfo: true,
    publicPath: config.output.publicPath,
    watchOptions: config.watchOptions || {},
  };

  const router = new Router();
  const middlewareFn = getMiddleware(configDir);
  middlewareFn(router);

  router.use(webpackDevMiddleware(compiler, devMiddlewareOptions));

  if (!isProd) {
    router.use(webpackHotMiddleware(compiler));
  }

  router.get('/', (req, res) => {
    res.set('Content-Type', 'text/html');
    res.sendFile(path.join(`${__dirname}/public/index.html`));
  });

  return router;
}

export default function (compiler, opts) {
  debug('Enable Webpack Hot Module Replacement (HMR).')

  const middleware = WebpackHotMiddleware(compiler, opts)
  return async function koaWebpackHMR (ctx, next) {
    let hasNext = await applyExpressMiddleware(middleware, ctx.req, ctx.res)

    if (hasNext && next) {
      await next()
    }
  }
}