webpack-hot-server-middleware
Advanced tools
Webpack Hot Server Middleware is designed to be used in conjunction with webpack-dev-middleware (and optionally webpack-hot-middleware) to hot update Webpack bundles on the server.
When creating universal Web apps it's common to build two bundles with Webpack, one client bundle targeting 'web' and another server bundle targeting 'node'.
The entry point to the client bundle renders to the DOM, e.g.
// client.js
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
And the entry point to the server bundle renders to string, e.g.
// server.js
import { renderToString } from 'react-dom/server';
import App from './components/App';
export default function serverRenderer() {
return (req, res, next) => {
res.status(200).send(`
<!doctype html>
<html>
<head>
<title>App</title>
</head>
<body>
<div id="root">
${renderToString(<App />)}
</div>
<script src="/client.js"></script>
</body>
</html>
`);
};
}
NOTE: The server bundle is itself middleware allowing you to mount it anywhere in an existing node server, e.g.
const express = require('express');
const serverRenderer = require('./dist/server');
const app = express();
app.use(serverRenderer());
app.listen(6060);
Given this setup it's fairly easy to hook up hot module replacement for your client bundle using webpack-dev-server or webpack-hot-middleware however these middlewares don't handle server bundles meaning you need to frequently restart your server to see the latest changes.
Webpack Hot Server Middleware solves this problem, ensuring the server bundle used is always the latest compilation without requiring a restart. Additionally it allows your client and server bundle to share the same Webpack cache for faster builds and uses an in-memory bundle on the server to avoid hitting the disk.
It turns out hot module replacement is much easier on the server than on the client as you don't have any state to preserve because middleware is almost always necessarily stateless, so the entire bundle can be replaced at the top level whenever a change occurs.
Webpack Hot Server Middleware expects your Webpack config to export an array of configurations, one for your client bundle and one for your server bundle, e.g.
// webpack.config.js
module.exports = [
{
name: 'client',
target: 'web',
entry: './client.js'
...
}, {
name: 'server',
target: 'node',
entry: './server.js'
...
}
];
NOTE: It's important both the 'client' and 'server' configs are given the name 'client' and 'server' respectively.
It then needs to be mounted immediately after webpack-dev-middleware, e.g.
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
const config = require('./webpack.config.js');
const app = express();
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler));
app.use(webpackHotServerMiddleware(compiler));
app.listen(6060);
Now whenever Webpack rebuilds, the new bundle will be used both client and server side.
A simple example can be found in the example directory and a more real world example can be seen in the 60fram.es boilerplate.
webpack-hot-middlewarewebpack-hot-middleware needs to be mounted before webpack-hot-server-middleware to ensure client hot module replacement requests are handled correctly, e.g.
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
const config = require('./webpack.config.js');
const app = express();
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler));
// NOTE: Only the client bundle needs to be passed to `webpack-hot-middleware`.
app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
app.use(webpackHotServerMiddleware(compiler));
app.listen(6060);
A production setup might conditionally use express.static instead of webpack-dev-server and a pre-built server bundle instead of webpack-hot-server-middleware, e.g.
const express = require('express');
const path = require('path');
const app = express();
if (process.env.NODE_ENV !== 'production') {
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler));
app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
app.use(webpackHotServerMiddleware(compiler));
} else {
const DIST_DIR = path.join(__dirname, '../dist');
const SERVER_RENDERER_PATH = path.join(DIST_DIR, 'server.js');
const CLIENT_STATS_PATH = path.join(DIST_DIR, 'stats.json');
const serverRenderer = require(SERVER_RENDERER_PATH);
const stats = require(CLIENT_STATS_PATH);
app.use(express.static(DIST_DIR));
app.use(serverRenderer(stats));
}
app.listen(6060);
MIT
FAQs
Hot updates Webpack bundles on the server
The npm package webpack-hot-server-middleware receives a total of 0 weekly downloads. As such, webpack-hot-server-middleware popularity was classified as not popular.
We found that webpack-hot-server-middleware demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.