Conditionally setup proxy based on environment variable

[raquelhortab]

I am using create-react-app and I'm trying to setup the proxy only if my custom environment variable $ENVIRONMENT_MODE is "production".
I've got this code

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
    if(process.env.ENVIRONMENT_MODE === 'production'){ // it works without this condition
        app.use(
            '/static',
            createProxyMiddleware({
                target: 'http://localhost:3000',
                pathRewrite:{
                    '/static':`${process.env.PUBLIC_URL}/static`
                }
            })
        );
    }

I see the environment variables are correctly detected in the setupProxy.js because the proxy works correctly without the if statement (PUBLIC_URL is detected correctly).

However, if I set ENVIRONMENT_MODE=production and add the if statement to this configuration, the proxy doesn't work anymore.

I have also tried putting the conditional in the outer scope (wrapping up all the code) without success.

[chimurai]

Hi. I'm not a create-react-app user. Not sure why you are having issues.

As alternative you can try the next('route') from express. (https://expressjs.com/en/guide/using-middleware.html)
Basically you can chain middlewares and decide to skip:

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  // it works without this condition
  app.use(
    "/static",
    continueWhen(process.env.ENVIRONMENT_MODE === 'production'),
    createProxyMiddleware({
      target: "http://localhost:3000",
      pathRewrite: {
        "/static": `${process.env.PUBLIC_URL}/static`,
      },
    })
  );
};

function continueWhen(condition) {
  return (req, res, next) => {
    if (condition) {
      next(); // pass control to the next middleware function in this stack
    } else {
      next("route"); // otherwise skip to the next router
    }
  };
}

[raquelhortab]

Hi, (correct me if I'm wrong) I don't think create-react-app uses express. I guess It could be an option if I can't find anything else though. Thanks for the reply :)

[chimurai]

From what I see; create-react-app still uses express as transitive dependency:

create-react-app > webpack-dev-server > express

https://github.com/facebook/create-react-app/blob/3880ba6cfd98d9f2843217fd9061e385274b452f/packages/react-scripts/package.json#L74

https://github.com/webpack/webpack-dev-server/blob/86b8ffb2ebb866eee560405f1cdc8079f663efb8/package.json#L51

[raquelhortab]

As suspected, it wasn't a problem with CRA but it wasn't a problem with the proxy either. The environment variable was not available, I had to set it right before npm start:

ENVIRONMENT_MODE=$ENVIRONMENT_MODE npm start