npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

express-proxy-mock

v2.2.0

Published

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.

Downloads

500

Readme

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:

  • 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.

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

Webpack Configuration Example

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

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
  ]
};

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

Example

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