Ionic app with node not deploying correctly on Heroku

Question

I have a program in ionic and I am trying to deploy it to heroku, but it gives me this error:

2021-12-12T13:20:32.269136+00:00 app[web.1]: - Generating browser application bundles (phase: setup)...
2021-12-12T13:20:49.881823+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2021-12-12T13:20:49.912813+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-12-12T13:20:50.102339+00:00 heroku[web.1]: Process exited with status 137
2021-12-12T13:20:50.173468+00:00 heroku[web.1]: State changed from starting to crashed
2021-12-12T13:24:11.000000+00:00 app[api]: Build started by user sergioml2000@gmail.com
2021-12-12T13:26:30.635761+00:00 app[api]: Deploy 83d7c481 by user sergioml2000@gmail.com
2021-12-12T13:26:30.635761+00:00 app[api]: Release v5 created by user sergioml2000@gmail.com
2021-12-12T13:26:31.297561+00:00 heroku[web.1]: State changed from crashed to starting
2021-12-12T13:26:41.118110+00:00 heroku[web.1]: Starting process with command `npm run build && npm start`
2021-12-12T13:26:42.104400+00:00 app[web.1]:
2021-12-12T13:26:42.104411+00:00 app[web.1]: > sigevaMantUI@0.0.1 build /app
2021-12-12T13:26:42.104411+00:00 app[web.1]: > ng build --prod
2021-12-12T13:26:42.104411+00:00 app[web.1]:
2021-12-12T13:26:42.648877+00:00 app[web.1]: Option "--prod" is deprecated: Use "--configuration production" instead.
2021-12-12T13:26:44.791613+00:00 app[web.1]: - Generating browser application bundles (phase: setup)...
2021-12-12T13:26:45.000000+00:00 app[api]: Build succeeded
2021-12-12T13:27:14.252438+00:00 heroku[web.1]: Process running mem=874M(170.8%)
2021-12-12T13:27:14.254036+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)
2021-12-12T13:27:35.021299+00:00 heroku[web.1]: Process running mem=923M(180.3%)
2021-12-12T13:27:35.022699+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)
2021-12-12T13:27:41.252535+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2021-12-12T13:27:41.288420+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-12-12T13:27:41.863714+00:00 heroku[web.1]: Process exited with status 137
2021-12-12T13:27:41.912756+00:00 heroku[web.1]: State changed from starting to crashed

My package.json is:

{
  "name": "sigevaMantUI",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "engines": {
    "node": "14.x",
    "npm": "6.14.15"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "watch": "ng build --watch --configuration development",
    "prepush": "npm run build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "preinstall": "npm i -g http-server && npm i -g @angular/cli"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular-devkit/build-angular": "~12.1.1",
    "@capacitor/cli": "3.3.2",
    "@ionic/angular-toolkit": "^4.0.0",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor/app": "1.0.6",
    "@capacitor/core": "3.3.2",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/keyboard": "1.1.3",
    "@capacitor/status-bar": "1.0.6",
    "@ionic/angular": "^5.5.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4",
    "typescript": "~4.2.4"
  },
  "devDependencies": {
    "@angular/language-service": "~12.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0"
  },
  "description": "An Ionic project"
}

Procfile :

web: npm run build && npm start

When I execute it in local, it works fine. However, when I push it to Heroku, it tells me that an aplicacion error occurr and I have to put this command "heroku logs --tail" to see the error that I have put before.

Answer 1

There are 2 problems:

• Error R14 (Memory quota exceeded)
• Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

In order to reduce the memory footprint try to remove dependencies which you might not need. If this is not enough you need to debug the code to see where the excessive is allocated and refactor the code

The second error is solved when you bind to the $PORT provided by Heroku