Create-react-app: Proxy defined via package.json is slow

Created on 27 Feb 2018 · 5Comments · Source: facebook/create-react-app

We have proxy defined in package.json in our react application and We use proxy between front-end (webpack) and back-end (express) during development as described here.
package.json:

  "scripts": {
    ...
  },
  "proxy": "http://localhost:3001"
}

So as you can see it's simple proxy as described in documentation.
On the backend side (port 3001) we call another APIs (another rest services).
I have noticed that proxy calls from webpack (create-react-app) to express (backed) during development are really slow. (we work on Windows OS)

GET http://localhost:3000/endpoint/ -> ~600ms - 900ms (webpack -> express -> 3rd party rest api)
GET http://localhost:3001/endpoint/ -> ~150ms - 250ms (express -> 3rd party rest api)
GET http://restAPI:XYZ/endpoint/    -> ~150ms - 250ms (3rd party rest api direct call)

As you can see the time differences between proxy calls (port 3000) and direct calls - port (3001) - are really huge. I expected delay but this looks weird.

Also sometimes large JSON response (~38KB) from proxy is broken (invalid - e.g missing some parts of a response or swapped characters). I have been struggling with the same issue on backend side and I think I have resolved it with proxy-agent where I set keep-alive connection.

Do you have any idea why or how to improve proxy time and behavior?

Also I tried to set agent in package.json but without success.
create react app documentation says:

You may also specify any configuration value http-proxy-middleware or http-proxy supports.

And http-proxy documentation says

agent: object to be passed to http(s).request (see Node's https agent
and http agent objects)

Is it possible to define agent in package.json?

I tried but I got following error

TypeError: Agent option must be an Agent-like object, undefined, or
false.
at new ClientRequest (_http_client.js:106:11)

"proxy": {
    "/": {
      "target": "http://localhost:3001",
      "agent": { "keepAlive": true }
    }
  }

Highly appreciate any suggestion or idea.

needs investigation stale

Source

VladoDemcak

👍7

Most helpful comment

We are forced to use react-app-rewired for custom agent. It's sad that we were not able to set our custom agent for devServer proxy. At least we didn't find a way how to make this work.

// config-overrides.js
module.exports = {
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);doesnt work very well
      config.proxy.forEach(p => {
        p.agent = agent; //  new http.Agent({ keepAlive: true });
      });
      return config;
    };
  }
}

I guess it's workaround and potentially not supported in the future releases of create-react-app but response time is around 150ms - 230ms (AND! without invalid JSONs) and it's the thing that counts right now.

ENVIRONMENT:
Windows 10 Version 1703
npm --version 5.7.1
node --version v8.9.1

VladoDemcak on 3 Mar 2018

👍4

All 5 comments

We are forced to use react-app-rewired for custom agent. It's sad that we were not able to set our custom agent for devServer proxy. At least we didn't find a way how to make this work.

// config-overrides.js
module.exports = {
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);doesnt work very well
      config.proxy.forEach(p => {
        p.agent = agent; //  new http.Agent({ keepAlive: true });
      });
      return config;
    };
  }
}

ENVIRONMENT:
Windows 10 Version 1703
npm --version 5.7.1
node --version v8.9.1

VladoDemcak on 3 Mar 2018

👍4

I think the proxy.js mentioned in #3366 and #3845 will solve your problem.

yyfearth on 11 Mar 2018

Nice note @yyfearth !. Didn't know about proxy.js. I checked it and I definitely agree with you.

VladoDemcak on 12 Mar 2018

This issue 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.