CRA 2.0 How to setup proxy in React?

Question

In CRA 2.0 proxy property on the package.json does not work. After some research, I came across an article suggesting to use http-proxy-middleware. I created an setupProxy.js in the src of my client folder(React side). That contains the following code

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
  console.log("Setup proxy is ever called");
  app.use(proxy("/api/auth/google", { target: "http://localhost:5000/" }));
};

What am I supposed to do after this. Where should I import the setupProxy.js file. From where it is gonna receive app.

Answer 1

The proxy value in package.json does still work in CRA 2, but it now only accepts a string, more complicated proxy options have to be put in src/setupProxy.js as you are doing. But be careful, if you leave the proxy property in package.json CRA will use that and ignore your setupProxy.js file.

You don't need to import setupProxy.js anywhere, CRA will find it as long as it's in src.

Don't worry about where app comes from, that variable will be provided at runtime.

Your example will work, I've tried it (as long as you remove the old proxy string from package.json). But the console.log will not be logged to the terminal (I'm not sure why).

Further reading, the PR where this change was introduced: https://github.com/facebook/create-react-app/pull/5073