Registry / web-framework / watchify-middleware

watchify-middleware

JSON →
library1.9.1jsnpmunverified

watchify-middleware is a lightweight HTTP middleware designed to enhance the development experience when working with Watchify and Browserify. It prevents stale or empty bundles from being served by suspending the server response until the bundle is ready. The middleware, currently at version 1.9.1 (last published in 2017), differentiates itself by removing the default 600ms rebuild delay common in Watchify, offering immediate feedback, and providing an optional browser-based error handler. It exposes timing information via a 'log' event and facilitates seamless integration into Node.js HTTP servers or frameworks like Express, making it ideal for rapid iteration cycles during web development. Its release cadence has been infrequent, with no major updates since its last stable release, positioning it as a mature, maintenance-mode utility.

web-frameworkhttp-networkingdevops
npm install watchify-middleware
github ↗package ↗
INSTALL
IMPORT
SIG · WATCHIFY-MIDDLEWAR
W
watchify-middleware
web-frameworkjavascriptv1.9.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

watchifyMiddleware
✓ const watchifyMiddleware = require('watchify-middleware')
✗ import watchifyMiddleware from 'watchify-middleware'
This package is primarily designed for CommonJS environments due to its age and Node.js server context. Direct ESM `import` might require bundler configuration or be incompatible with older Node.js versions.
watchifyMiddleware.emitter
✓ const emitter = watchifyMiddleware.emitter(bundler, opt)
✗ import { emitter } from 'watchify-middleware'
The `emitter` API is exposed as a static method on the main `require()`d object, providing an event-driven interface for monitoring bundle updates and logs instead of directly handling requests and responses.
middleware
✓ const middleware = watchifyMiddleware(bundler)
✗ const middleware = new watchifyMiddleware(bundler)
The primary export is a function that returns another function (the middleware itself), not a class constructor. Do not use `new`.

This quickstart sets up a basic HTTP server that serves an HTML page with a 'bundle.js' script. The script is generated by Browserify and hot-reloaded by watchify-middleware, demonstrating how to integrate the middleware to serve continuously updated JavaScript bundles.

const http = require('http'); const browserify = require('browserify'); const watchifyMiddleware = require('watchify-middleware'); const defaultIndex = require('simple-html-index'); const staticUrl = 'bundle.js'; const appEntry = 'app.js'; // Create a dummy app.js for demonstration require('fs').writeFileSync(appEntry, 'console.log("Hello from app.js!");'); const bundler = browserify(appEntry, { cache: {}, packageCache: {}, basedir: __dirname, plugin: [require('watchify')] // Crucial for watchify integration }); const watchifyInstance = watchifyMiddleware(bundler, { errorHandler: true // Use default browser error handler }); const server = http.createServer(function (req, res) { if (req.url === '/') { defaultIndex({ entry: staticUrl }).pipe(res); } else if (req.url === '/' + staticUrl) { watchifyInstance(req, res); } else { res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('Not Found'); } }); server.listen(8000, 'localhost', function () { console.log('Watching and serving http://localhost:8000/'); console.log(`Try changing ${appEntry} and refreshing the browser.`); });
Debug
Known issues
breakingwatchify-middleware explicitly removes the default 600ms debounce delay often present in standard Watchify setups. This means rebuilds will occur immediately upon file changes, which can be a change in behavior if you were relying on that delay.
fix
If a delay is desired (e.g., for large projects or frequent, rapid file changes), reintroduce it via the `delay` option: `watchifyMiddleware(bundler, { delay: 600 })`.
affects: >=1.0.0
gotchaThe `errorHandler` option significantly alters how bundle errors are handled. If `errorHandler` is `true` (defaulting to a browser-console error display) or a custom function, the 'error' event on the emitter will *not* be triggered. Errors will be handled internally by the middleware or your custom function.
fix
To receive 'error' events, ensure `errorHandler` is `false`. If using a custom `errorHandler` function, handle logging or side effects within that function. Be mindful that using `errorHandler: true` will inject client-side `console.error` calls into your bundle.
affects: >=1.0.0
gotchaFor watchify-middleware to function correctly and efficiently with incremental rebuilds, the underlying Browserify instance *must* be configured with `cache: {}`, `packageCache: {}`, and the `watchify` plugin. Omitting these will result in full rebuilds on every change, negating the performance benefits.
fix
When creating your Browserify instance, always include `{ cache: {}, packageCache: {}, plugin: [require('watchify')] }` in its options, along with `basedir` for proper resolution.
affects: >=1.0.0
gotchawatchify-middleware suspends the HTTP response until a fresh bundle is ready. While this prevents serving stale bundles, it means that requests for the bundle URL will appear to 'hang' or take longer during active rebuilds, which might be unexpected behavior for some server monitoring tools or developers.
fix
This is intended behavior. Communicate this characteristic to developers. Ensure your client-side code is robust enough to handle potentially longer response times for the bundle. The 'log' events can be used to monitor rebuild status on the server.
affects: >=1.0.0
Errors
Common errors & fixes
Error: Cannot find module 'app.js'
The Browserify bundler cannot locate the entry point file specified.
fix
Ensure that the `app.js` (or your entry file) exists at the path relative to `basedir` provided to Browserify, or specify the full absolute path.
Error: listen EADDRINUSE: address already in use :::8000
The server attempted to listen on a port that is already occupied by another process.
fix
Either stop the process currently using port 8000 (e.g., kill any lingering Node.js processes) or configure your server to listen on a different, available port.
Bundle is not updating in the browser after file changes, or updates are very slow.
The Browserify instance is likely missing the `cache`, `packageCache` options, or the `watchify` plugin, preventing incremental builds.
fix
Ensure your `browserify` configuration includes `{ cache: {}, packageCache: {}, plugin: [require('watchify')] }`.
My server is hanging or not responding when I request the bundle URL.
This is often expected behavior if `watchify` is currently rebuilding the bundle. The middleware suspends the response until the bundle is ready.
fix
Check the server console for 'log' events from watchify-middleware, indicating if a rebuild is in progress. If the server hangs indefinitely, ensure there are no errors in your `browserify` setup or your application code that are preventing a successful bundle completion.
Upgrade
Version history
1.9.1latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
14 hits · last 30 days
node
10
Amazon
1
OpenAI (training)
1
Resources
githubhttps://github.com/mattdesl/watchify-middleware ↗
packagehttps://www.npmjs.com/package/watchify-middleware ↗
watchify-middleware — npm install watchify-middleware · libregistry