Deploying for free an Angular Application to Heroku
Tags: Angular, JavaScript, Deployment, Heroku, Github

Prerequisites

In this article, we will not talk about how an Angular application is composed, what are the startup phases (of which you could read something in my previous article here) or what potentially we could achieve.

All these steps will be bypassed, taking advantage of the starter template of the framework to quickly have a working application that we can deploy on Heroku without having to think about development at this time.

A new project

First, let’s make sure we have the latest version of Angular CLI installed on our local machine (At the moment I am writing, the current version is 10).

$ npm install -g @angular/cli@latest

After installing the CLI, we can finally proceed by creating a new project through the command:

$ ng new demo-deploy

At this phase, you will be asked whether or not to accept Angular routing and as far as style sheets are concerned, you can accept what you prefer. For the purpose of the goal, they are less important.

Let’s launch the app that we called “demo-deploy” to see that it is working:

$ cd demo-deploy

$ ng serve

and navigate to the address: http://localhost:4200

Angular starter template

A new GitHub repository

In order to create a new repository on Github from a pre-existing project, you need to access GitHub and log in (if you have not yet created a user on GitHub, you must do in order to continue with the exercise).

Create a new repository and in the “Repository name” field let’s type demo-deploy. It is convenient not to add any files at this phase as it could generate errors with pre-existing files in the project.

You can safely add them later.

new GitHub repository

At this point, go back to your local terminal and make sure you are in the folder of your demo-deploy project.

$ git init -b main

$ git add .

$ git commit -m "First commit"

Now, go back to your GitHub project and get the remote repository URL

Github project page

and use it in order to link the project to the remote one:

$ git remote add origin <remote_repository_URL>

$ git remote -v

$ git push -u origin main

Now, doing a page refresh, you will see the project loaded on GitHub

Heroku

Documentation:

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud

Therefore, in order to finally deploy our app on this platform, we will have to create a new free account and then proceed with the creation of a new app.

Let’s call the app for convenience in the same way as our project on GitHub (having the same name is not necessary) and choose the region we prefer.

New Heroku app

Now, among the operations that this platform allows us to do, there is the connection between the GitHub account and the Heroku’s one in such a way as to be able to directly upload the project and possibly carry out automatic deployments.

Heroku Dashboard

Now the steps become very mechanical, in fact, after connecting the account with GitHub, we will have to search for the repository in the “Connect to GitHub” section as you can see in the following image:

Connect to GitHub section

After identifying the specific repository of our project, all we have to do is select the branch on which we want to start the build, and enable the automatic deploys so that when we push on GitHub, Heroku will automatically update the build in an all-free (convenient isn’t it ?!).

Deploy Section

Let’s start the manual deployment and wait, the operation may take some time.

At the end of the operation we will see a screen similar to the next one:

Manual deploy section

Changes to the project

When we get to the point where our project is configured, all we have to do is prepare our project for the production build.

How?

Simple, just go to the package.json file and create the postinstall script, so that under the “scripts” field we will have something like this:

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e",

"postinstall": "ng build --aot --prod"

}

N.B. if there are any problems in the build phase, replace the “postinstall” command with the following:

"heroku-postbuild": "ng build --prod"

in such a way that we delegate to Heroku the task of compiling the application using the AOT compiler and making it ready for production.

The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser

At this point the compiled version is present in the “dist” folder, from which the application is then launched.

Directions to Heroku

In order for Heroku to know which version of Node and Npm to use for our application, it is necessary to specify the versions in the package.json and it would be smart to use the same versions we have on the local machine, so as to have two environments consistent with each other.

To check the version:

$ node -v

$ npm -v

and now, add them to package.json

"engines": {

"node": "10.16.0",

"npm": "6.9.0"

}

Finally, let’s install under the dependency array:

Typescript:

$ npm install typescript --save

Enhanced Resolve, that is like webpack

$ npm install enhanced-resolve@3.3.0 --save-dev

Last step: the server

Since on our local machine we run the ng serve command to start the application on the browser, in production we need to install express which runs our application pointing directly to the distribution folder.

$ npm install express path --save

Express is a light-weight web application framework to help organize your web application into an MVC architecture on the server side

— — —

The path module provides utilities for working with file and directory paths

Now, let’s create a new file named server.js on the root of our project and copy the following code:

//Install express server

const express = require('express');

// Requirement of path Module in order to manage URLS

const path = require('path'); const app = express(); // Serve only the static files form the dist directory app.use(express.static(__dirname + '/dist/demo-deploy')); app.get('/*', function(req,res) {

res.sendFile(path.join(__dirname+'/dist/demo-deploy/index.html'));

}); // Start the app by listening on the default Heroku port

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

Start the application

The last thing left to do is change the “start” script to the package.json

"start": "node server.js"

and, by pushing the changes made, Heroku will automatically deploy our application.

$ git add .

$ git commit -m 'deploy updates'

$ git push

Therefore, let’s access the Heroku dashboard in the “Overview” section and we can see the status of the deploy started automatically in the “Latest activities” list.

Once the build is finished we just have to click on “Open app” and that’s it.

Conclusions

This guide is a way to demonstrate the simplicity with which it is possible to deploy an application in a short time and in an extremely simple way. However, Heroku provides even more advanced tools at moderate prices than the competitors if you have no special needs.