DEV Community

Unable to navigate to pages in react (MERN app) which is deployed on Heroku

Deepika Sharma on July 05, 2021

I am working on a MERN app and it is working fine in localhost. Yesterday I hosted it in heroku and the API , UI are working fine. But I am unable...

Read full post

Ali Zulfaqar • Jul 5 '21

Hello, you can try referring to this video on how to deploy MERN with heroku. Hopefully it help you solve the problem you are facing
youtube.com/watch?v=71wSzpLyW9k&ab...

Deepika Sharma • Jul 5 '21

Sure I'lltry this and let you know

Deepika Sharma • Jul 5 '21

I think I did same as this video..but not working. If I add that app.get('*',(req,Res)) then I am getting mapping error.

Ali Zulfaqar • Jul 5 '21 • Edited

I think you are missing the build folder inside the client folder, perhaps you can try npm run build first and then redeploy it to heroku. Because your code is referring to build folder which is inside the client folder and i did not see build folder inside your client folder directory

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
}

Deepika Sharma • Jul 5 '21

No the buld folder is there. I just used .gitignore and added/build when pushing to GitHub. The app is running. Only think is I am able to see the home page and the API which is in home page.. I am unable to navigate to other pages.

Ali Zulfaqar • Jul 5 '21

how about you add app.get("*") from my code

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

Pratik sharma • Jul 5 '21 • Edited

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
}
app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

did you add this in your server ??

you can look here at the steps to do the same

github.com/accimeesterlin/mern-sta...

Hope it helps

Chill!!!

Deepika Sharma • Jul 5 '21

If you can , can you check whether my frontend mapping is correct? Because if I add the above code it is showing mapping error. But the code is completely working on local server.

And without the above code the home page and the mapping inside it are working fine. Only the navigation is not working.
(Actually I referred this person's YouTube video and deployed)