{"id":13657948,"url":"https://github.com/60frames/webpack-hot-server-middleware","last_synced_at":"2025-05-16T14:04:28.415Z","repository":{"id":11320050,"uuid":"69288766","full_name":"60frames/webpack-hot-server-middleware","owner":"60frames","description":":fire: Hot reload webpack bundles on the server","archived":false,"fork":false,"pushed_at":"2023-01-25T07:49:09.000Z","size":1331,"stargazers_count":323,"open_issues_count":51,"forks_count":43,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-14T22:43:40.489Z","etag":null,"topics":["express-middleware","expressjs","hmr","hot-reloading","isomorphic","javascript","node","nodejs","react","reactjs","server-rendered","ssr","universal-applications","webpack","webpack-bundle"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/60frames.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-26T20:11:47.000Z","updated_at":"2025-05-05T13:30:05.000Z","dependencies_parsed_at":"2023-02-14T05:47:05.013Z","dependency_job_id":null,"html_url":"https://github.com/60frames/webpack-hot-server-middleware","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/60frames%2Fwebpack-hot-server-middleware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/60frames%2Fwebpack-hot-server-middleware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/60frames%2Fwebpack-hot-server-middleware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/60frames%2Fwebpack-hot-server-middleware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/60frames","download_url":"https://codeload.github.com/60frames/webpack-hot-server-middleware/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544146,"owners_count":22088807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express-middleware","expressjs","hmr","hot-reloading","isomorphic","javascript","node","nodejs","react","reactjs","server-rendered","ssr","universal-applications","webpack","webpack-bundle"],"created_at":"2024-08-02T05:00:54.235Z","updated_at":"2025-05-16T14:04:28.397Z","avatar_url":"https://github.com/60frames.png","language":"JavaScript","readme":"# Webpack Hot Server Middleware\n[![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)\n\nWebpack 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.\n\n## Why?\n\nWhen 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'.\n\nThe entry point to the client bundle renders to the DOM, e.g.\n\n```js\n// client.js\n\nimport ReactDOM from 'react-dom';\nimport App from './components/App';\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\nAnd the entry point to the server bundle renders to string, e.g.\n\n```js\n// server.js\n\nimport { renderToString } from 'react-dom/server';\nimport App from './components/App';\n\nexport default function serverRenderer() {\n    return (req, res, next) =\u003e {\n        res.status(200).send(`\n            \u003c!doctype html\u003e\n            \u003chtml\u003e\n            \u003chead\u003e\n                \u003ctitle\u003eApp\u003c/title\u003e\n            \u003c/head\u003e\n            \u003cbody\u003e\n                \u003cdiv id=\"root\"\u003e\n                    ${renderToString(\u003cApp /\u003e)}\n                \u003c/div\u003e\n                \u003cscript src=\"/client.js\"\u003e\u003c/script\u003e\n            \u003c/body\u003e\n            \u003c/html\u003e\n        `);\n    };\n}\n```\n\n\u003e NOTE: The server bundle is itself middleware allowing you to mount it anywhere in an existing node server, e.g.\n\n```js\nconst express = require('express');\nconst serverRenderer = require('./dist/server');\nconst app = express();\n\napp.use(serverRenderer());\napp.listen(6060);\n```\n\nGiven 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.\n\nWebpack 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.\n\n## How?\n\nIt 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.\n\n### Usage\n\nWebpack Hot Server Middleware expects your Webpack config to export an [array of configurations](http://webpack.github.io/docs/configuration.html#multiple-configurations), one for your client bundle and one for your server bundle, e.g.\n\n```js\n// webpack.config.js\n\nmodule.exports = [\n    {\n        name: 'client',\n        target: 'web',\n        entry: './client.js'\n        ...\n    }, {\n        name: 'server',\n        target: 'node',\n        entry: './server.js'\n        ...\n    }\n];\n```\n\n\u003e NOTE: It's important both the 'client' and 'server' configs are given a name prefixed with 'client' and 'server' respectively.\n\nIt then needs to be mounted immediately after `webpack-dev-middleware`, e.g.\n\n```js\nconst express = require('express');\nconst webpack = require('webpack');\nconst webpackDevMiddleware = require('webpack-dev-middleware');\nconst webpackHotServerMiddleware = require('webpack-hot-server-middleware');\nconst config = require('./webpack.config.js');\nconst app = express();\n\nconst compiler = webpack(config);\n\napp.use(webpackDevMiddleware(compiler, {\n  serverSideRender: true\n}));\napp.use(webpackHotServerMiddleware(compiler));\n\napp.listen(6060);\n```\n\nNow whenever Webpack rebuilds, the new bundle will be used both client and *server* side.\n\n### API\n\n**webpackHotServerMiddleware** `(compiler: MultiCompiler, options?: Options) =\u003e void`\n\n#### Options\n\n**chunkName** `string`\nThe name of the server entry point, defaults to 'main'.\n\n**serverRendererOptions** `object`\nMixed in with `clientStats` \u0026 `serverStats` and passed to the `serverRenderer`.\n\n### Example\n\nA simple example can be found in the [example](example) directory and a more real world example can be seen in the [60fram.es boilerplate](https://github.com/60frames/react-boilerplate).\n\n### Usage with `webpack-hot-middleware`\n\n`webpack-hot-middleware` needs to be mounted *before* `webpack-hot-server-middleware` to ensure client hot module replacement requests are handled correctly, e.g.\n\n```js\nconst express = require('express');\nconst webpack = require('webpack');\nconst webpackDevMiddleware = require('webpack-dev-middleware');\nconst webpackHotMiddleware = require('webpack-hot-middleware');\nconst webpackHotServerMiddleware = require('webpack-hot-server-middleware');\nconst config = require('./webpack.config.js');\nconst app = express();\n\nconst compiler = webpack(config);\n\napp.use(webpackDevMiddleware(compiler, {\n  serverSideRender: true\n}));\n// NOTE: Only the client bundle needs to be passed to `webpack-hot-middleware`.\napp.use(webpackHotMiddleware(compiler.compilers.find(compiler =\u003e compiler.name === 'client')));\napp.use(webpackHotServerMiddleware(compiler));\n\napp.listen(6060);\n```\n\n### Production Setup\n\nA production setup might conditionally use [`express.static`](https://expressjs.com/en/starter/static-files.html) instead of `webpack-dev-server` and a pre-built server bundle instead of `webpack-hot-server-middleware`, e.g.\n\n```js\nconst express = require('express');\nconst path = require('path');\nconst app = express();\n\nif (process.env.NODE_ENV !== 'production') {\n    const webpack = require('webpack');\n    const webpackDevMiddleware = require('webpack-dev-middleware');\n    const webpackHotMiddleware = require('webpack-hot-middleware');\n    const webpackHotServerMiddleware = require('webpack-hot-server-middleware');\n    const config = require('./webpack.config.js');\n    const compiler = webpack(config);\n    app.use(webpackDevMiddleware(compiler, {\n      serverSideRender: true\n    }));\n    app.use(webpackHotMiddleware(compiler.compilers.find(compiler =\u003e compiler.name === 'client')));\n    app.use(webpackHotServerMiddleware(compiler));\n} else {\n    const CLIENT_ASSETS_DIR = path.join(__dirname, '../build/client');\n    const CLIENT_STATS_PATH = path.join(CLIENT_ASSETS_DIR, 'stats.json');\n    const SERVER_RENDERER_PATH = path.join(__dirname, '../build/server.js');\n    const serverRenderer = require(SERVER_RENDERER_PATH);\n    const stats = require(CLIENT_STATS_PATH);\n    app.use(express.static(CLIENT_ASSETS_DIR));\n    app.use(serverRenderer(stats));\n}\n\napp.listen(6060);\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F60frames%2Fwebpack-hot-server-middleware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F60frames%2Fwebpack-hot-server-middleware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F60frames%2Fwebpack-hot-server-middleware/lists"}