Proxy defined via package.json is slow

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.

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

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

@yyfearth

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

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.

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

Navigation Menu

Repository navigation

Proxy defined via package.json is slow #4086

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Proxy defined via package.json is slow #4086

Description

Activity

VladoDemcak commented on Mar 3, 2018

yyfearth commented on Mar 11, 2018

VladoDemcak commented on Mar 12, 2018

stale commented on Dec 2, 2018

stale commented on Dec 8, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions