[Docs] Proxying API Requests in Development / Configuring the Proxy Manually - not working solution

Link: https://create-react-app.dev/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

The suggested code:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

doesn’t work. It fails with this error:

  proxy is not a function

Also, it’s not clear at all how to use this proxy.

How to enable one proxy for testing (local mock server) and another for development?

[OnkelTem]

Let me share my solution.

I created src/setupProxy.js with the following content:

const { createProxyMiddleware } = require('http-proxy-middleware');
const packageJson = require('../package.json');

const args = process.argv.slice(2);
const mock = args[0] === '--mock';

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: mock ? packageJson.serverUrlMock : packageJson.serverUrlDev,
      changeOrigin: true,
    })
  );
};

and added these two extra lines in my package.json:

  "serverUrlMock": "http://localhost:3010",
  "serverUrlDev": "http://dev.server.domain:3010"

Now when I launch the app with the --mock parameter, it connects to the locally running mock server, and if leave it out, the client is connecting to our dev server.

This is an excerpt from the scripts section of my package.json:

  "scripts": {
    "start": "react-scripts start",
    "start-mock": "npx tsanalyzer-mock-server & react-scripts start --mock"
  }

[stale[bot]]

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.