Encountering a Npm ERR! when deploying Angular 6 to Heroku due to missing Start script

Question

Encountering a Npm ERR! when deploying Angular 6 to Heroku due to missing Start script

I am experiencing an issue with my simple angular 6 app after deploying it to Heroku. When I check the logs using the command heroku logs, I encounter the following error:

2018-07-15T00:45:51.000000+00:00 app[api]: Build succeeded
2018-07-15T00:45:53.901220+00:00 heroku[web.1]: Starting process with command `npm start`
2018-07-15T00:45:56.221740+00:00 heroku[web.1]: Process exited with status 1
... (error log continues)

Inspecting my package.json file, I have defined the "start" script as "ng serve". Here is a snippet of my package.json:

{
  "name": "product-client",
  "version": "0.0.0",
  ... (dependencies and scripts continue)
}

In addition, my Procfile specifies the worker as ng serve. The directory structure of my project looks like this:

└───src
    ├───app
    │   ├───app-routing
    │   ├───product-detail
    ... (directory structure continues)

Note that my application is a basic Angular landing page without any REST API integration.

Question:

What could be causing the error in deployment on Heroku despite the code working fine locally?

javascript angular typescript heroku npm

Answer 1

Answer №1

If you want to run your application, you will need to set up a Server locally. Normally, we use ng serve from the terminal to launch our application on the local browser. However, in order to have a production-ready app (from the dist folder created) that is lightweight and loads quickly, we must establish an Express server.

To install the Express server, execute the following command:

npm install express path --save

Create a new file named server.js at the root of your application and insert the following code:

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist'));

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

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

Update the start command Edit the "start" command in package.json to node server.js so it looks like this:

"start": "node server.js"

Your complete package.json should resemble the example below. Your file may include more entries depending on the specific packages your application requires.

Here is how your package.json should appear after making these changes:

{
  "name": "product-client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "grunt sass:production && ng build --aot --prod",
    "start": "node server.js"
  },
  "private": true,
  "dependencies": {
    // list of dependencies
  },
  "engines": {
    // specified engines for node version
  },
  "devDependencies": {
    // list of dev dependencies
  }
}

Answer 2

If you want to run your application, you will need to set up a Server locally. Normally, we use ng serve from the terminal to launch our application on the local browser. However, in order to have a production-ready app (from the dist folder created) that is lightweight and loads quickly, we must establish an Express server.

To install the Express server, execute the following command:

npm install express path --save

Create a new file named server.js at the root of your application and insert the following code:

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist'));

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

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

Update the start command Edit the "start" command in package.json to node server.js so it looks like this:

"start": "node server.js"

Your complete package.json should resemble the example below. Your file may include more entries depending on the specific packages your application requires.

Here is how your package.json should appear after making these changes:

{
  "name": "product-client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "grunt sass:production && ng build --aot --prod",
    "start": "node server.js"
  },
  "private": true,
  "dependencies": {
    // list of dependencies
  },
  "engines": {
    // specified engines for node version
  },
  "devDependencies": {
    // list of dev dependencies
  }
}

Encountering a Npm ERR! when deploying Angular 6 to Heroku due to missing Start script

Answer №1

Similar questions

Tips for implementing an element onClick change within a Redux container using React.js

A guide on linking an object in strapi V4 to a React app

Integrate Angular 2 into the current layout of Express framework

Is it necessary for Webpack to process the index.html file for Vue applications?

What is the best way to add a change event to a textarea that is already applied with a filtered one-way binding?

Ways to stop a ngFor loop in TypeScript

Using Javascript to set up a callback that alerts when a script file is done loading with the attributes "async" and "defer"

Transforming HTML features into PHP scripts. (multiplying two selected values)

Is it acceptable to employ async: false when requesting small amounts of data?

Executing TypeDoc on a Windows system results in zero files being created and no error messages reported

The Tools of the Trade: TypeScript Tooling

Transferring values from jQuery AJAX to Node.js

Tips for utilizing modify-json-file with string value as key

Guide on verifying the snack bar's visibility and performing an action in e2e test using Protractor

Embed the website onto a webpage using ajax or an iframe without any need for navigation

Retrieve information from deeply nested JSON and showcase using Vue-Multiselect

You cannot access the property 'subscribe' on a void type in Angular 2

Setting the default date format in dayjs: A quick guide

Lack of MaterialUI Table props causing issues in Storybook

Retrieving JSON data by key through ajax does not show the expected output