Problem deploying Angular + Node with Heroku

Question

I struggle deploying my node.js(TS)/angular app with heroku.

When I try to deploy it on git with git push heroku master, every step go fine until the heroku-postbuild one.

Hence, it returns the following :

Generating browser application bundles (phase: setup)...
remote: An unhandled exception occurred: ENOENT: no such file or directory, lstat '/tmp/build_24879b07/front/node_modules'
remote: See "/tmp/ng-REYivA/angular-errors.log" for further details.

My project architecture is...

Project
|
|-- api/...
|-- front/...
|-- package.json
|-- ...

...which might cause some problems.

In addition, here are the most probably concerned files :

./package.json

{
  "name": "mymusicads",
  "scripts": {
    "heroku-postbuild": "cd front && ng build --configuration production",
    "start": "cd api && npm run start"
  },
  "engines": {
    "node": "16.x",
    "npm": "7.x"
  },
  "dependencies": {
    "@angular-devkit/build-angular": "^12.2.12",
    "@angular/cli": "^11.2.13",
    "@angular/common": "^11.2.13",
    "@angular/compiler": "^12.2.12",
    "@angular/compiler-cli": "^11.2.13",
    "@angular/core": "^11.2.13",
    "@angular/platform-browser": "^11.2.13",
    "rxjs": "^6.6.7",
    "typescript": "^4.3.5"
  }
}

./api/index.ts

import express, { Request, Response } from 'express';
import * as dotenv from 'dotenv';
import path from 'path';
import { adDataRoutes } from './app/routes/ad-data.route';
import { errorHandler } from './middleware/error.middleware';
import { notFoundHandler } from './middleware/not-found.middleware';

dotenv.config();

const app = express();

app.use(express.json());
app.use('/api/addata', adDataRoutes);
app.use(express.static(path.join(__dirname, 'mymusicads', 'dist', 'front')));

app.use(errorHandler);
app.use(notFoundHandler);

app.get('/', (req: Request, res: Response) => {
  res.sendFile(path.join(__dirname, 'mymusicads', 'dist', 'front', 'index.html'));
});

app.listen(process.env.PORT || 3000, () => {
  console.log(`Listening on port ${process.env.PORT || 3000}`);
});

./front/angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "front": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "10kb",
                  "maximumError": "20kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "front:build",
            "proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "front:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "front:build"
          }
        },
        "test": { [...] },
        "lint": { [...] }
        }
      }
    }
  },
  "defaultProject": "front"
}

From what I understood, the problem come from my api/index.ts file, I may not be targeting the right path with res.sendFile(path.join(__dirname, 'mymusicads', 'dist', 'front', 'index.html')).

Thanks !

Drenai · Accepted Answer · 2021-11-02 22:58:44Z

1

Can't recall if I ran into the same issue exactly, but had a different setup. In front folder I had a package.json specifically for Angular app - basically the default Angular CLI setup

Top level package.json had very few dependencies (if any), mainly scripts (client folder where you use front). For prebuild, run npm install in client folder, and npm run --prefix client build -- -- prod

For the server:

// Static files
app.use(
    express.static(path.join(__dirname, '../client/dist/my-app'), {
        maxAge: '1y',
    })
);
// Angular app
app.get('*', (req, res) => {
    res.sendFile(
        path.join(__dirname, '../client/dist/my-app/index.html')
    );
});

edited Nov 2, 2021 at 22:58

answered Nov 1, 2021 at 22:57

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Denis Lebon Over a year ago

Hello Drenai, That's interesting ! I think you put the finger on something important here, my static folder may not exist. I changed the path for it to match my app (eg __dirname/../../front/dist/front), but I actually realize the problem may be somewhere else. The error being ENOENT: no such file or directory, lstat '/tmp/build_24879b07/front/node_modules' , it seems that heroku doesn't find the node_modules folder in my front app... Do I forgot something about that ?

Denis Lebon Over a year ago

I think it was that ! I added npm install && before my build instruction in front package.json, it seems to have unlocked the situation. I'll keep investigating this ASAP, another error rose about bad version of @angular/compiler-cli.

Drenai Over a year ago

Ah cool, nice one👍

Denis Lebon Over a year ago

Indeed, I forgot the prebuild phase ! But double checking the static destination as firstly mentioned surely avoided me some errors after prebuild. Thanks !

Collectives™ on Stack Overflow

Problem deploying Angular + Node with Heroku

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related