
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
express-proxy-mock
Advanced tools
This is an express middleware that can be used with webpack and vite. Its main function is to visualize the configuration, manage proxies, and mock data.
Middleware for express, mainly used for proxy requests and MOCK data. It can be used for all development projects that start services with webpack, vite, and other express-based servers. This middleware should only be used for development.
Some benefits of using this middleware include:
First, install the module:
npm install express-proxy-mock --save-dev
module.exports = {
//...
devServer: {
setupMiddlewares(middlewares, devServer) {
devServer.app.use(proxyMockMiddleware({
apiRule: '/api/*',
lang: 'en'
}))
return middlewares
}
},
};
const { proxyMockMiddleware } = require("express-proxy-mock");
const express = require("express");
const app = express();
app.use(
proxyMockMiddleware({
// express-proxy-mock options
}),
);
app.listen(3000, () => console.log("Example app listening on port 3000!"));
Open the browser at http://localhost:3000/config to see the configuration interface for proxy and MOCK data.
Refer to below for usage examples with vite, webpack, and vueConfig.
Name | Type | Default | Description |
---|---|---|---|
apiRule | string | /api/* | Global proxy matching rule, default is all requests starting with api |
https | boolean | true | Whether to proxy https requests. |
configPath | string | /config | Address to open the configuration page, default is http://localhost:3000/config |
cacheRequestHistoryMaxLen | number | 30 | Maximum number of cached request data |
lang | string | zh | lang (en,zh) |
buttonPosition | 'top' | 'middle' | 'bottom' | string | bottom | Position of the configuration button (Only works in Vite). You can use 'top', 'middle', 'bottom' or coordinate string like '100,100' |
Here are examples of usage with other servers.
Modify webpack.config.js
module.exports = {
//...
devServer: {
...
},
plugins: [
// In webpack, the plugin will get the devServer and inject the proxy, so no need to configure devServer separately
new WebpackProxyMockPlugin({
apiRule: '/api/*',
lang: 'zh'
})
]
};
// vue.config.js or other webpack config files
const { proxyMockMiddleware } = require('express-proxy-mock')
module.exports = {
//...
devServer: {
before(app) {
app.use(proxyMockMiddleware({
apiRule: '/api/*',
lang: 'en'
}))
}
}
};
// vite.config.js
import { defineConfig } from 'vite'
import { ViteProxyMockPlugin } from 'express-proxy-mock'
export default defineConfig({
plugins: [
ViteProxyMockPlugin({
apiRule: '/api/*',
lang: 'en',
buttonPosition: 'bottom', // Optional: 'top', 'middle', 'bottom' or coordinate like '100,100'
})
]
})
const proxyMockPlugin = new WebpackProxyMockPlugin({
apiRule: '/api/*',
lang: 'zh'
})
module.exports = {
//...
devServer: {
setupMiddlewares: (middlewares, devServer) => {
// In vue config, because vue-cli injects devServer after webpack compilation is complete, the plugin cannot get the devServer configuration, so you need to manually inject the proxy middleware
proxyMockPlugin.setupDevServer(devServer.app);
return middlewares;
}
},
plugins: [
proxyMockPlugin
]
};
The proxy supports environment variables management, which allows you to:
To enable the environment variables feature, you need to:
This middleware supports public access to your local development server using Ngrok. This feature allows you to:
http://localhost:3000/config
QQ Group: 930832439
FAQs
This is an express middleware that can be used with webpack and vite. Its main function is to visualize the configuration, manage proxies, and mock data.
The npm package express-proxy-mock receives a total of 61 weekly downloads. As such, express-proxy-mock popularity was classified as not popular.
We found that express-proxy-mock demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.