add multiple proxy in package json

Question

I'm using two servers for my react app, one for express and the other one that come with create-react-app. So in the react side server in package.json I added :

"proxy": {
    "/auth/google": {
      "target": "http://localhost:5000"
    }
  },

I run the server and I got this error :

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.

How can I fix that ? How can I add proxy ? Maybe using other syntax ?

Answer 1

The use of advanced proxy settings is deprecated in create-react-app v2. If you’re not using a string, but, like in your case, an object, you’ll have to use http-proxy-middleware and set up a setupProxy.js file in your src/ folder.

1. First, install http-proxy-middleware using npm or Yarn:

npm install http-proxy-middleware --save
# or
yarn add http-proxy-middleware

2. Then, create src/setupProxy.js and add the following:

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(proxy('auth/google', { target: 'http://localhost:5000/' }))
}

More on this issue: Move advanced proxy configuration to src/setupProxy.js

Answer 2

Maybe it's too late now but i found this solution and i want to share it! to add multiple proxies in your package.json you wanna install this package:

npm install http-proxy-middleware

Then create a file in your src folder named setupProxy.js and then add the following code to it:

const proxy=require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/api/putobject',{target:'http://server1.com'})),
    app.use(proxy('/api/getobject',{target:'http://server2.com'})),
    app.use(proxy('/api/deleteobject',{target:'http://server3.com'}))
}

Ofcourse replace your servers and your endpoints.

I hope it helps :)