change proxy configuration targets dynamically in angular

Question

In my angular application, I am using proxy configuration file consisting of some proxies. My file looks like this.

proxy.conf.json

{
  "/login": {
    "target": "http://w3:8080",
    "changeOrigin":true,
    "secure": false
  },   
  "/api/usersvcs/*": {
    "target": "http://w3:8080",
    "pathRewrite": {"^/api/usersvcs": ""},
    "secure": false,
    "logLevel":"debug"
  },
  "/api/ordersvcs/*": {
    "target": "http://w3:8989",
    "pathRewrite": {"^/api/ordersvcs": ""},
    "changeOrigin":true,
    "secure": false,
    "logLevel":"debug"
  },
  "/api/paymentsvcs/*": {
    "target": "http://w3:9898",
    "pathRewrite": {"^/api/paymentsvcs": ""},
    "changeOrigin":true,
    "secure": false,
    "logLevel":"debug"
  },
}

This file is in root directory of my project (outside src folder). Every time I need to change target parameter if I want to work with some other back end services hosted on different ports. In the above file, I am working with w3 , and then the port numbers after colon. If I want to work with w5, I have to change the entire path targets like this.

{
  "/login": {
    "target": "http://w5:8080",
    "changeOrigin":true,
    "secure": false
  },   
  "/api/usersvcs/*": {
    "target": "http://w5:8080",
    "pathRewrite": {"^/api/usersvcs": ""},
    "secure": false,
    "logLevel":"debug"
  },
  "/api/ordersvcs/*": {
    "target": "http://w5:8989",
    "pathRewrite": {"^/api/ordersvcs": ""},
    "changeOrigin":true,
    "secure": false,
    "logLevel":"debug"
  },
  "/api/paymentsvcs/*": {
    "target": "http://w5:9898",
    "pathRewrite": {"^/api/paymentsvcs": ""},
    "changeOrigin":true,
    "secure": false,
    "logLevel":"debug"
  },
}

I am using npm start command in which I have included proxy.conf.json file which looks like below in package.json

"scripts":{
   ...
   "start": "ng serve --proxy-config proxy.conf.json --o",
   ...
},

Is it possible to change the target hostnames something like if I use

npm start w5

then the proxy file should be like one above with the targets having w5.

Answer 1

We achieved this functionality through Environment variables like this:

proxy.conf.js:

var process = require("process");
var api_target = process.env.API_TARGET;
console.log('Proxy configuration: ' + api_target);
const PROXY_CONFIG = {
  "/api/*": {
    target: `http://${api_target}`,
    secure: false,
    changeOrigin: true,
    pathRewrite: {"^/api" : ""}
  }
}
module.exports = PROXY_CONFIG;

package.json:

 "start-dev01": "cross-env API_TARGET=sfslmkwpsdev01/api npm start",