README.md

Angular 4 and Heroku

This blog post is a gluing of the following 2 posts that walk through how to setup heroku with Angular 2. Deploy Angular CLI WebPack Project Heroku and Angular CLI Deployment

First, generate a new project.

ng new yoloswag

Change to the yoloswag folder:

ng new yoloswag

Update package.json

Adjust package.json to include the postinstall set to build in production mode:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
     "postinstall": "ng build --aot -prod"
  }

Make sure the build works and doesn't show any errors:

ng build -aot

For heroku to work, we'll need to move the following two packages from devDependencies to simple dependencies in package.json.

    "@angular/cli": "1.0.3",
    "@angular/compiler-cli": "^4.0.0",

Setup Express Server to Serve /dist

Add express to the project. The process of building our project populates the dist folder with production optimized files. Our express server will just need to serve up the files in that folder. Install and save express as a dependency:

npm install --save express

Call it server.js:

// server.js

const express = require('express');
const app = express();

// Run the app by serving the static files
// in the dist directory

app.use(express.static(__dirname + '/dist'));

// Start the app by listening on the default
// Heroku port

app.listen(process.env.PORT || 8080);

Configure and Setup Heroku

Heroku needs to know to use the server. Setup the Procfile to include the following:

web: node server.js

Commit your code.

git commit -am "Prepare for Heroku Deployment"

Setup the heroku app:

heroku create

Push to heroku

git push heroku master

Visit the URL and see the app live: https://nameless-shore-64579.herokuapp.com/