How to set up multiple proxies hot reload correctly?

Question

I saw proxy-hot-reload example. This example shows how to hot reload the proxy configuration.

I have multiple proxy configurations:

config/proxy.js:

module.exports = {
  "/api/cool": {
    target: "http://jsonplaceholder.typicode.com",
    changeOrigin: true,
    logLevel: 'debug',
    pathRewrite: {
      "^/api/cool": "",
    },
  },
  "/api/nice": {
    target: "http://jsonplaceholder.typicode.com",
    changeOrigin: true,
    logLevel: 'debug',
    pathRewrite: {
      "^/api/nice": "",
    },
  },
};

webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const fs = require("fs");

let proxyOptions = require("./config/proxy");

fs.watch("./config/proxy.js", () => {
  delete require.cache[require.resolve("./config/proxy")];
  try {
    proxyOptions = require("./config/proxy");
    console.info("Proxy reload success");
  } catch (error) {
    console.error("Proxy reload failed. Error:", error);
  }
});

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  mode: "development",
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 9000,
    // not working
    // proxy: [() => proxyOptions],

    // not working
    // proxy: [
    //   () =>
    //     Object.keys(proxyOptions).map((context) => ({
    //       context,
    //       ...proxyOptions[context],
    //     })),
    // ],

    // works
    proxy: Object.keys(proxyOptions).map((context) => () => ({
      context,
      ...proxyOptions[context],
    })),
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

Only the third way works, when send HTTP request through these proxies, webpack dev server will print duplicated HPM logs:

[HPM] Proxy created: /api/cool  -> http://jsonplaceholder.typicode.com
[HPM] Proxy rewrite rule created: "^/api/cool" ~> ""
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
[HPM] Rewriting path from "/api/cool/users/1" to "/users/1"
[HPM] GET /api/cool/users/1 ~> http://jsonplaceholder.typicode.com
[HPM] Proxy created: /api/cool  -> http://jsonplaceholder.typicode.com
[HPM] Proxy rewrite rule created: "^/api/cool" ~> ""
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
[HPM] Proxy created: /api/nice  -> http://jsonplaceholder.typicode.com
[HPM] Proxy rewrite rule created: "^/api/nice" ~> ""
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
[HPM] Rewriting path from "/api/nice/users/2" to "/users/2"
[HPM] GET /api/nice/users/2 ~> http://jsonplaceholder.typicode.com

As you can see, the [HPM] Proxy created: /api/cool -> http://jsonplaceholder.typicode.com log is repeated twice. The /api/nice is also the same.

Besides, when I use control + c to shut down the webpack dev server. The HPM logs are also repeated several times.

^C<i> [webpack-dev-server] Gracefully shutting down. To force exit, press ^C again. Please wait...
[HPM] server close signal received: closing proxy server
[HPM] server close signal received: closing proxy server
[HPM] server close signal received: closing proxy server

How to set up multiple proxies hot reload correctly?

0 Answers0