shunseven / express-proxy-mock

This is an express middleware that can be used with webpack and vite. Its main function is to visualize the configuration, manage http(s)-proxy, and mock data.
https://shunseven.gitbook.io/express-proxy-mock/
MIT License
9 stars 4 forks source link
api-mock-server development express express-middleware http-proxy http-proxy-middleware https-proxy mock mock-server proxy proxy-server visualization-tools vite vite-mock vite-mock-server vite-plugin vite-plugin-mock-dev-server webpack webpack-mock-server webpack-proxy

express-proxy-mock

Description

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:

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 number zh lang (en,zh)

Other Servers

Here are examples of usage with other servers.

Webpack >= 5.0

Modify the config file, such as vue.config.js

// vue.config.js or other webpack config files
const { proxyMockMiddleware } = require('express-proxy-mock')

module.exports = {
  //...
  devServer: {
     setupMiddlewares(middlewares, devServer) {
        devServer.app.use(proxyMockMiddleware({
          apiRule: '/api/*',
          lang: 'en'
        }))
        return middlewares
    }
  }
};

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

Create a server.js file in the root directory, and change the value of dev under scripts in package.json to "node server.js"

import express from 'express';
import { createServer as createViteServer } from 'vite';
const { proxyMockMiddleware } = require('express-proxy-mock')

async function createServer() {
  const app = express();

  // Create Vite server
  const vite = await createViteServer({
    server: {
      middlewareMode: 'ssr',
      hmr: {
        // Configure HMR options, such as specifying the WebSocket server port
        port: 8838
      }
    }
  });

  // Introduce our proxy tool
  app.use(proxyMockMiddleware({
    apiRule: '/api/*',
    lang: 'en'
  }))

  // Use Vite's Connect instance as middleware
  app.use(vite.middlewares);

  app.listen(8800, () => {
    console.log('Server is running at http://localhost:8800');
  });
}

createServer();

Contact Me

QQ Group: 930832439

License

MIT