Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proxy defined via package.json is slow

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:5

github_iconTop GitHub Comments

VladoDemcakcommented, Mar 5, 2018

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.

Windows 10 Version 1703
npm --version 5.7.1
node --version v8.9.1
stale[bot]commented, Dec 8, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React create app proxy agent in package.json is slow on ...
We have proxy defined in package.json in our react application (created as create-react-app. We use proxy between front-end (webpack) and back-end (express) ...
Read more >
Why you should use a proxy server with Create React App
Ensure you don't have proxy defined in the package. json file, then create a new file named setupProxy.
Read more >
Five use cases where a npm private proxy fits in your workflow
This article is about why setting up a npm private proxy is a good idea, ... common these days and to keep switching...
Read more >
Performance Best Practices Using Express in Production
Set NODE_ENV to “production”; Ensure your app automatically restarts; Run your app in a cluster; Cache request results; Use a load balancer; Use...
Read more >
Why You Should Use React DevServer Proxy - Bits and Pieces
Since http-proxy-middleware has different log levels defined, ... You can also manually set up the proxy using the open-source npm library ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found