Getting MongoDb to work correctly on a Heroku/ React App

I am having trouble getting MongoDb to work correctly on my Heroku/ React app.This is the projects github https://github.com/JeanPeel/project-3 This is the app’s link https://habittracker3.herokuapp.com/ When I navigate to the back pages that use the database, like , https://habittracker3.herokuapp.com/Habits the screen shows this []
When I inspect the element it shows this that it is trying to make a json call.

  • I have added mlab to the app on heroku.

  • And I have added this code to the app.in the .json file

{
  "_id": "xxxx",
  "user": "xxxx",
  "db": "xxxx",
  "roles": [
      {
          "role": "xxxx",
          "db": "xxxx"
      }
  ]
}
  • And I have added this In the server file
mongoose.connect(
    mongoURI,
    {
    useMongoClient: true
    }
    );

but it is still not working… Do you have any ideas about what I need to do next? Thanks!

It looks like this previous post from @camperbot has new information that may help me. How to deploy your MongoDB app to Heroku

The problem ended up being that I was using React-Router-Dom apparently if you use routing in your react file you need to add additional routing for it to work when it deploys. I ran into this same problem when I tried to deploy another react app to Netlify here Deploying from Github to Netlify This is good to know in general since Router is so nice to use in React, it seems anyone who tries to deploy using router in react is likely to run into a conflict unless they build in additional routing instructions. Here is one solution to this problems https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku I did not use that solution because I found that after I got help to solve my issue. I got help solving my problem and the solution I am using can be seen here https://github.com/JeanPeel/project-3/blob/master/server.js

function sendIndex(request, response) {
    const indexPath = path.join(__dirname, 'client', 'build', 'index.html');

    response.sendFile(indexPath);
}

app
    .get("/Form", sendIndex)
    .get("/Habits", sendIndex)
    .get("/Leaderboard", sendIndex)
    .get("/Login", sendIndex);

Basically that code is manually routing back to the main page.