Deployed app on Heroku, but can't access mongoDB from it

Question

I deployed my first MERN stack app on Heroku, it is basically a liquor inventory manager.

However it is unable to access database. Whenever I make an Axios call, my requests get rejected. I've wasted 7 hours trying to fix it today but to no avail. Any help is appreciated.

Here is my server.js

const express = require('express')
const dotenv = require('dotenv').config()
const connectDB = require('./config/db')
const {errorHandler} = require('./middleware/errorMiddleware')
const port = process.env.PORT || 5000
const app = express()
const path = require('path')
const cors = require('cors')
const mongoose = require('mongoose')

connectDB()

app.use(express.json());
app.use(cors());

app.use('/api/users', require('./routes/userRoutes'))
app.use('/api/inventory', require('./routes/inventoryRoutes'))
app.use('/api/weekly', require('./routes/weeklyRoutes'))

mongoose.connect( process.env.MONGODB_URI, { useNewUrlParser: true })

// Serve frontend
if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, '../frontend/build')))
  
    app.get('*', (req, res) =>
      res.sendFile(
        path.resolve(__dirname, '../', 'frontend', 'build', 'index.html')
      )
    )
  } else {
    app.get('/', (req, res) => res.send('Please set to production'))
  }
app.use(errorHandler)

app.listen(port, () => {
    console.log(`Server up on ${port}`)
})

This is my package.json

{
  "name": "stockify-inventory-manager",
  "version": "1.0.0",
  "description": "Manage your Alcohol Inventory easily",
  "main": "server.js",
  "scripts": {
    "start": "node backend/server.js",
    "server": "nodemon backend/server.js",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
  },
  "author": "Steve Yoo",
  "license": "MIT",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "bootstrap": "^5.1.3",
    "colors": "^1.4.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "express-async-handler": "^1.2.0",
    "font-awesome": "^4.7.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.2.3",
    "react-router-dom": "^6.2.1"
  }
}

Here are checklists of what I tried:

1. Whitelist IP on mongoDB with 0.0.0.0/0
2. Double check connection string from mongoDB and way it is set up in .env
3. Check if any item is stuck in devdependencies instead of dependencies
4. Double check my Heroku config variables and ensure they match .env
5. Update nodejs to latest

And yes this runs fine locally.

EDIT: While testing some stuffs on heroku local, I noticed that backend running locally causes deployed app to work as intended. However it stops being able to access database again once I terminate local. Seems like backend didnt even start running when deployed. Still have no clue.... any help is appreciated

EDIT2: Added error screenshot.enter image description here

Answer 1

I think an Error ScreenShot will help a lot here, 'coz I dont know what kind of Error you are getting and you are saying that you are unable to connect to database then try adding your Heroku domain to MongoDB Allowed Domains.

Also, I see that you are using npm install in heroku-postbuild script but you dont have to do that 'coz whenever you'll push code to heroku it will automatically run npm install.