express-proxy-mock

• 中文
• English

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:

1. Use webpack with DefinePlugin
2. Add the WebpackProxyMockPlugin to your webpack configuration

How to use environment variables

1. Click the "+" button next to the environment selector to create a new environment
2. Add key-value pairs in the environment configuration
3. You can bind an environment to a proxy in the proxy settings
4. 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

1. Open the configuration page at http://localhost:3000/config
2. Click the settings icon in the top right corner
3. Register for a free Ngrok account at https://dashboard.ngrok.com/signup
4. Copy your Ngrok authtoken from the dashboard
5. Paste the authtoken in the settings modal
6. 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

MIT