Proxy-switch-plugin NPM

proxy-switch-plugin

Base on webpack-dev-server.Decorating webpack-dev-server to switch proxy without restart server.You could use it on the server which base on webpack-dev-server in theory。

Getting Started

// npm
npm i proxy-switch-plugin -D

//yarn
yarn add proxy-switch-plugin -D

Usage

Config

In webpack：

const ProxySwitchPlugin = require("proxy-switch-plugin");
module.exports = {
  // ...
  plugins: [
    new ProxySwitchPlugin({
      // write down all you proxy config
      proxyList: {
        peter: {
          "/api": {
            target: "http://localhost:3000",
            pathRewrite: {
              "/api": "/",
            },
          },
        },
        park: {
          "/api": {
            target: "http://localhost:3001",
            pathRewrite: {
              "/api": "/",
            },
          },
        },
      },
      // the default proxy config key
      defaultProxy: "park",
      // watch config change
      watchPath: path.join(__dirname, "webpack.config.js"),
    }),
  ],
  // ...
};

In chainWebpack：

const ProxySwitchPlugin = require("proxy-switch-plugin");
module.exports = {
  // ...
  chainWebpack: (config) => {
    config.plugin("proxy-switch-plugin").use(ProxySwitchPlugin, [
      {
        // write down all you proxy config
        proxyList: {
          peter: {
            "/api": {
              target: "http://localhost:3000",
              pathRewrite: {
                "/api": "/",
              },
            },
          },
          park: {
            "/api": {
              target: "http://localhost:3001",
              pathRewrite: {
                "/api": "/",
              },
            },
          },
        },
        // the default proxy config key
        defaultProxy: "park",
        // watch config change
        watchPath: path.join(__dirname, "vue.config.js"),
      },
    ]);
  },
  // ...
};

Note: You should not config webpack.devServer.proxy after you use this plugin. And you should config the proxy like the example do which is the classic format in webpack. If you use other format, the plugin dosen't promise to work.

Proxy Switch

The plugin provide a default select component. For example, you could use it like this in React:

import ProxySelect from "proxy-switch-plugin/src/ProxySelect";
import "proxy-switch-plugin/src/ProxySelect.css";

function Index() {
  useEffect(() => {
    document.querySelector(".container").appendChild(ProxySelect);
  }, []);

  return <div className="container"></div>;
}

Put the select component on the place properly. Switch the proxy by select different proxy key in the select component.

Of course, the default select component is written by html select component. The style may not satisfy you. But you could do this work youself. The plugin provide two interface to help switch proxy:

get proxy list

url: /proxy/list
method: GET
res: {list: string[]}

switch proxy

url: /proxy/change
params: {proxy: string}
method: GET

Config Hot Update(Experimental)

By delivering the webpack config file path from the watchPath option, we could update our proxy config without restarting the server and just a fast refresh of the page.