From 697cf6d1fad5a9edee91432e41f0c404c63e9c51 Mon Sep 17 00:00:00 2001 From: Warren Date: Fri, 2 Oct 2020 09:29:48 +0100 Subject: [PATCH 1/2] #9739 Set proxy setting from environment variables, falling back to package.json --- packages/react-scripts/scripts/start.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index ffbb15d1204..e6c9a57a79d 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -126,7 +126,7 @@ checkBrowsers(paths.appPath, isInteractive) webpack, }); // Load proxy config - const proxySetting = require(paths.appPackageJson).proxy; + const proxySetting = process.env.PROXY || require(paths.appPackageJson).proxy; const proxyConfig = prepareProxy( proxySetting, paths.appPublic, From 4de4a4ade107421d722c47cd7c4f4d9657b82b5f Mon Sep 17 00:00:00 2001 From: Warren Date: Fri, 2 Oct 2020 11:05:36 +0100 Subject: [PATCH 2/2] Add to documentation about proxy environment variable --- docusaurus/docs/advanced-configuration.md | 1 + docusaurus/docs/proxying-api-requests-in-development.md | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 6da2ad174e0..32bd5e01669 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -13,6 +13,7 @@ You can adjust various development and production settings by setting environmen | BROWSER_ARGS | βœ… Used | 🚫 Ignored | When the `BROWSER` environment variable is specified, any arguments that you set to this environment variable will be passed to the browser instance. Multiple arguments are supported as a space separated list. By default, no arguments are passed through to browsers. | | HOST | βœ… Used | 🚫 Ignored | By default, the development web server binds to all hostnames on the device (`localhost`, LAN network address, etc.). You may use this variable to specify a different host. | | PORT | βœ… Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | +| PROXY | βœ… Used | 🚫 Ignored | By default, the development web server will either not proxy requests or will redirect them to the target specified by the `proxy` setting in `package.json`. You may use this variable to specify a different proxy | | HTTPS | βœ… Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | | WDS_SOCKET_HOST | βœ… Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details. | | WDS_SOCKET_PATH | βœ… Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details. | diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 66563e25e45..87601d21189 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -16,13 +16,13 @@ For example, a production setup might look like this after the app is deployed: Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another host or port during development. -To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json`, for example: +To tell the development server to proxy any unknown requests to your API server in development, either add a `proxy` field to your `package.json` or add en environment variable called `PROXY`, for example: ```json "proxy": "http://localhost:4000", ``` -This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback. The development server will **only** attempt to send requests without `text/html` in its `Accept` header to the proxy. +This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback. The development server will **only** attempt to send requests without `text/html` in its `Accept` header to the proxy. If both the environment variable and `package.json` settings are set, the environment variable will be used. Conveniently, this avoids [CORS issues](https://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: @@ -87,7 +87,7 @@ Next, create `src/setupProxy.js` and place the following contents in it: ```js const { createProxyMiddleware } = require('http-proxy-middleware'); -module.exports = function(app) { +module.exports = function (app) { // ... }; ``` @@ -97,7 +97,7 @@ You can now register proxies as you wish! Here's an example using the above `htt ```js const { createProxyMiddleware } = require('http-proxy-middleware'); -module.exports = function(app) { +module.exports = function (app) { app.use( '/api', createProxyMiddleware({