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
4
Answers
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.
The main question to be answered.
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.
The
node
backend starts correctly with the commandnode server.js
but the Angular resources are not found.On Heroku an application runs (listens) only on one port so you cannot run
node
andangular 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
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 adist
folder with all html and javascript files.In case you prefer option #2 this is good article: Angular app on Heroku
You need to arrange your routs before your running your html file like
then it will work get roots other wise its matches get * root