node.js - MERN app works locally, but I get 503 when deploying to Heroku

Question

I'm working on a MERN app, pretty much done, all I have left to do is deploy it. The app works perfectly when I run it locally, but I deploy to Heroku, I get the following error in the browser console:

frozen-basin-00083.herokuapp.com/:1 Failed to load resource: the server responded with a status of 503 (Service Unavailable)
/favicon.ico:1 Failed to load resource: the server responded with a status of 503 (Service Unavailable)

Heroku logs show the following:

2021-01-12T16:35:14.000000+00:00 app[api]: Build succeeded

2021-01-12T16:35:25.312880+00:00 heroku[web.1]: Starting process with command `npm start`

2021-01-12T16:35:30.220170+00:00 app[web.1]:

2021-01-12T16:35:30.220351+00:00 app[web.1]: > budget-app@1.0.0 start /app

2021-01-12T16:35:30.220352+00:00 app[web.1]: > node server.js

2021-01-12T16:35:30.220356+00:00 app[web.1]:

2021-01-12T16:35:32.450275+00:00 app[web.1]: Server is running on port 7834

2021-01-12T16:35:32.457602+00:00 app[web.1]: Error: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.

2021-01-12T16:35:32.532983+00:00 app[web.1]: npm ERR! code ELIFECYCLE

2021-01-12T16:35:32.533749+00:00 app[web.1]: npm ERR! errno 1


2021-01-12T16:35:32.553311+00:00 app[web.1]: npm ERR! budget-app@1.0.0 start: `node server.js`

2021-01-12T16:35:32.553624+00:00 app[web.1]: npm ERR! Exit status 1

2021-01-12T16:35:32.553937+00:00 app[web.1]: npm ERR!

2021-01-12T16:35:32.554191+00:00 app[web.1]: npm ERR! Failed at the budget-app@1.0.0 start script.

2021-01-12T16:35:32.554488+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

2021-01-12T16:35:33.032396+00:00 app[web.1]:

2021-01-12T16:35:33.036236+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:

2021-01-12T16:35:33.036435+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2021-01-12T16_35_32_555Z-debug.log

2021-01-12T16:35:33.119008+00:00 heroku[web.1]: Process exited with status 1

2021-01-12T16:35:33.187983+00:00 heroku[web.1]: State changed from starting to crashed

2021-01-12T16:35:37.653703+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=frozen-basin-00083.herokuapp.com request_id=8403a766-1141-47b9-8fa3-79d77bbf5d01 fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:35:39.026779+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=frozen-basin-00083.herokuapp.com request_id=50f48bcf-4534-450d-825d-1b9e91d7ad44 fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:38:29.709828+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=frozen-basin-00083.herokuapp.com request_id=ca7f559f-2125-48b2-a22f-9f3180acb70b fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:38:30.395524+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=frozen-basin-00083.herokuapp.com request_id=d0937812-09be-49df-8138-564ee7bbfce0 fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:42:35.305633+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=frozen-basin-00083.herokuapp.com request_id=3d35bf8c-5c7f-441c-817a-6e15581d3bdc fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:42:35.923358+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=frozen-basin-00083.herokuapp.com request_id=cd050371-fb57-49b5-93f0-05a928a5fe77 fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

Initially I thought it may be a problem with favicon because of the console error. At one point I tried to use my own icon so I deleted favicon and the HTML tag for it. I saw the error, added it back in and nothing changed. I also see there's a mongoose error in the heroku logs, but locally when I run npm start, it connects the db just fine. When I run the app locally everything is exactly how it should be, I'm only getting these problems when deploying.

Here is the package.json for the server:

{
  "name": "budget-app",
  "version": "1.0.0",
  "description": "back end for budget tool",
  "main": "server.js",
  "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"
  },
  "author": "Evan Barton",
  "license": "MIT",
  "dependencies": {
    "colors": "^1.4.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.11.11",
    "morgan": "^1.10.0",
    "node": "^15.4.0"
  },
  "devDependencies": {
    "concurrently": "^5.3.0",
    "nodemon": "^2.0.7"
  }
}

Here is the package.json for the client:

{
  "name": "budget-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "axios": "^0.21.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "shortid": "^2.2.16",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

Here is the server.js file:

require('dotenv').config()
const path  = require('path')
const express = require('express')
const colors = require('colors')
const morgan = require('morgan')
const connectDB = require('./config/db-config')

connectDB()

const app = express()

app.use(express.json())

const transactionsRouter = require('./routes/transactions-router')

app.use('/api/transactions', transactionsRouter)

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

    // app.use('*', express.static(path.join(__dirname, "client", "build")))
}

const PORT = process.env.PORT || 5000

app.get('/', (req, res) => res.send('Hello'))

app.listen(PORT, console.log(`Server is running on port ${PORT}`.blue.bold))

db-config:

const mongoose = require('mongoose')

const connectDB = async () => {
    try {
        const conn = await mongoose.connect(process.env.MONGO_URI, {
            useNewUrlParser: true,
            useCreateIndex: true,
            useUnifiedTopology: true
        })

        console.log(`MongoDB connected: ${conn.connection.host}`.cyan.underline.bold)
    } catch(err) {
        console.log(`Error: ${err.message}`.red)
        process.exit(1)
    }
}

module.exports = connectDB

Answer 1

The issue was the environment variables. The reason it worked on my local machine was because of the env file, but when I deploy to Heroku, the env file is gitignored. So I had to set up the environment variables again in Heroku by going to setting > config vars, and configuring the variables the same way they are on my local machine. This fixed the problem instantly.