Heroku Deployment Error: displaying backend, not frontend

Question

I am trying to deploy my local MERN application to Heroku. Application works offline. After deployment, when click "Open app", all I see is the data from the backend. Not the front end. Deployment here: https://whispering-falls-45660.herokuapp.com/.

Set up new Heroku project, and after successful "git push Heroku master", application only shows backend data. Heroku CLI version: heroku/7.24.1, Node version: v10.13.0.

Github repo: https://github.com/neilhsieh/whereToEat

Package.json file has the proper scripts in place as per Brad Traversy:

"scripts": {
  "start": "node server.js",
  "server": "nodemon server.js",
  "client": "npm start --prefix client",
  "dev": "concurrently \"npm run server\" \"npm run client\"",
  "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},

server.js code has appropriate code to point to client build file:

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

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

Expecting front end deployed on Heroku, ended up only having backend.

UPDATE: Moved process.env.NODE_ENV test to before all API calls, this fixed my issue.

Do you have an index.html file committed to the repo? Can you check your gitignore file to make sure all the files are there? — Mavi Domates
– Mavi Domates, Commented May 10, 2019 at 10:08
@MaviDomates, just checked and the index.html is in my git repo under client/public/index.html. My gitignore file for my server has the following: node_modules, package-lock.json — Neil
– Neil, Commented May 14, 2019 at 14:53

Abinash Shasini · Accepted Answer · 2021-11-09 13:45:35Z

1

First if you have a route like this in your server/app.js file

app.get("/", (req, res) => res.send("Api Running"));

Definitely get rid of that

Second add these lines in your server/app.js file

const path = require("path");

if (process.env.NODE_ENV === "production") {

    app.use(express.static("client/build"));

    app.get("*", (req, res) => {

    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));

   });

}

answered Nov 9, 2021 at 13:45

Abinash Shasini

373 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Heroku Deployment Error: displaying backend, not frontend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related