Copy this bookmark:



description:


tags:



bookmark detail

webpack-hot-server-middleware: :fire: Hot reload webpack bundles on the server
Github repo
Name: webpack-hot-server-middleware
Tagline: :fire: Hot reload webpack bundles on the server
Languages:
JavaScript = 16601 bytes

# Webpack Hot Server Middleware
[![Build Status](https://travis-ci.org/60frames/webpack-hot-server-middleware.svg?branch=master)](https://travis-ci.org/60frames/webpack-hot-server-middleware) [![npm version](https://badge.fury.io/js/webpack-hot-server-middleware.svg)](https://www.npmjs.com/package/webpack-hot-server-middleware) [![Coverage Status](https://coveralls.io/repos/github/60frames/webpack-hot-server-middleware/badge.svg?branch=master)](https://coveralls.io/github/60frames/webpack-hot-server-middleware?branch=master) [![npm downloads](https://img.shields.io/npm/dm/webpack-hot-server-middleware.svg)](https://www.npmjs.com/package/webpack-hot-server-middleware)

Webpack Hot Server Middleware is designed to be used in conjunction with [`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware/) (and optionally [`webpack-hot-middleware`](https://github.com/glenjamin/webpack-hot-middleware/)) to hot update Webpack bundles on the server.

## Why?

When creating universal Web apps it's common to build two bundles with Webpack, one client bundle [targeting](https://webpack.github.io/docs/configuration.html#target) 'web' and another server bundle targeting 'node'.

The entry point to the client bundle renders to the DOM, e.g.

```js
// 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.

```js
// 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.

```js
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...
github  programming  github-starred-to-pinboard  crypto 
february 2018 by brianyang
view in context