npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpack-hot-server-middleware

v0.6.1

Published

Hot updates Webpack bundles on the server

Downloads

64,346

Readme

Webpack Hot Server Middleware

Build Status npm version Coverage Status npm downloads

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.

Why?

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.

How?

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.

Usage

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 a name prefixed with '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, {
  serverSideRender: true
}));
app.use(webpackHotServerMiddleware(compiler));

app.listen(6060);

Now whenever Webpack rebuilds, the new bundle will be used both client and server side.

API

webpackHotServerMiddleware (compiler: MultiCompiler, options?: Options) => void

Options

chunkName string The name of the server entry point, defaults to 'main'.

serverRendererOptions object Mixed in with clientStats & serverStats and passed to the serverRenderer.

Example

A simple example can be found in the example directory and a more real world example can be seen in the 60fram.es boilerplate.

Usage with webpack-hot-middleware

webpack-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, {
  serverSideRender: true
}));
// 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);

Production Setup

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, {
      serverSideRender: true
    }));
    app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
    app.use(webpackHotServerMiddleware(compiler));
} else {
    const CLIENT_ASSETS_DIR = path.join(__dirname, '../build/client');
    const CLIENT_STATS_PATH = path.join(CLIENT_ASSETS_DIR, 'stats.json');
    const SERVER_RENDERER_PATH = path.join(__dirname, '../build/server.js');
    const serverRenderer = require(SERVER_RENDERER_PATH);
    const stats = require(CLIENT_STATS_PATH);
    app.use(express.static(CLIENT_ASSETS_DIR));
    app.use(serverRenderer(stats));
}

app.listen(6060);

License

MIT