Hosting an Angular Application on Heroku

Heroku is an excellent service to host an application in the cloud without the overhead other cloud service providers frequently need. While it offers native support for NodeJS, it takes a little extra effort to host a static web application, like one made with Angular. Here, I’ll go through the steps needed to host your Angular application in Heroku and enable automatic deploys through GitHub integration.

Prerequisites

This post assumes the reader is familiar with NodeJS and Angular and has NodeJS and the Angular CLI installed. For help setting up these prerequisites, see the NodeJS and Angular CLI documentation.

Setting up an Angular Application

In this step, we will use the Angular CLI to set up a basic Angular application project. If you already have a project ready to go and in GitHub, you can skip to the next section.

Navigate to the directory you would like your project to be located in your terminal, and then enter this command ng new angular-app-in-heroku. You will be prompted with a series of questions; answer them however you would like, except for the second question. For that question, you should answer “yes” to enable Angular routing. After the CLI completes its process, you will have a fully operating Angular application. You can test it out by stepping into the project directory cd angular-app-in-heroku and then running ng serve.

Before we move onto the next step, let’s get our code into GitHub. Head over to GitHub, log in (or create an account if necessary), and create a new repository. You will want to leave all the options below “Initialize this repository with” unchecked. You can then follow the instructions for pushing to an existing repository on the next screen. Now that we have our project setup and a repository in GitHub, we are ready to move to the next step.

Adding Express to Serve the Application

As I mentioned earlier, Heroku offers support for NodeJS, so we can use Express to serve up our Angular application. Let’s start by adding Express and Path to our project: npm i express path.

Next, we will create a small Express application that will serve the static files generated during the build process by the Angular CLI. In the root of the project directory, create a file called server.js and add the following code:

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

const app = express();

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

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

We now need to adjust where Angular outputs the build of the project. At the root of the project, you will find a file called angular.json. Inside this JSON file, locate the outputPath property at projects -> {project-name} -> architect -> build -> options and set it to dist.

Updating the NPM Scripts

By default, when Heroku deploys a NodeJS application, it will run a set of npm scripts to build and start the application. The scripts we care about are run in the following order:

  1. npm install
  2. npm build
  3. npm start

Inside the package.json file, you will notice that Angular already has set the build script to run ng build. This script will have the Angular CLI build our project and output the contents into the dist directory. You will also notice that the start script has been set to run the ng serve command. While this works great on our local machine, this won’t work in Heroku. However, this is where our Express server comes into play. Change the start script to node server.js. Now, when Heroku runs npm start, it will start up our Express server, which is set up to serve our static files generated during the build process.

Setting Up and Configuring Heroku

Head over to Heroku and log in, or create a free account. From the dashboard, click on “new” in the upper right-hand corner and select “Create new app.” Enter an app name and click “Create app.”

On the next screen, set the deployment method to GitHub. Sign in to GitHub, search for your project, then click “connect.” A new section, automatic deploys, should appear below. In this section, select your branch, then click “Enable Automatic Deploys.” Every push made to this branch will now trigger a deployment in Heroku.

Next, go back to our Angular project and then commit and push our changes made in the previous step. Back in the Heroku dashboard, navigate to the overview section. On the right-hand side is the latest activity; notice that a build has already started. You can click on “view progress” to see your build in action. It may take a few minutes, but you should eventually see something like the following in the logs:

Launching...
Released v3
{URL} deployed to Heroku

Hosting an Angular Application on Heroku – Complete!

Your Angular application is now running on Heroku! Click “Open App” in the upper right-hand corner to go to your live app.