Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify missing specification and add examples #10768

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 30 additions & 7 deletions docusaurus/docs/proxying-api-requests-in-development.md
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -34,9 +34,9 @@ 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:
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.

Expand Down Expand Up @@ -66,11 +66,11 @@ 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.

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`.

Expand All @@ -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) {
// ...
Expand All @@ -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(
Expand All @@ -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).
Expand Down