Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
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 universalRenderer() {
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="/bundle.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 universalRenderer = require('./dist/server');
const app = express();
app.use(universalRenderer());
app.listen(6060);
Given this setup it's fairly easy to hook up hot module reloading for your client bundle using webpack-dev-server
or webpack-hot-middleware
however these middlewares don't handle server bundles meaning you need to constantly restart your server whenever a change is made.
Webpack Hot Server Middleware will ensure that the server bundle used is always the latest compilation without requiring a restart.
It turns out hot reloading a Webpack bundle on the server is much easier than on the client as you don't have any state to preserve because renderToString
is neccesarily 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));
Now whenever Webpack rebuilds the new bundle will be used both client and server side.
FAQs
Hot updates Webpack bundles on the server
The npm package webpack-hot-server-middleware receives a total of 13,513 weekly downloads. As such, webpack-hot-server-middleware popularity was classified as 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
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.