Heroku: Cannot Get / issue for a Node project that works locally

Question

I could really use some help on an old app I started working on a long time ago when I was first teaching myself JS. It has kind of turned into a labor of love that I work on in my spare time, a project I don't want to give up on, but I am really stuck on trying to get it hosted on Heroku. It works fine locally, but all I get now is cannot get /

My Heroku Logs:

2022-05-03T03:50:03.514079+00:00 app[web.1]: at new ConnectionString (/app/node_modules/mongodb-connection-string-url/lib/index.js:86:19)
2022-05-03T03:50:03.514079+00:00 app[web.1]: at parseOptions (/app/node_modules/mongoose/node_modules/mongodb/lib/connection_string.js:217:17)
2022-05-03T03:50:03.514079+00:00 app[web.1]: at new MongoClient (/app/node_modules/mongoose/node_modules/mongodb/lib/mongo_client.js:62:63)
2022-05-03T03:50:03.514080+00:00 app[web.1]: at /app/node_modules/mongoose/lib/connection.js:784:16
2022-05-03T03:50:03.514080+00:00 app[web.1]: at new Promise (<anonymous>)
2022-05-03T03:50:03.514081+00:00 app[web.1]: at NativeConnection.Connection.openUri (/app/node_modules/mongoose/lib/connection.js:781:19)
2022-05-03T03:50:03.514081+00:00 app[web.1]: at /app/node_modules/mongoose/lib/index.js:340:10
2022-05-03T03:50:03.514081+00:00 app[web.1]: at /app/node_modules/mongoose/lib/helpers/promiseOrCallback.js:32:5
2022-05-03T03:50:03.514082+00:00 app[web.1]: at new Promise (<anonymous>)
2022-05-03T03:50:03.514083+00:00 app[web.1]: at promiseOrCallback (/app/node_modules/mongoose/lib/helpers/promiseOrCallback.js:31:10) No Connection!!  Mongo database failed!
2022-05-03T03:50:12.000000+00:00 app[api]: Build succeeded
2022-05-03T03:50:55.817350+00:00 heroku[router]: at=info method=GET path="/" host=the-lottery-genie.herokuapp.com request_id=4854045e-6313-48e1-8c2d-fe6fb75aa356 fwd="212.102.61.144" dyno=web.1 connect=0ms service=12ms status=404 bytes=619 protocol=https

Its telling me about an Invalid Schema right now, which is a new development related to trying to put database connection information as a heroku config var, not sure whats going on there, but the cannot get / issue happens even when I hardcode the login information right into the app without any enviorment vars.

Even if I had not set up the database, yet, the front end should still be working on heroku right? I am very lost with this, and suspect it dates back to an older bad habit of mine where I would use NG update and NPM update / upgrade very liberally to try and keep up with the latest versions of everything without really understanding about breaking changes and updating correctly (I've seen learned to be very careful about updating) but I cant for the life of me figure out whats going on with this project right now.

Any help would be greatly appreciated. Thank you.

Package.Json

{
  "name": "the-lottery-djinni",
  "version": "0.0.0",
  "main": "server.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:server": "nodemon server.js",
    "heroku-postbuild": "ng build --configuration production"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "^13.3.2",
    "@angular/animations": "^13.3.2",
    "@angular/cdk": "^13.3.2",
    "@angular/cli": "^13.3.2",
    "@angular/common": "^13.3.2",
    "@angular/compiler": "^13.3.2",
    "@angular/core": "^13.3.2",
    "@angular/forms": "^13.3.2",
    "@angular/material": "^13.3.2",
    "@angular/platform-browser": "^13.3.2",
    "@angular/platform-browser-dynamic": "^13.3.2",
    "@angular/platform-server": "^13.3.2",
    "@angular/router": "^13.3.2",
    "ajv": "^8.11.0",
    "bcrypt": "^5.0.1",
    "body-parser": "^1.20.0",
    "bootstrap": "^5.1.3",
    "braces": "^3.0.2",
    "chalk": "^5.0.1",
    "core-js": "^3.21.1",
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "handlebars": "^4.7.7",
    "hbs": "^4.2.0",
    "jquery": "^3.6.0",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "^4.5.0",
    "mongoose": "^6.2.10",
    "mongoose-unique-validator": "^3.0.0",
    "multer": "^1.4.4",
    "node": "17.7.2",
    "npm": "^8.6.0",
    "path": "^0.12.7",
    "popper.js": "^1.16.1",
    "rxjs": "^7.5.5",
    "rxjs-compat": "^6.6.7",
    "save": "^2.4.0",
    "symbol-observable": "^4.0.0",
    "tar": "^6.1.11",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.3.2",
    "@angular/compiler-cli": "^13.3.2",
    "@angular/language-service": "^13.3.2",
    "@types/jasmine": "~4.0.2",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^17.0.23",
    "codelyzer": "^6.0.2",
    "enhanced-resolve": "^5.9.2",
    "install": "^0.13.0",
    "jasmine-core": "~4.0.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.3.17",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.2",
    "karma-jasmine-html-reporter": "^1.7.0",
    "nodemon": "^2.0.15",
    "protractor": "~7.0.0",
    "rxjs-tslint": "^0.1.8",
    "ts-node": "~10.7.0",
    "tslint": "~6.1.0",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0"
  },
  "engines": {
    "node": "17.7.2",
    "npm": "8.1.4"
  },

Git Hub Repo: https://github.com/AMazilu77/Lottery-Genie

Answer 1

The node backend starts correctly with the command node server.js but the Angular resources are not found.
On Heroku an application runs (listens) only on one port so you cannot run node and angular CLI at the same time.

The option I suggest is to use Docker which is nicely supported by Heroku: build an image including the Angular resources (dist) which runs the Node backend. The Dockerfile would look something like that:

note: you might have to change/adjust steps and paths

FROM node:16-alpine AS ui-build

WORKDIR /Lottery-Genie

COPY src/ ./src/
RUN cd src && npm install @angular/cli && npm install && npm run build

FROM node:16-alpine AS server-build

WORKDIR /Lottery-Genie
COPY --from=ui-build /Lottery-Genie/src/dist ./src/dist
COPY backend/ ./backend/
RUN cd node-api && npm install

WORKDIR /Lottery-Genie/backend

CMD [ "npm", "start" ]

Go ahead and deploy the application on Heroku Docker Registry

Another option is (instead of using Docker) is to package the Angular resources during the build using heroku-postbuild in the application package.json. This effectively creates a dist folder with all html and javascript files.

“heroku-postbuild”: “ng build — prod”

In case you prefer option #2 this is good article: Angular app on Heroku

Answer 2

The main question to be answered.

1. Did you whitelist ip address of heroku instance as a trusted ip inside Atlas MongoDB?

https://www.mongodb.com/developer/how-to/use-atlas-on-heroku/

You can't connected direct to clusters without whitelist the requested ip for security reasons.

Let me know if that's help.

Answer 3

Problem was in the angular.json file. I had to add the backend section to the file path. Heroku was looking for the DIST folder in the backend directory, not the root.

"outputPath": "backend/dist/The-Lottery-Djinni"