How can I connect my React frontend to an Express backend?

Backend
1

Deployed my React and Express app on Heroku. I cannot access the login endpoint. My front end uses a fetch call:

import React from 'react';

function SignIn() {
  const initiateLogin = () => {
    fetch('/auth/login')
      .then(res => res.json())
      .then(data => console.log(data));
  };
  
  return <button onClick={initiateLogin}>Sign In</button>;
}

export default SignIn;
2

In my experience, make sure that the endpoints in your Express backend are correctly defined and accessible. In development, utilizing the proxy setting in your React package.json file can help route API calls to your backend server, but once deployed you need to ensure that your fetch requests target the correct domain. It is also important to verify CORS settings are properly configured if backend and frontend are on different domains. Lastly, checking server logs to trace requests can often reveal misconfiguration in route paths or deployment environment issues.