Deploying angular-universal app to heroku

Question

Ive been trying to deploy my angular-universal start application to heroku. I've set up a few things as I normally do with angular node applications but for this I might be doing something wrong.

Here is the error I am getting

2017-12-18T07:16:23.453463+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

But I am dynamically setting PORT.

Here is my folder structure

I believe it may be something wrong with my settings. Package.json

{
  "name": "ng-universal-demo",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "generate:prerender": "cd dist && node prerender",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:prerender:prod": "cd dist/browser && node ./bin/www",
    "serve:ssr": "node dist/server",
    "postinstall": "npm run build:ssr",
    "deploy": "git push origin master && git push heroku master"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cli": "^1.5.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@nguniversal/express-engine": "^5.0.0-beta.5",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "@types/node": "^8.0.30",
    "body-parser": "^1.18.2",
    "cookie-parser": "^1.4.3",
    "core-js": "^2.4.1",
    "cpy-cli": "^1.0.1",
    "express": "^4.15.2",
    "http-server": "^0.10.0",
    "morgan": "^1.9.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.5.2",
    "ts-loader": "^2.3.7",
    "typescript": "~2.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {}
}

Bin

var app = require('../server');
var debug = require('debug')('test:server');
var http = require('http');

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

var server = http.createServer(app);

//models.sequelize.sync({alter: true}).then(function() {
  server.listen(port, function() {
    console.log('Express server listening on port ' + server.address().port);
    });
  server.on('error', onError);
  server.on('listening', onListening);
//});




function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}


function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

And server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import * as cookieParser from 'cookie-parser';
import * as bodyParser from "body-parser";
import * as logger from 'morgan';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const DIST_FOLDER = join(process.cwd(), 'dist');

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.use(logger('dev'));

app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({extended: true}, {limit: '50mb'}));
app.use(cookieParser());

/* - Example Express Rest API endpoints -
  app.get('/api/**', (req, res) => { });
*/

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y'
}));

// ALl regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});


module.exports = app;

Aside from the bin setup Ive used everything the repo started with. Not sure what I have to do in order to get it deployed on heroku

Answer 1

"ng": "ng",
"start": "npm run serve:ssr",
"build": "npm run build:ssr",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "ng run universal:serve-ssr",
"serve:ssr": "node dist/universal/server/main.js",
"build:ssr": "ng build --prod && ng run universal:server:production",
"prerender": "ng run universal:prerender"

use this change start and build script

Answer 2

I see your using the Universal Starter repo. I took the same repo and made some adjustments to it to get it working with Heroku no problem.

I documented those changes on Medium and published the edited repo on GitHub

I hope either of those are helpful - I've been running my Universal app with no problem, now