Unable to host MEAN stack application on Heroku - node.js

Question

I'm trying to deploy my application, but the problem is that in my root folder, I've two different folders one for back-end and one for front-end.
First of all I tried to push it as it is, just changed the database from local to cloud.
The push was successful, but I was not able to open the app. Got the following error:
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
Next, merged both the folders, and made some necessary changes to the routes (followed different tutorials). Now I wasn't able to push even.
Tried a lot of ways, followed and saw different tutorials, read guides and blogs, yet unable to host my application.
My project is working fine in localhost.
Here is my package.json from front-end folder
{
"name": "office-space",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot -prod",
"start":"node server.js"
},
"private": true,
"dependencies": {
"#angular/cli": "~8.1.0",
"#angular/compiler-cli": "~8.1.0",
"#angular/animations": "~8.1.0",
"#angular/common": "~8.1.0",
"#angular/compiler": "~8.1.0",
"#angular/core": "~8.1.0",
"#angular/forms": "~8.1.0",
"#angular/platform-browser": "~8.1.0",
"#angular/platform-browser-dynamic": "~8.1.0",
"#angular/router": "~8.1.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.3.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"material-design-icons": "^3.0.1",
"ngx-pagination": "^4.1.0",
"nonblockjs": "^1.0.8",
"pnotify": "^4.0.0",
"popper.js": "^1.15.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.801.0",
"#angular/language-service": "~8.1.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.30",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"engines": {
"node":"12.3.1",
"npm":"6.11.1"
}
}
and here is the package.json from my back-end folder
{
"name": "api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mongoose": "^5.6.10"
}
}
and finally here is my server file
const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose'),
//DB = 'mongodb://localhost:27017/OfficeSpace'
DB = 'mongodb+srv://omersjd:omersjdp#officespace-szwno.mongodb.net/OfficeSpace?retryWrites=true&w=majority'
const employeeRoute = require('./routes/employee.route');
//mongoose.Promise = global.Promise;
mongoose.connect(DB, { useNewUrlParser: true }, (err, response) => {
if (err) {
console.log('Error connecting to Database: ', err)
}
else {
console.log('Connected to ' + DB);
}
});
const app = express();
app.use(express.static(__dirname + "/dist"))
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname + "/dist/OfficeSpace/index.html"))
})
app.use(bodyParser.json());
app.use(cors());
app.use('/', employeeRoute);
let port = process.env.PORT || 4000;
//console.log(employeeRoute);
const server = app.listen(port, function () {
console.log('Listening on port ' + port);
})
here is my directory structure:
├── api (backend folder)
└── frontend-app contents

Answer 1

have you checked the error logs ? you can do this by
heroku logs --tail
the error should be of mongodb connection check it and try to resolve...
hope this helps...