From a78bf1e2e5f193428beaa144610a99d9c2f676a9 Mon Sep 17 00:00:00 2001 From: AMS777 <32177639+AMS777@users.noreply.github.com> Date: Wed, 31 Mar 2021 12:53:57 +0200 Subject: [PATCH 1/5] Fix error importing `createProxyMiddleware` --- docusaurus/docs/proxying-api-requests-in-development.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 66563e25e45..de2d65ceb69 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -85,7 +85,7 @@ $ yarn add http-proxy-middleware Next, create `src/setupProxy.js` and place the following contents in it: ```js -const { createProxyMiddleware } = require('http-proxy-middleware'); +const createProxyMiddleware = require('http-proxy-middleware'); module.exports = function(app) { // ... @@ -95,7 +95,7 @@ module.exports = function(app) { You can now register proxies as you wish! Here's an example using the above `http-proxy-middleware`: ```js -const { createProxyMiddleware } = require('http-proxy-middleware'); +const createProxyMiddleware = require('http-proxy-middleware'); module.exports = function(app) { app.use( From c0d6cae4f9af1b6a3d1cde89c482407d470d27e6 Mon Sep 17 00:00:00 2001 From: AMS777 <32177639+AMS777@users.noreply.github.com> Date: Wed, 31 Mar 2021 13:09:23 +0200 Subject: [PATCH 2/5] Add example for multiple proxies --- .../proxying-api-requests-in-development.md | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index de2d65ceb69..40116fca059 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -108,6 +108,29 @@ module.exports = function(app) { }; ``` +Another example with multiple proxies: + +```js +const createProxyMiddleware = require('http-proxy-middleware'); + +module.exports = function(app) { + app.use( + '/api/v0', + createProxyMiddleware({ + target: 'http://localhost:5000', + changeOrigin: true, + }) + ); + app.use( + '/api/v1', + createProxyMiddleware({ + target: 'http://localhost:5001', + changeOrigin: true, + }) + ); +}; +``` + > **Note:** You do not need to import this file anywhere. It is automatically registered when you start the development server. > **Note:** This file only supports Node's JavaScript syntax. Be sure to only use supported language features (i.e. no support for Flow, ES Modules, etc). From a230bf6e18976cdf2d44023599a8cda492e22563 Mon Sep 17 00:00:00 2001 From: AMS777 <32177639+AMS777@users.noreply.github.com> Date: Wed, 31 Mar 2021 13:19:07 +0200 Subject: [PATCH 3/5] Specify that the `proxy` option only accepts a string --- docusaurus/docs/proxying-api-requests-in-development.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 40116fca059..f29160e5dff 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -16,7 +16,7 @@ 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, add a `proxy` field with a **string** value to your `package.json`, for example: ```json "proxy": "http://localhost:4000", @@ -34,7 +34,7 @@ Keep in mind that `proxy` only has effect in development (with `npm start`), and The `proxy` option supports HTTP, HTTPS and WebSocket connections. -If the `proxy` option is **not** flexible enough for you, alternatively you can: +If the `proxy` option only accepts a simple string as a value. If this is **not** flexible enough for you, alternatively you can: - [Configure the proxy yourself](#configuring-the-proxy-manually) - Enable CORS on your server ([here’s how to do it for Express](https://enable-cors.org/server_expressjs.html)). @@ -70,7 +70,7 @@ We don’t recommend this approach. > Note: this feature is available with `react-scripts@2.0.0` and higher. -If the `proxy` option is **not** flexible enough for you, you can get direct access to the Express app instance and hook up your own proxy middleware. +If the simple string value of the `proxy` option is **not** flexible enough for you, you can get direct access to the Express app instance and hook up your own proxy middleware. You can use this feature in conjunction with the `proxy` property in `package.json`, but it is recommended you consolidate all of your logic into `src/setupProxy.js`. From 985e6ae1b1e2837598d2a857d1d6ba0052f6d82b Mon Sep 17 00:00:00 2001 From: AMS777 <32177639+AMS777@users.noreply.github.com> Date: Wed, 31 Mar 2021 13:21:54 +0200 Subject: [PATCH 4/5] Fix typo --- docusaurus/docs/proxying-api-requests-in-development.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index f29160e5dff..bf4b33b649d 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -34,7 +34,7 @@ Keep in mind that `proxy` only has effect in development (with `npm start`), and The `proxy` option supports HTTP, HTTPS and WebSocket connections. -If the `proxy` option only accepts a simple string as a value. If this is **not** flexible enough for you, alternatively you can: +The `proxy` option only accepts a simple string as a value. If this is **not** flexible enough for you, alternatively you can: - [Configure the proxy yourself](#configuring-the-proxy-manually) - Enable CORS on your server ([here’s how to do it for Express](https://enable-cors.org/server_expressjs.html)). From 8ce7682290d5887bb2c13d37004f10b2162475c7 Mon Sep 17 00:00:00 2001 From: AMS777 <32177639+AMS777@users.noreply.github.com> Date: Wed, 31 Mar 2021 13:30:20 +0200 Subject: [PATCH 5/5] Remove "manually" from proxy configuration heading I find the term "manually" confusing, as it implies that there are other ways to configure the proxy, when it's the only way. The alternative is not to configure the proxy and leave the default configuration values. Another option would be "Advanced Proxy Configuration". --- docusaurus/docs/proxying-api-requests-in-development.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index bf4b33b649d..64e14cd772b 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -36,7 +36,7 @@ The `proxy` option supports HTTP, HTTPS and WebSocket connections. The `proxy` option only accepts a simple string as a value. If this is **not** flexible enough for you, alternatively you can: -- [Configure the proxy yourself](#configuring-the-proxy-manually) +- [Configure the proxy yourself](#configuring-the-proxy) - Enable CORS on your server ([here’s how to do it for Express](https://enable-cors.org/server_expressjs.html)). - Use [environment variables](adding-custom-environment-variables.md) to inject the right server host and port into your app. @@ -66,7 +66,7 @@ DANGEROUSLY_DISABLE_HOST_CHECK=true We don’t recommend this approach. -## Configuring the Proxy Manually +## Configuring the Proxy > Note: this feature is available with `react-scripts@2.0.0` and higher.