Trouble with deploying MERN App to Heroku

1

Hey, as the title says im just not getting it done deploying my MERN App to Heroku. I always run in errors, currently the routes are just not working for me.

The first page loads fine but as soon as i go to antoher site (myapp.com/donate) for example Heroku tells me “Cannot GET /donate”. I searched the web for hours but couldnt find any solution so i hope that some of you guys can help me out.

If you need more information to help me solve this issue, feel free to ask. I will provide any details needed.

error
error972×457 25.7 KB

2

Welcome there.

It would be useful to see your folder structure, and, if your code is hosted on GitHub, sending that link through would help.

Otherwise, the error sounds like either you are using some sort of CSP (the only one I have experience with is Helmetjs) that is not allowing access to the specified folder, or Heroku is doing this automatically.

4

Thanks for the fast reply! :slight_smile:

I based my project on a MERN tutorial that i found on youtube. It was a while ago but i think it was a video from freecodecamp. I pushed it to GitHub so you can get a good overview. Here is the link to the project https://github.com/RealTest8989/dono-system

5

Going over your code, I notice this:

You have these routes set from your React Router:

<Router>
      <Route path="/alertbox" component={Alertbox} />
      <Route path="/donate" component={Donate} />
    </Router>

But, you do not have such paths set in your backend…

Furthermore, line 23 for alertbox.component:

axios.get('http://localhost:5000/donations/queue')

localhost is not defined. I suggest you set this to the relative path. Same goes for line 110 for donate.component. These are your main issues.

I hope this helps

7

Unfortunately im not sure how i set this paths in my backend. I always see that youre just supposed to set a path to the build index.html, what works for me. Maybe you can help me out on how i can set the paths for the components in the backend?

8

I am sorry, but I cannot help with that other than point you to a few resources.

As I mentioned earlier, your biggest issue is a few get requests to a local address. The is not allowed, as it is a major security issue. As an example:

axios.get('http://localhost:5000/donations/queue')
//Change this to something like:
axios.get('/donations/queue');

You defined this route here:

router.route('/queue').get((req, res) => {
  Donation.find({played: false})
    .then(donations => res.json(donations))
    .catch(err => res.status(400).json('Error: ' + err));
});

And the reason to add /donations is because that is how it is mounted (attached) to your server (app):

app.use('/donations', donationsRouter);

You need to think about what your Router is doing:

<Route path="/donate" component={Donate} />

This says:

When a request is made to /donate, render the component Donate

Now, I cannot see anywhere in your code that is redirecting to /donate. So, if you have tested this app locally, I am not sure how you got the Donate component to render. I could just be missing this. However, I suggest you take a look at this:
https://reactrouter.com/web/guides/quick-start

I hope this helps you on your way. Perhaps, it would be beneficial for you to watch a few more related tutorials on YouTube. This is what helped me understand better.

10

Thanks for trying to help me, i will check it out. On my local machine it works just fine. I have to start the frontend with ‘react-scripts start’ then open another terminal and start the server with ‘node server.js’ when both runs my app works just fine. I based it on the freecodecamp mern stack tutorial thats available on youtube and als has a GitHub repo https://github.com/beaucarnes/mern-exercise-tracker-mongodb