Skip to content

Commit 54323f0

Browse files
committed
Remove advanced proxy guide
1 parent ac5376f commit 54323f0

File tree

1 file changed

+19
-76
lines changed

1 file changed

+19
-76
lines changed

packages/react-scripts/template/README.md

+19-76
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
4949
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
5050
- ["Invalid Host Header" Errors After Configuring Proxy](#invalid-host-header-errors-after-configuring-proxy)
5151
- [Configuring the Proxy Manually](#configuring-the-proxy-manually)
52-
- [Configuring a WebSocket Proxy](#configuring-a-websocket-proxy)
5352
- [Using HTTPS in Development](#using-https-in-development)
5453
- [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
5554
- [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files)
@@ -1095,92 +1094,36 @@ We don’t recommend this approach.
10951094

10961095
### Configuring the Proxy Manually
10971096

1098-
> Note: this feature is available with `react-scripts@1.0.0` and higher.
1097+
> Note: this feature is available with `react-scripts@2.0.0` and higher.
10991098
1100-
If the `proxy` option is **not** flexible enough for you, you can specify an object in the following form (in `package.json`).<br>
1101-
You may also specify any configuration value [`http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) or [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options) supports.
1099+
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 middleware.
11021100

1103-
```js
1104-
{
1105-
// ...
1106-
"proxy": {
1107-
"/api": {
1108-
"target": "<url>",
1109-
"ws": true
1110-
// ...
1111-
}
1112-
}
1113-
// ...
1114-
}
1115-
```
1101+
First, install `http-proxy-middleware` using npm or Yarn:
11161102

1117-
All requests matching this path will be proxies, no exceptions. This includes requests for `text/html`, which the standard `proxy` option does not proxy.
1103+
```bash
1104+
$ npm install http-proxy-middleware --save
1105+
$ # or
1106+
$ yarn add http-proxy-middleware
1107+
```
11181108

1119-
If you need to specify multiple proxies, you may do so by specifying additional entries.
1120-
Matches are regular expressions, so that you can use a regexp to match multiple paths.
1109+
Next, create `src/setupProxy.js` and place the following contents in it:
11211110

11221111
```js
1123-
{
1124-
// ...
1125-
"proxy": {
1126-
// Matches any request starting with /api
1127-
"/api": {
1128-
"target": "<url_1>",
1129-
"ws": true
1130-
// ...
1131-
},
1132-
// Matches any request starting with /foo
1133-
"/foo": {
1134-
"target": "<url_2>",
1135-
"ssl": true,
1136-
"pathRewrite": {
1137-
"^/foo": "/foo/beta"
1138-
}
1139-
// ...
1140-
},
1141-
// Matches /bar/abc.html but not /bar/sub/def.html
1142-
"/bar/[^/]*[.]html": {
1143-
"target": "<url_3>",
1144-
// ...
1145-
},
1146-
// Matches /baz/abc.html and /baz/sub/def.html
1147-
"/baz/.*/.*[.]html": {
1148-
"target": "<url_4>"
1149-
// ...
1150-
}
1151-
}
1112+
const proxy = require('http-proxy-middleware');
1113+
1114+
module.exports = function(app) {
11521115
// ...
1153-
}
1116+
};
11541117
```
11551118

1156-
### Configuring a WebSocket Proxy
1157-
1158-
When setting up a WebSocket proxy, there are a some extra considerations to be aware of.
1159-
1160-
If you’re using a WebSocket engine like [Socket.io](https://socket.io/), you must have a Socket.io server running that you can use as the proxy target. Socket.io will not work with a standard WebSocket server. Specifically, don't expect Socket.io to work with [the websocket.org echo test](http://websocket.org/echo.html).
1161-
1162-
There’s some good documentation available for [setting up a Socket.io server](https://socket.io/docs/).
1163-
1164-
Standard WebSockets **will** work with a standard WebSocket server as well as the websocket.org echo test. You can use libraries like [ws](https://github.com/websockets/ws) for the server, with [native WebSockets in the browser](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket).
1165-
1166-
Either way, you can proxy WebSocket requests manually in `package.json`:
1119+
You can now register proxies as you wish! Here's an example using the above `http-proxy-middleware`:
11671120

11681121
```js
1169-
{
1170-
// ...
1171-
"proxy": {
1172-
"/socket": {
1173-
// Your compatible WebSocket server
1174-
"target": "ws://<socket_url>",
1175-
// Tell http-proxy-middleware that this is a WebSocket proxy.
1176-
// Also allows you to proxy WebSocket requests without an additional HTTP request
1177-
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
1178-
"ws": true
1179-
// ...
1180-
}
1181-
}
1182-
// ...
1183-
}
1122+
const proxy = require('http-proxy-middleware');
1123+
1124+
module.exports = function(app) {
1125+
app.use(proxy('/api', { target: 'http://localhost:5000/' }));
1126+
};
11841127
```
11851128

11861129
## Using HTTPS in Development

0 commit comments

Comments
 (0)