Mern heroku deployment - fails to work locally on commnd heroku local

i have been trying to deploy a Mern stack application to Heroku but prior to deploying the application after entering the following command

  • git add.
  • git commit -m “Final commit”
    and to test the application before I finally deploy, I entered the command
  • Heroku local, which is supposed to run the application locally which will help to check for errors before deploying.

here’s my backend package.json config

{

  "name": "Nimelssa-online-quiz",

  "version": "1.0.0",

  "description": "",

  "main": "server.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "cd client && npm run build",

    "install-client": "cd client && npm install",

    "heroku-postbuild": "npm run install-client && npm run build",

    "start": "node server.js",

    "client": "cd client && npm start",

    "dev": "concurrently -n 'server,client' -c 'green,red' \"nodemon server.js\" \"npm run client\""

  },

  "keywords": [],

  "author": "", 

  "license": "ISC",  

  "dependencies": {

    "@fortawesome/fontawesome-svg-core": "^1.2.32",

    "@fortawesome/free-solid-svg-icons": "^5.15.1",

    "@fortawesome/react-fontawesome": "^0.1.11",

    "@hapi/joi": "^17.1.1",

    "bcrypt": "^5.0.0",

    "body-parser": "^1.19.0",

    "concurrently": "^5.3.0",

    "cookie-parser": "^1.4.5",

    "cors": "^2.8.5",

    "dotenv": "^8.2.0",

    "express": "^4.17.1",

    "express-async-errors": "^3.1.1",

    "express-session": "^1.17.1",

    "helmet": "^4.1.1",

    "http-errors": "^1.8.0",

    "joi": "^17.2.1",

    "jsonwebtoken": "^8.5.1",

    "lodash": "^4.17.20",

    "mailgun-js": "^0.22.0",

    "moment": "^2.29.1",

    "mongoose": "^5.9.29",

    "morgan": "^1.10.0",

    "nodemailer": "^6.4.13",

    "nodemailer-mailgun-transport": "^2.0.1",

    "nodemailer-sendgrid-transport": "^0.2.0",

    "passport": "^0.4.1",

    "passport-jwt": "^4.0.0",

    "passport-local": "^1.0.0",

    "qs": "^6.9.4"

  },

  "devDependencies": {

    "nodemon": "^2.0.6"

  },

  "engines": {

    "node": "12.16.1"

  }

}

here’s is my server.js code

require('express-async-errors');

const morgan = require("morgan");

const helment = require("helmet");

const express = require("express");

const app = express();

const cookieParser = require("cookie-parser");

const cors = require("cors");

const mongoose = require("mongoose");

const bodyParser = require("body-parser");

require("dotenv").config();

const path = require('path');

app.use(helment());

app.use(cookieParser());

app.use(express.json());

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());

const dbOptions = {

  useNewUrlParser: true,

  useUnifiedTopology: true,

  useFindAndModify: false,

  useCreateIndex: true,

};

 mongoose

  .connect(process.env.MONGODB_URI || "mongodb://localhost:27017/Online-Quiz", dbOptions)

  .then(() => {

    console.log("Sucessfully connected to MongoDb Database");

  })

  .catch((err) => {

    console.error("Couldnt Connect To MongoDb Database");

  }); 

const userRouter = require("./router/User"); //check

const quizRouter = require("./router/Quiz");

const adminRouter = require("./router/Admin"); //check

app.use(morgan("tiny"));

app.use("/admin", adminRouter);

app.use("/user", userRouter);

app.use("/quiz", quizRouter);

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'));

  }); 

}

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {

  console.log(`Express Server is Listening on port ${PORT}`);

});

here is what is displayed on the terminal when I run Heroku local and try to access the end point HTTP://localhost:5000

$ heroku local
[WARN] ENOENT: no such file or directory, open ‘Procfile’
[OKAY] package.json file found - trying ‘npm start’
[OKAY] Loaded ENV .env File as KEY=VALUE Format
[WARN] ENOENT: no such file or directory, open ‘Procfile’
[OKAY] package.json file found - trying ‘npm start’
3:45:09 AM web.1 | > Nimelssa-online-quiz@1.0.0 start C:\Users\Marquis\Desktop\Dept-Project
3:45:09 AM web.1 | > node server.js
3:45:11 AM web.1 | Express Server is Listening on port 5000
3:45:11 AM web.1 | Sucessfully connected to MongoDb Database
3:46:03 AM web.1 | GET / 404 139 - 5.192 ms

Here is my file structure

Hi Marquis, you’re seeing a 404 HTTP Status Code because your application doesn’t know what to do on the / path. There aren’t any routes defined for it or files to serve.

To fix your issue you need to:

  1. Build the frontend application with npm run build. This will generate the static files of your frontend and place them in client/build folder.
  2. Run heroku local with production flag NODE_ENV=production heroku local. If you have a look in your server.js, you’ll see a block that starts with if(process.env.NODE_ENV === ‘production’) . Inside that block, you configure your express app to serve the static files of your frontend application. If you don’t set NODE_ENV=production, your app will skip that section and won’t serve your static files.

I hope that works! If you get more errors or have a question let me know.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks a lot, I could scale through that step but the content of the frontend is not rendering.

from the correction I made based on your direction, here’s what am getting at the terminal:

$ heroku local
[OKAY] Loaded ENV .env File as KEY=VALUE Format
12:56:52 AM web.1 | > Nimelssa-online-quiz@1.0.0 start C:\Users\Marquis\Desktop\Dept-Project
12:56:52 AM web.1 | > node server.js
12:56:53 AM web.1 | Express Server is Listening on port 5000
12:56:53 AM web.1 | Sucessfully connected to MongoDb Database
12:57:15 AM web.1 | GET / 304 - - 12.304 ms
12:57:16 AM web.1 | GET /static/css/2.b82f7614.chunk.css 200 4001 - 5.673 ms
12:57:16 AM web.1 | GET /static/css/main.f832a8a0.chunk.css 200 4001 - 7.758 ms
12:57:16 AM web.1 | GET /static/js/2.72e1025c.chunk.js 200 4001 - 6.570 ms
12:57:16 AM web.1 | GET /static/js/main.c831c201.chunk.js 200 4001 - 6.155 ms12:57:17 AM web.1 | GET /static/css/2.b82f7614.chunk.css 304 - - 2.826 ms
12:57:17 AM web.1 | GET /static/css/main.f832a8a0.chunk.css 304 - - 3.409 ms
12:57:18 AM web.1 | GET /manifest.json 200 4001 - 1.266 ms

Here is a snapshot of my server.js file