How to use socket.io together with webpack-hot-middleware? How to use socket.io together with webpack-hot-middleware? express express

How to use socket.io together with webpack-hot-middleware?


Here's what worked for me in an app I'm working on where I'm using webpack hot reloading + socket.io on the same express server.

Additions to your package.json:

"webpack-dev-middleware": "^1.4.0","webpack-hot-middleware": "^2.6.0"

In the plugins section of your webpack config:

plugins: [   new webpack.optimize.OccurenceOrderPlugin(),   new webpack.HotModuleReplacementPlugin(),   new webpack.NoErrorsPlugin(),],

Setup for the express app:

const http = require('http');const express = require('express');const webpack = require('webpack');const webpackConfig = require('./webpack.config');const compiler = webpack(webpackConfig);// Create the app, setup the webpack middlewareconst app = express();app.use(require('webpack-dev-middleware')(compiler, {  noInfo: true,  publicPath: webpackConfig.output.publicPath,}));app.use(require('webpack-hot-middleware')(compiler));// You probably have other paths hereapp.use(express.static('dist'));const server = new http.Server(app);const io = require('socket.io')(server);const PORT = process.env.PORT || 8090;server.listen(PORT);io.on('connection', (socket) => {  // <insert relevant code here>  socket.emit('mappy:playerbatch', playerbatch);});

I posted a bounty for this question to help this question get answered, though I've got it working for my own app.