Deploying Angular To Heroku (Complete Guide)

5 min readSep 19, 2019

Deployment of angular applications to heroku seems so easy to think about until you actually have to try it.

Recently, an angular app was to be deployed to heroku environment for production. While I was searching for the fastest and easiest way to get this done, I found out that some of the resources online didn’t explicitly explain how this is done without any hassle.

Hence, this is a all in one article that will help you and reduce days of research.

Configure Your Angular App to Deploy Properly on Heroku

This is the first step to be done to ensure that deployment on heroku will be successful with no build error.

In your angular app, open Package.json file and add the following:

Under “scripts”, add a postinstall command:

This builds the application using Ahead Of Time (AOT) compiler and makes it production-ready. This will create a dist folder where all html and javascript converted version of the application will be launched from.

Add Node and NPM, Express, Cors engines

The Node and NPM engines that Heroku will use to run your application are to be added. Cors are to be added to prevent cross-origin-error and Express to help run our production files(dist). It should be same version you have on your machine. So, you can run node -v and npm -v to get the correct version and include it in package.json file like so:

Copy some of devdependencies to dependencies

Copy typescript version and other libraries as shown below from devDependencies to dependencies to inform Heroku of what version to use.

Install Server to run your app

Locally we run ng serve from terminal to run our app on local browser. But we will need to setup an Express server that will run our production ready app (from dist folder created) only to ensure light-weight and fast loading.

Install Express server by running:

npm install express path cors --save

Create a server.js file in the root of the application and paste the following code. Ensure your file path is referenced correctly as this is a major reason while most will not run properly when deployed.

My dist file had a file called client-app before I could access the index.html file which is what is going to be run for production.

Change start command

In package.json, change the “start” command to node server.js so it becomes:

"start": "node server.js"

Mine has node app/server.js because my server.js file is in a folder called app

Here’s what the beginning of my package.json looks like. Yours may contain more depending on your application-specific packages.

Make few changes to index.html

Remove https: in all cdns in the index.html file to look like this:

Add Procfile to root in folder structure

Procfile specifies the commands that are executed by the app on startup. You can use a Procfile to declare a variety of process types.

Once all this steps are done, you are ready to deploy to heroku.

Push to git

Setup Heroku

If you do not have an account yet, create one on heroku website. Its free. Login to your dashboard and create a new app.

Click on create app

In the Deploy menu, under Deployment method, select GitHub. If you have not done this already, it will ask you to login your github account so it can connect to it.

Enter the name of the GitHub repository and click Search. Once the repo is shown below, click Connect.

Once connected with desired repository, Scroll down and choose method of deployment either manual or automatic deployment which will always deploy that branch anytime a push is done.