Gathering detailed insights and metrics for webpack-isomorphic-dev-middleware
Gathering detailed insights and metrics for webpack-isomorphic-dev-middleware
Gathering detailed insights and metrics for webpack-isomorphic-dev-middleware
Gathering detailed insights and metrics for webpack-isomorphic-dev-middleware
The webpack-dev-middleware, but for isomorphic applications
npm install webpack-isomorphic-dev-middleware
Typescript
Module System
Node Version
NPM Version
JavaScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
39 Stars
161 Commits
6 Forks
10 Watchers
6 Branches
5 Contributors
Updated on Feb 16, 2023
Latest Version
4.1.0
Package Id
webpack-isomorphic-dev-middleware@4.1.0
Size
9.73 kB
NPM Version
6.1.0
Node Version
10.7.0
Published on
Jul 26, 2018
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
14
The webpack-dev-middleware, but for isomorphic applications.
$ npm install webpack-isomorphic-dev-middleware --save-dev
The current version works with webpack v2, v3 and v4.
You might get a peer dependency warning when using webpack v2 or v3 but you may ignore it.
Building applications powered by webpack with server-side rendering (isomorphic/universal apps) is hard.
When making a production build, you must compile both the client and server. When developing, we want to rebuild the client & server and bring in the new compiled code without restarting/reloading the application. This is complex, especially setting up the development server.
To make your development workflow easier to setup, webpack-isomorphic-dev-middleware
offers an express middleware that:
isomorphic
to res.locals, which includes the webpack stats and the methods exported in your server file1const express = require('express'); 2const webpack = require('webpack'); 3const webpackIsomorphicDevMiddleware = require('webpack-isomorphic-dev-middleware'); 4const webpackHotMiddleware = require('webpack-hot-middleware'); 5 6const clientCompiler = webpack({ /* webpack client config */ }); 7const serverCompiler = webpack({ /* webpack server config */ }); 8const app = express(); 9 10// Serve any static files from the public folder 11app.use('/', express.static('public', { maxAge: 0, etag: false })); 12// Add the middleware that will wait for both client and server compilations to be ready 13app.use(webpackIsomorphicDevMiddleware(clientCompiler, serverCompiler)); 14// You may also add webpack-hot-middleware to provide hot module replacement to the client 15app.use(webpackHotMiddleware(clientCompiler, { quiet: true })); 16 17// Catch all route to attempt to render our isomorphic app 18app.get('*', (req, res, next) => { 19 // res.isomorphic contains `compilation` & `exports` properties: 20 // - `compilation` contains the webpack-isomorphic-compiler compilation result 21 // - `exports` contains the server exports, usually one or more render functions 22 const { render } = res.locals.isomorphic.exports; 23 24 render({ req, res }) 25 .catch((err) => setImmediate(() => next(err))); 26});
The middleware function is flexible and supports various signatures:
1const clientCompiler = webpack({ /* webpack client config */ }); 2const serverCompiler = webpack({ /* webpack server config */ }); 3 4app.use(webpackIsomorphicDevMiddleware(clientCompiler, serverCompiler, { /* options */ }));
1const compiler = webpack([ 2 /* webpack client config */, 3 /* webpack server config */, 4]); 5 6app.use(webpackIsomorphicDevMiddleware(compiler, { /* options */ }));
1const isomorphicCompiler = webpackIsomorphicCompiler(
2 /* webpack client config */,
3 /* webpack server config */
4);
5
6app.use(webpackIsomorphicDevMiddleware(isomorphicCompiler, { /* options */ }));
Available options:
Name | Description | Type | Default |
---|---|---|---|
memoryFs | Either disable or enable in-memory filesystem (disabling decreases performance) | boolean | true |
watchOptions | Options to pass to webpack's watch | object | |
watchDelay | Delay calling webpack's watch for the given milliseconds | number | 0 |
report | Enables reporting | boolean/object | { stats: 'once' } |
notify | Report build status through OS notifications | boolean/object | false |
headers | Headers to be sent when serving compiled files | object | { 'Cache-Control': 'max-age=0, must-revalidate' } |
findServerAssetName | Finds the server asset to require from the Webpack stats | function | first js asset from the first entrypoint |
By default, findServerAsset
selects the first JavaScript asset from first entrypoint. If that doesn't suit your Webpack configuration, you may change it:
1{ 2 // Finds the asset with the `server` word in its name 3 findServerAssetName: (stats) => stats.assets 4 .map((asset) => asset.name) 5 .find((name) => /\bserver\b.+\.js$/.test(name)); 6}
$ npm test
$ npm test -- --watch
during development
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 2/23 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
100 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More