Deploying app to Heroku throws error { path=“/” path=“/favicon.ico” }. But runs on localhost

Question

I am trying to deploy my app to Heroku. I am getting 503 (Service Unavailable) error even though it runs on localhost. I have tried many solutions, but none of them are working. My app.js file

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

const express = require("express");
const mongoose = require("mongoose");
const { ApolloServer } = require("apollo-server-express");
const auth = require("./middleware/auth");
const userController = require("./controllers/userController");
const typeDefs = require("./schema");
const resolvers = require("./resolvers");

const port = process.env.PORT || 4000;
const app = express();
app.set("port", port);

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

app.use(auth);
app.get("/email-confirmation/:token", userController.confirmationPost);

const server = new ApolloServer({
  typeDefs,
  resolvers,
  formatError: (err) => {
    if (!err.originalError) {
      return err;
    }
    if (err.message.startsWith("Database Error: ")) {
      err.message = "Internal server error";
    }
    const data = err.originalError.data;
    const message = err.message || "Internal server error.";
    const code = err.originalError.code || 500;
    return { message: message, status: code, data: data };
  },
  context: ({ req, res }) => ({
    req,
    res,
  }),
});

server.applyMiddleware({ app });

mongoose
  .connect(process.env.DB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
  })
  .then(() => {
    console.log("conneted to database");
    app.listen(port, () => {
      console.log("listening for requests on port " + port);
    });
  });

And my package.json is:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js",
    "dev": "nodemon app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server-express": "^2.17.0",
    "bcryptjs": "^2.4.3",
    "crypto": "^1.0.1",
    "express": "^4.17.1",
    "graphql": "^15.3.0",
    "jsonwebtoken": "^8.3.0",
    "mongoose": "^5.10.2",
    "nodemailer": "^6.4.16",
    "nodemailer-sendgrid-transport": "^0.2.0",
    "validator": "^10.8.0"
  },
  "devDependencies": {
    "dotenv": "^8.2.0",
    "eslint": "^7.7.0",
    "nodemon": "^2.0.6"
  }
}

heroku logs --tail command gives following output:

I have tried every solution. But none of them seems to resolve the issue. Please, help.

UPDATE:

After I setup DB_URL in Heroku, it started working but I am getting another error.

Console:

1. GET https://capstone-ecommerce-backend.herokuapp.com/ 404 (Not Found)
2. Refused to load the image 'https://capstone-ecommerce-backend.herokuapp.com/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Answer 1

Try setting up the DB_URL in your Heroku application. Use the following command:

$ heroku config:set DB_URL=database_uri_here