react-scripts dev server: Support PROXY env var for overridable "proxy"

[unclechu]

Usage example:

PROXY=https://some-server.com npm start

Or as a script in package.json:

{
  "scripts": {
    "start": "react-scripts start",
    "start:staging": "PROXY=https://some-staging-server.com react-scripts start"
  },
  "proxy": "https://localhost:8888",
  "...": "..."
}

[facebook-github-bot]

Hi @unclechu!

Thank you for your pull request and welcome to our community.We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[ianschmitz]

What is the use case? What does the current proxy solution not solve?

[unclechu]

@ianschmitz As I showed in the example you can for instance have few commands to run a frontend using either local backend server or some testing/staging server. With this environment variable you don't have to change package.json contents which is usually under git index (e.g. you can accidentally commit a change of proxy field whilst you're wanted only new dependencies). Also it's inconvenient when you have to provide instructions in readmes like "if you want to run the frontend against another backend server go to some file and change some field to this specific value" while in case of this feature you could just suggest to run npm run start:staging or npm run start:local.

[unclechu]

In short words: it adds more flexibility to the proxy feature.

[ianschmitz]

You should be able to achieve your desired behavior today (two different scripts for diff environments) using environment variables within setupProxy.js.

[unclechu]

@ianschmitz It required more effort to do it using setupProxy.js. Also it doesn't work the same way (proxy in package.json redirects all 404 requests to the backend while in setupProxy.js you have to provide specific base URL or many routes if endpoints are starting from root). Also the docs page is outdated, I had to debug stuff to realize that API of http-proxy-middleware has changed.

But yes, it's possible to do kind of-ish the same, with more effort and more boilerplate. You're free to close this one but I think this offers a lot more simpler way of doing this whilst adding one line of code and couple of symbols to another line is not a trade-off at all.

[ianschmitz]

We've updated the docs page which will be published with the next release.

I'll see if there's appetite from the other maintainers. Historically the proxy has been a tricky subject with lots of weird edge cases which is why we're generally hesitant to make changes there. Hope you understand.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[unclechu]

Not stale bump

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[unclechu]

Not stale bump

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[unclechu]

Not stale bump

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[unclechu]

Nope

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[unclechu]

Nah

[jonjohansen]

+1

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[unclechu]

bump

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[unclechu]

Nope