Manual configuration of create-react-app proxy

Question

I'm trying to move my proxy config out of my package.json and move it into a setupProxy.js, as per the docs, however I'm failing at the first hurdle.

My react app (created with CRA) is running on http://localhost:3000/. My API is running on https://localhost:7146.

With the package.json approach, everything works as expected - calls to the server succeed.

"proxy": "https://localhost:7146",

First request executed is

GET
http://localhost:3000/
Status 200 OK

However when I remove this line from package.json, create a setupProxy.js file and try and configure it, I cant get it working.

// setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");

const setupProxy = (app) => {
  app.use("/",
    createProxyMiddleware({
      target: "https://localhost:7146",
      changeOrigin: true,
    }),
  );
};

module.exports = setupProxy;

The first request executed is

GET
http://localhost:3000/
Status 500 Internal Server Error
Error occurred while trying to proxy: localhost:3000/

Can anyone help me understand how to configure the proxy via setupProxy.js? I'm finding the docs pretty limited in this area. I've tried different middleware paths (/, *, /api) but I get the same error. I've tried not specifying a middleware path in app.use and instead specifying it only as a createProxyMiddleware parameter and still get the same error.

Note, I understand that this example is super basic and there is no need to use setupProxy over the package.json approach, however I plan to do some more complicated configuration as soon as I get the basics nailed down.

Manual configuration of create-react-app proxy

0 Answers