setupProxy.js path are not recognizing in reactjs application using http proxy middleware

Question

I am implementing http proxy middleware in my react app , my setupProxy.js path's are not recognising . Below is my code please let me know if i am doing anything wrong.

App component

class App extends React.Component {
  test = () => {
// I dont have any thing which is running in "/api"  
// Simply called fetch with "/api" because setupPorxy.js  is looking my request or not 
    fetch("/api")
      .then(res => {
        alert('test pri')
        console.log('res', res)
      })
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.test}>Test</button>
      </div>
    );
  }
}

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

\\ I dont have any thing running on localhost 5000 , want to check the request is modified or not 

module.exports = (app) => {
    app.use(createProxyMiddleware('/api', { target: 'http://localhost:5000', changeOrigin: true }));
}

output

But ended with 404 not found in browser console like http://localhost:3000/api (404 not found)

When i start the application there were logs shown like below but not replacing the target

Phlegmatic

@chimurai can you help me what i m doing wrong , have been stick with this issue aroung a day not sure whats wrong I am doing , – Phlegmatic

did you create an express app, i mean in your setupProxy file, what is app ? – Dues

@Dues i did not create express() , because I have an rest api backend thats why . – Phlegmatic

Did you check this out? create-react-app.dev/docs/proxying-api-requests-in-development – Capricorn

@JulianKleine yes checked copied setupProxy.js code from under this section Configuring the Proxy Manually from tht link only – Phlegmatic

@JulianKleine i did not add proxy variable in to package.json file is it still required . – Phlegmatic

Yes, i think it is required, i did not do it myself though – Capricorn

@Julian Kleine Okay you meant to add proxy variable in package. Json file right – Phlegmatic

yes, that's what I meant – Capricorn

No it's not working though @Julian Kleine – Phlegmatic

Can you add a working example? If you set up a simple create react app, are you able to use the proxy feature successfully? – Capricorn

Let us continue this discussion in chat. – Phlegmatic