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
CodePudding user response：
The main question to be answered.
- 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.
CodePudding user response：
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