Backend Node.js Server not functioning in Heroku Deployment-CodePudding

I am having issues deploying a React App with Node.js backend server to Heroku. The app I've made allows the user to post a race score to a mongodb database, and all results can be retrieved and displayed from the database. I use two server ports when running this app locally, Localhost: 3000 for the frontend React and Localhost: 4000 for the backend node server. When running this app locally I was able to make it work by hardcoding the localhost:4000 URL for the axios calls to the database. Removing the Localhost:4000 part of the axios calls makes the calls default to localhost: 3000, which leads me to think the axios calls are not routing properly in the Heroku deployment. Furthermore when the axios calls are set to Localhost:4000 URL the Heroku app works fine if the backend server is spun up on my local machine.

I believe the issue here is the backend server is not running in the Heroku deployment, and that the routes may also need to be revised. I'm new to these deployments so any help here would be appreciated!

Backend Server: https://github.com/Bensonm3/Max-a-thon-Results/blob/master/backend/server.js

Create Athlete Component: https://github.com/Bensonm3/Max-a-thon-Results/blob/master/src/components/create-athlete.component.js

Deployed App: https://max-a-thon-results.herokuapp.com/

CodePudding user response：

Usually, API and fronted are hosted separately. Deploy your React app and Express app separately. Then you can easily access your backend route.

CodePudding user response：

Your application is running in development mode. You must serve your app wiht your nodejs server.

Do this refactoring

Add this code in your server.js

    // server.js
    app.use(express.static(path.join(__dirname, 'build')));
    
    app.get('/', function (req, res) {
      res.sendFile(path.join(__dirname, 'build', 'index.html'));
    });
   // comment this code when you run in local

And add heroku post build like this in your package.json

//package.json
 "scripts": {
    "start": "node backend/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install && npm run build"
  },