Node app build succeeded but not showing up on Heroku (MEAN Stack app)

Question

I am deploying my app to Heroku, after several failed build attempts it finally succeeded building, but when I want to access the app , it gives me 'Application error'. This is the successful build log:

-----> Node.js app detected
   
-----> Creating runtime environment
   
   NPM_CONFIG_LOGLEVEL=error
   NODE_ENV=production
   NODE_MODULES_CACHE=true
   NODE_VERBOSE=false
   
 -----> Installing binaries
   engines.node (package.json):  10.16.3
   engines.npm (package.json):   6.11.3
   
   Resolving node version 10.16.3...
   Downloading and installing node 10.16.3...
   Bootstrapping npm 6.11.3 (replacing 6.9.0)...
   npm 6.11.3 installed
   
-----> Restoring cache
   Cached directories were not restored due to a change in version of node, npm, yarn or stack
   Module installation may take longer for this build
   
-----> Installing dependencies
   Installing node modules
   
   > fsevents@1.2.11 install /tmp/build_b07ba6f8_/node_modules/fsevents
   > node-gyp rebuild
   
   make: Entering directory '/tmp/build_b07ba6f8_/node_modules/fsevents/build'
     SOLINK_MODULE(target) Release/obj.target/.node
     COPY Release/.node
   make: Leaving directory '/tmp/build_b07ba6f8_/node_modules/fsevents/build'
   
   > core-js@2.6.11 postinstall /tmp/build_b07ba6f8_/node_modules/babel-runtime/node_modules/core-js
   > node -e "try{require('./postinstall')}catch(e){}"
   
   
   > core-js@3.2.1 postinstall /tmp/build_b07ba6f8_/node_modules/@angular-devkit/build- 
  angular/node_modules/core-js
   > node scripts/postinstall || echo "ignore"
   
   
   > bcrypt@3.0.7 install /tmp/build_b07ba6f8_/node_modules/bcrypt
   > node-pre-gyp install --fallback-to-build
   
   [bcrypt] Success: "/tmp/build_b07ba6f8_/node_modules/bcrypt/lib/binding/bcrypt_lib.node" is 
installed via remote
   
   > @angular/cli@8.3.23 postinstall /tmp/build_b07ba6f8_/node_modules/@angular/cli
   > node ./bin/postinstall/script.js
   
   added 1056 packages in 24.037s
   
-----> Build
   
-----> Caching build
   - node_modules
   
-----> Pruning devDependencies
   removed 496 packages and audited 628 packages in 11.836s
   found 132 vulnerabilities (131 low, 1 moderate)
     run `npm audit fix` to fix them, or `npm audit` for details
   
-----> Build succeeded!
-----> Discovering process types
   Procfile declares types     -> (none)
   Default types for buildpack -> web
-----> Compressing...
   Done: 54.9M
-----> Launching...
   Released v9

Then when I see i cant access my web app, the log says this:

2020-09-29T20:34:29.157236+00:00 app[web.1]: npm ERR! meanstacknieuw@1.0.0 start: node index.js                 
2020-09-29T20:34:29.157459+00:00 app[web.1]: npm ERR! Exit status 1    
2020-09-29T20:34:29.157845+00:00 app[web.1]: npm ERR! 
2020-09-29T20:34:29.158095+00:00 app[web.1]: npm ERR! Failed at the meanstacknieuw@1.0.0 start 
script.
2020-09-29T20:34:29.158322+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There 
is likely additional logging output above.
2020-09-29T20:34:29.170467+00:00 app[web.1]: 
2020-09-29T20:34:29.170778+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-09-29T20:34:29.171436+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-09-29T20_34_29_159Z- 
debug.log
2020-09-29T20:34:29.256127+00:00 heroku[web.1]: Process exited with status 1
2020-09-29T20:34:29.304162+00:00 heroku[web.1]: State changed from starting to crashed

This is my package.json file :

` {
  "name": "meanstacknieuw",
  "version": "1.0.0",
  "description": "refreshing",
  "main": "index.js",
  "engines": {
"node": "10.16.3",
"npm": "6.11.3"
  },
  "scripts": {
"ng": "ng",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
  },
  "repository": {
"type": "git",
"url": "git+https://github.com/y0u-s/vf-app.git"
  },
 "keywords": [
"MEAN",
"stack",
"angular",
"2",
"application"
  ],
  "author": "Youssef",
  "license": "ISC",
  "bugs": {
"url": "https://github.com/y0u-s/latest-mean-stack-app/issues"
  },
  "homepage": "https://github.com/y0u-s/latest-mean-stack-app#readme",
  "dependencies": {
"@angular/cli": "^8.3.20",
"@angular/compiler": "^8.2.14",
"rxjs": "^6.3.3",
"@angular/core": "^7.2.16",
"@angular/compiler-cli": "^8.2.14",
"angular2-flash-messages": "^3.0.1",

"bcrypt": "^3.0.4",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"file-extension": "^4.0.5",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.2",
"node-localstorage": "^2.1.4",
"nodemailer": "^6.4.1",
"simple-odata-server": "^1.1.1",
"typescript": "~3.2.2"
  },
  "devDependencies": {
"@angular-devkit/build-angular": "^0.803.20"
  }
}`

my server.js file:

const port = process.env.PORT || 8080;

app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, 
Content-Type, Accept");
next();
 });

app.use(cors({
origin: 'http://localhost:4200'
}));

app.get('*', function(req, res){
res.sendFile(path.join(__dirname + '/public/index.html'));
 }); 

app.listen(port, () => {
console.log('Hello on port ' + port)
});

Please tell me if you need any more context or code.

Answer 1

When heroku starts your app it will run npm run start . Your start script refers to index.js , whereas you are referring to server.js - is this correct?

Does npm run start work properly on localhost?

 "scripts": {
   "ng": "ng",
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "node index.js"
  }

Answer 2

In server.js, check for your path is matching with the dist/{folder_name}

{folder_name} can be configure in package.json file.

eg in the package.json file

{ "name": "folder_name", }

Answer 3

you need to specify the port of heroku env

app.listen( process.env.PORT || 8001, () => {
    console.log("Server listening ...")
})