How to use webpack-hot-middleware - 10 common examples

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 };
}

startReportingRuntimeErrors,
  stopReportingRuntimeErrors,
} from 'react-error-overlay';

setEditorHandler(errorLocation => {
  console.log('setEditorHandler', errorLocation);
  
  const fileName = encodeURIComponent(errorLocation.fileName);
  const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
  fetch(
    // Keep in sync with react-dev-utils/errorOverlayMiddleware
    `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
  );
});

hotClient.useCustomOverlay({
  showProblems(type, errors) {
    const formatted = formatWebpackMessages({
      errors,
      warnings: [],
    });

    reportBuildError(formatted.errors[0]);
  },
  clear() {
    dismissBuildError();
  },
});

hotClient.setOptionsAndConnect({
  name: 'client',
  reload: true,

startReportingRuntimeErrors,
  stopReportingRuntimeErrors,
} from 'react-error-overlay';

setEditorHandler(errorLocation => {
  console.log('setEditorHandler', errorLocation);
  
  const fileName = encodeURIComponent(errorLocation.fileName);
  const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
  fetch(
    // Keep in sync with react-dev-utils/errorOverlayMiddleware
    `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
  );
});

hotClient.useCustomOverlay({
  showProblems(type, errors) {
    const formatted = formatWebpackMessages({
      errors,
      warnings: [],
    });

    reportBuildError(formatted.errors[0]);
  },
  clear() {
    dismissBuildError();
  },
});

hotClient.setOptionsAndConnect({
  name: 'client',
  reload: true,

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 }
}

// Keep in sync with react-dev-utils/errorOverlayMiddleware
    // eslint-disable-next-line no-undef
    fetch(`${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`);
});

hotClient.useCustomOverlay({
    showProblems(type, errors) {
        reportBuildError(formatWebpackMessages({ errors, warnings: [] }).errors[0]);
    },
    clear() {
        dismissBuildError();
    },
});

hotClient.setOptionsAndConnect({ name: 'client', reload: true });

startReportingRuntimeErrors({ filename: '/assets/client.js' });

if (module.hot) {
    module.hot.dispose(stopReportingRuntimeErrors);
}

reportBuildError,
    dismissBuildError,
    startReportingRuntimeErrors,
    stopReportingRuntimeErrors,
} from 'react-error-overlay';

setEditorHandler((errorLocation) => {
    const fileName = encodeURIComponent(errorLocation.fileName);
    const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);

    // Keep in sync with react-dev-utils/errorOverlayMiddleware
    // eslint-disable-next-line no-undef
    fetch(`${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`);
});

hotClient.useCustomOverlay({
    showProblems(type, errors) {
        reportBuildError(formatWebpackMessages({ errors, warnings: [] }).errors[0]);
    },
    clear() {
        dismissBuildError();
    },
});

hotClient.setOptionsAndConnect({ name: 'client', reload: true });

startReportingRuntimeErrors({ filename: '/assets/client.js' });

if (module.hot) {
    module.hot.dispose(stopReportingRuntimeErrors);
}

reportBuildError,
  dismissBuildError,
  startReportingRuntimeErrors,
  stopReportingRuntimeErrors,
} from 'react-error-overlay';

setEditorHandler(errorLocation => {
  const fileName = encodeURIComponent(errorLocation.fileName);
  const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
  fetch(
    // Keep in sync with react-dev-utils/errorOverlayMiddleware
    `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
  );
});

hotClient.useCustomOverlay({
  showProblems(type, errors) {
    const formatted = formatWebpackMessages({
      errors,
      warnings: [],
    });

    reportBuildError(formatted.errors[0]);
  },
  clear() {
    dismissBuildError();
  },
});

hotClient.setOptionsAndConnect({
  name: 'client',
  reload: true,