How to set up Continuous Deployment for Angular using TravisCI and Heroku.

In today’s blog post we are going to look at how we can set up continuous deployment for an Angular application using TravisCI and Heroku. But before we get to the good stuff I think it is a good idea to know what Continous Deployment really is.

Well according to Atlassian, Continuous Deployment (CD) is a software release process that uses automated testing to validate if changes to a codebase are correct and stable for immediate autonomous deployment to a production environment. You can find the detailed blog here.

Now that we know what CD is all about, let’s look at the requirements.

1. Accounts on Heroku and TravisCI. Click on the links to create.
2. Installation of the Heroku, Travis, and Angular CLIs.
3. Nodejs, npm, and a Ruby installation.

For this part, we are going to walk through the installation of the various things that are needed, starting with the easiest, the Angular CLI. If you do not have it already you can open up your terminal and run:

$ npm i -g @angular/cli

That was easy, right? 😃

Let’s now move on to Heroku. Before you begin, make sure that your machine has Git installed for the Heroku CLI requires it. You can download and install Git here. The installation varies depending on the OS that you’re running.

MacOS:

$ brew tap heroku/brew && brew install heroku

Linux:

$ sudo snap install --classic heroku

For those of us running Windows, you can download the installer here.

Verify your installations by running this command that produces an output similar to the one shown below.

$ heroku version
heroku/7.39.0 linux-x64 node-v12.13.0

After you have installed the CLI, run the heroku login command. You’ll be prompted to enter any key to go to your web browser to complete the login. The CLI will then log you in automatically.

Great! 👏. Let’s now move on to the next step.

For the Travis CLI, make sure that you have ruby 1.9.3 or later installed on your machine. To find out if you have ruby installed, run ruby -v in your terminal, it should output some information on the installed Ruby version. If not then download and install it from here. If you now run ruby -v it should look like this

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]

Then run:

On OSX and Linux:

$ gem install travis --no-rdoc --no-ri

(For older versions of gem, replace --no-document with --no-rdoc --no-ri.)

On Windows:

$ gem install travis

Now make sure everything is working:

$ travis version
1.8.11

We shall see the use of each of these installations as we proceed with this article.

Now that everything is in place, let’s get started on the final steps of this process. First things first, I’m assuming that you already have an angular application. If you do not have one already go ahead and create it by running ng new <app-name> in your terminal then followed by cd <app-name>.

In the root directory of your application go ahead and add the .travis.yml file. This file will have a deploy section that will look like this 👇

deploy:
  provider: heroku
  api_key:
    secure: "YOUR ENCRYPTED API KEY"
  app: <heroku-app-name>

You can find the api_key in your Heroku account settings and paste it there but we all know that would not be a good idea at all for obvious security reasons. Since we have both the Heroku and Travis CI command line clients installed, we can get the key, encrypt it and add it to our .travis.yml by running the following command in the project root directory:

$ travis encrypt $(heroku auth:token) --add deploy.api_key

By default, only changes to the master branch will trigger a deployment but it is also possible to deploy different branches to different applications.

deploy:
  provider: heroku
  api_key: ...
  app:
    master: my-app-production
    production: my-app-staging

At this point, TravisCI will trigger a new deployment and after every successful build for the specified branches. Please note that Pull requests do not trigger deployments.

Now there are a couple of things we need to set up to make sure the application runs smoothly once it is deployed to Heroku.

In the package.json file, we shall need to add a few things and also change some. Let’s add the engines field to specify the node and npm versions Heroku will use. To check for the versions running on your project run this command.

$ node -v && npm -v
v12.16.1
6.13.4

We then add these as values to the engines field.

"engines": {
   "node": "12.16.1",
   "npm": "6.13.4"
}

Now change the start and build scripts.

"start": "node server.js",
"build": "ng build --prod"

You might notice that the start script looks different now, this is because once the application is successfully deployed, Heroku will run the start script every time the app is started. But since Heroku is a production server we cannot run ng serve , instead, we run theserver.js file which will serve our build files to Heroku.

Now head over to the root directory of your project then create the file.

Congratulations, we have reached the finish line. At this point, your Angular application is good to go. We have successfully set up continuous deployment for your Angular project.

I hope you found this blog post helpful. Here is a link to the GitHub repo of a sample application I used while writing this blog post, you can use it for reference if need be.

Happy coding 💻