Using Travis CI and Heroku to Configure Continuous Deployment for Angular

In this article I am going to be discussing how to configure continuous deployment of an Angular application utilizing Heroku and Travis Cl. In case you are unfamiliar with Continuous Deployment, I am going to begin with a brief definition of that concept.

According to a recent blog post published by Atlassian, Continuous Deployment (CD) is a type of software release that validates codebase for correctness and stability by using automated testing. It ensures that the tested code is ready for release to a production environment immediately. If you’re not satisfied with that brief description of CD, you can find the entire blog post here.

There are a few requirements that will be necessary for our Continuous Development process.

1. You will need to set up accounts on both Heroku and Travis CI. Follow the links to complete this process.
2. Next, you should install Heroku, Travis, and Angular CLIs.
3. Finally, install Ruby, npm, and Nodejs.

To start off the tutorial, we will walk through the installation of each of the programs I mentioned beginning with the easiest, Angular CLI. Open up your terminal and run the following command if you don’t already have the program installed:

$ npm i -g @angular/cli

That part was pretty easy, wasn’t it?

Next, we will be installing Heroku. Heroku CLI requires Git, so before you get started make sure that you have that pre installed on your machine. If you don’t already have it, you can find a Git installation here. There are specific installation instructions depending on your operating system.

If you work on a MacOS:

$ brew tap heroku/brew && brew install heroku

Or Linux:

$ sudo snap install --classic heroku

For Windows users, there is an installer you can download at this link.

Once you think that you have Heroku installed correctly, run the following command so that you can get an output like the one you see here:

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

Following the installation of the CLI, run the login command for Heroku. You should be prompted to strike a key and proceed to the browser to finish the login process. Once this step is complete, the CLI should automatically log you in.

In order for the Travis CLI to load, you need to have ruby version 1.9.3 or later already loaded on your computer. If you’re not sure whether or not you have ruby installed, you can run ruby -v. If you already have Ruby, you should receive an output letting you know exactly which version is currently installed. If you don’t get an output by running the command, then you can download and install ruby at this link. It should now look like this when you enter ruby -v:

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

Next 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.)

Or for Windows:

$ gem install travis

Now run the following command to make sure everything is working up to this point:

$ travis version
1.8.11

As we work through the rest of this tutorial, we will be using each of these installations.

All the pieces are now in place to complete the final steps of the process. I am working under the assumption that you have already installed an Angular application. If you don’t have one yet, you can add one to your terminal by running ng new <app-name> and then cd <app-name>.

Once in your application, go ahead and add the .travis.yml file in the root directory. There should now be a deploy section such as the one you see below:

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

You could use the api_key found in the account settings of your Heroku account to paste into the above command, but for security reasons that would not be a great solution. Because both the Heroku and the TravisCI command line clients are installed, we recommend getting the key and encrypting it prior to installing in .travis.yml. You can run the following command through the project root directory in order to encrypt the key properly:

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

Only changes in the master branch will start a deployment, by default. It is possible though to manually deploy different branches to different applications.

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

A new deployment should now be triggered by TravisCI after each build for the coded branches. Take notice though that Pull requests do not trigger deployments.

To ensure that the application runs smoothly after it is deployed to Heroku, there are a couple more steps we need to complete.

We need to change some things about the package.json file. Heroku will use the node and npm versions, so we need to add the engines field and specify these applications. Run this command to make sure that your machine is running the right versions for your project.

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

Then, include the following as values in the engines field.

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

Finally, adjust the start and build scripts as follows.

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

Once these steps are complete, and the application is deployed, Heroku will run the start script each and every time the app is loaded, so you may see that the start script looks different at this point. Because when we use Heroku, we are using a production server, we can no longer run ng serve. We will instead run the server.js file to funnel our build files to Heroku.

Proceed now to the project root directory and create this file:

Well, that’s it, congratulations! Your Angular application is now ready. By completing this tutorial, you have set up Continuous Deployment (CD) successfully for your Angular work. I hope this blog post was helpful for you. If you need any additional help on this sample application, check out this GitHub repo of a similar application that I referred to while writing this post.

Are you an Angular developer interested in growing your software engineering career Apply to join the Andela Talent Network today.