express-proxy-mock v2.4.0
express-proxy-mock
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:
- Proxy requests and MOCK data
- Visual management of MOCK data and proxy functions
- Proxy support for global proxy and custom proxy for a specific URL
- Switch between proxy forwarding or MOCK data for a specific URL at any time
- Return different MOCK data based on different parameters
- Quickly save the data returned by the most recent request as MOCK data
Getting Started
First, install the module:
npm install express-proxy-mock --save-dev
Usage
webpack.config.js
module.exports = {
//...
devServer: {
setupMiddlewares(middlewares, devServer) {
devServer.app.use(proxyMockMiddleware({
apiRule: '/api/*',
lang: 'en'
}))
return middlewares
}
},
};
express
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.
Options
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' |
Other Servers
Here are examples of usage with other servers.
Webpack >= 5.0
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'
})
]
};
Webpack <= 4+
// 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
// 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'
})
]
})
vue.config.js
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
]
};
Environment Variables
The proxy supports environment variables management, which allows you to:
- Create multiple environment configurations
- Bind environment variables to specific proxies
- Quick switch between different environments
- Auto clear browser cache when switching environments
Enabling Environment Variables
To enable the environment variables feature, you need to:
- Use webpack with DefinePlugin
- Add the WebpackProxyMockPlugin to your webpack configuration
How to use environment variables
- Click the "+" button next to the environment selector to create a new environment
- Add key-value pairs in the environment configuration
- You can bind an environment to a proxy in the proxy settings
- When switching environments, the system will prompt whether to clear the browser cache
Features
- Binding: A proxy can be bound to a specific environment
- Quick Switch: Easy switching between different environments
- Cache Management: Option to clear browser cache when switching environments
- Visual Management: Visual interface for managing environment variables
Public Access with Ngrok
This middleware supports public access to your local development server using Ngrok. This feature allows you to:
- Share your local development environment with external users
- Test your application on different devices
- Demo your development work to clients
Setting up Public Access
- Open the configuration page at
http://localhost:3000/config
- Click the settings icon in the top right corner
- Register for a free Ngrok account at https://dashboard.ngrok.com/signup
- Copy your Ngrok authtoken from the dashboard
- Paste the authtoken in the settings modal
- Click "Enable Public Access"
Features
- Automatic tunnel creation
- Secure HTTPS endpoints
- Persistent authtoken storage
- Easy URL sharing with copy functionality
- Quick tunnel recreation with reset button
Notes
- The Ngrok free tier has some limitations
- Public URLs change each time you create a new tunnel
- For consistent URLs, consider upgrading to a paid Ngrok plan
Contact Me
QQ Group: 930832439
License
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago