Create-react-app: Proxy Setting via Environment Variables?

[vegtelenseg]

I have a question.

Instead of providing proxy information via the package.json, is it possible to achieve exactly the same thing by providing this information directly into environment variables?

[gaearon]

I think this idea has been floated before. I'm not strictly opposed to it but the proxy functionality is getting a bit complicated so I think we should revisit this after simplifying the “advanced” configuration case: https://github.com/facebookincubator/create-react-app/issues/3366.

[vegtelenseg]

Alright, I see. Cool.

[peterj]

@vegtelenseg the way I worked around it is that I've set my production proxy in package.json and then in start.js (assuming you ejected the scripts), I did this:

   const proxySetting =
            process.env.DEV_PROXY || require(paths.appPackageJson).proxy;

Finally, I have a script called local in my package.json that sets the DEV_PROXY=something and runs the start script.

[slorber]

+1 for this.

My usecase is 2 distinct commands like:

"start-staging": "PROXY=https://staging.domain.com",
"start-preprod": "PROXY=https://preprod.domain.com",

[bakasmarius]

@gaearon I see #3366 is already closed, any updates on this?
I currently have two .env files that include only one parameter REACT_APP_APP_BACKEND_BASEURL - one for development and another one for production. I'm just not sure is there a way to use this variable inside package.json or should I simply remove proxy line and use REACT_APP_APP_BACKEND_BASEURL in my components?

[bakasmarius]

For anyone else searching for an answer, it turns out the proxy parameter in package.json is only useful in development mode. If you consider building the project and hosting it on a production server, I suggest to remove the proxy parameter and use .env files with development/production BASE URLs for calls to the backend.

[trungpham]

I created this pull request https://github.com/facebook/create-react-app/pull/5720.
You should be able to simply run PROXY=http://wherever.com:80 yarn start to override the proxy setting at run time. Or stick PROXY=http://wherever.com:80 in your .env file.

[Timer]

This is no longer necessary now that you can configure your own proxy and use any environment variable you wish.

[ghost]

This is no longer necessary now that you can configure your own proxy and use any environment variable you wish.

Do you show us sample code?

[ghost]

For anyone else searching for an answer, it turns out the proxy parameter in package.json is only useful in development mode. If you consider building the project and hosting it on a production server, I suggest to remove the proxy parameter and use .env files with development/production BASE URLs for calls to the backend.

Also here, do you show us sample code how you define and use dev/prod base urls?

[Timer]

I suggest you file a question on Stack Overflow, you can link it here!

[Keksike]

I created this pull request #5720.
You should be able to simply run PROXY=http://wherever.com:80 yarn start to override the proxy setting at run time. Or stick PROXY=http://wherever.com:80 in your .env file.

This doesn't seem to work with current version of CRA.

[ksmithut]

I was able to get this to work with a custom src/setupProxy.js file with the following contents:

const proxy = require('http-proxy-middleware')
const pkg = require('../package.json')
const target = process.env.PROXY || pkg.proxy

module.exports = app =>
  target &&
  app.use((req, res, next) =>
    req.accepts('text/html') ? next() : proxy({ target })(req, res, next)
  )