Create-react-app: Accept HTTP_PROXY to specify a fallback server during development

[laginha]

Like proxy in package.json could react-script start also accept the HTTP_PROXY or HTTPS_PROXY environment variables to specify a fallback server during development?

It would be as easy as adding a few lines of code

var proxy = require(paths.appPackageJson).proxy
if (!proxy) {
  proxy = process.env.HTTPS ? process.env.HTTPS_PROXY : process.env.HTTP_PROXY
}

This is useful in situations like mine where some team members don't use dockers and others do, resulting in different proxy urls.

I'm available to create a PR if you deem this acceptable.

[laginha]

Alternatively, so HTTP_PROXY or HTTPS_PROXY has priority over the proxy key on package.json:

var proxy = process.env.HTTPS ? process.env.HTTPS_PROXY : process.env.HTTP_PROXY;
proxy = proxy || require(paths.appPackageJson).proxy

It would actually be better for my situation, but I'm not sure if it makes sense...

Also HTTP_PROXY will interfere with npm outgoing requests, like when installing packages. This can be avoided using the --no-proxy flag.

[roman-holovin]

Also interested in this. For same reason, proxy setting defined in the package.json is static, where environment variable can be provided/adjusted in runtime. This will provide ability to create more flexible dev/prod deployment strategies without any significant drawbacks.

[john-matroid]

👍 also interested for similar reasons

[john-matroid]

As a workaround, I'm dynamically setting the proxy value in my package.json from an environment variable with a prestart script, but the solution @laginha outlined above would be preferable.

[agriffis]

If implemented, this should use different naming from HTTP_PROXY and HTTPS_PROXY which are already meaningful in command-line environments; they commonly refer to a proxy that should be used for all requests by command-line HTTP clients.

[saberone]

@john-matroid How did you set the proxy variable in the prestart script?

[kaiyzen]

Big +1 for this, static proxy package.json makes for annoying process sharing across devs that mostly use remove dev machines that are on different hosts/ips. Our current hack similar to @laginha suggestion was to change the line in start script:

```
// Load proxy config
const proxySetting = process.env.PROXY_HOST || require(paths.appPackageJson).proxy;
````

[hobi-mc]

@john-matroid I'm also interested in your approach of setting the "proxy" value in the package.json dynamically since I was not able to modify it from a pre-executed script or read it from an environment variable. Could you please outline your solution?

[john-matroid]

@saberone @hobi-mc I use better-npm-run to run a prestart script:

package.json:

"scripts": {
  "prestart": "better-npm-run prestart",
},
"betterScripts": {
  "prestart": "node ./scripts/configure_proxy.js"
},

In configure_proxy.js I rewrite my package.json, dynamically setting the proxy:

const fs = require('fs');

fs.readFile('./package.json', 'utf8', function(err, data) {
  if (err) return console.log(`Error with configure script: ${err}`);

  // parse current package.json into an object
  let parsedData = JSON.parse(data);

  // get the proxy from the environment variable
  let proxy = process.env.REACT_APP_PROXY || 'https://mysite.com';

  parsedData.proxy = proxy;

  // for package.json formatting
  const spacing = 2;
  let dataString = JSON.stringify(parsedData, null, spacing);

  // overwrite the current package.json
  fs.writeFile('./package.json', dataString, err => {
    if (err) console.error(`Error writing file: ${err}`);
  });
});

I would love a cleaner solution / fix here

[hobi-mc]

@john-matroid Thanks for sharing! I would also appreciate a clean solution for this topic since manipulating the package.json results in VCS changes not intended.

[samuelmartineau]

Hi @hobi-mc,
We had implemented a "cleaner" solution here if you want to give it a try before waiting for an official feature.

We use proxy feature from CRA to a fixed url in the _package.json_

"proxy": "http://localhost:4000",

At the same time we run a node express server on port 4000 which proxify (again...) a dynamic URL from env with _http-proxy-middleware_ .

const app = express();
app.use(
    '/api',
    proxy({
      target: process.env.MOCKING_URL,
      changeOrigin: true,
      secure: false,
      ws: true,
      xfwd: true,
    })
  );

So we just have to set MOCKING_URL env and run this server before react-scripts

Far from perfect, but cleaner for us. Hope it can help.

[hobi-mc]

@samuelmartineau Thanks! I agree, this approach is cleaner. I'll give it a try.

[GameKyuubi]

I am shocked and appalled that HTTPS_PROXY isn't honored by react-scripts :-1:

[gaearon]

I feel like our proxy setup is already pretty complicated and don't want to complicate it further.
IMO the workaround in https://github.com/facebookincubator/create-react-app/issues/1640#issuecomment-328475314 is reasonable, and I suggest using that approach.