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.
- You will need to set up accounts on both Heroku and Travis CI. Follow the links to complete this process.
- Next, you should install Heroku, Travis, and Angular CLIs.
- 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
$ 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 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]
On OSX and Linux:
$ gem install travis --no-rdoc --no-ri
(For older versions of
gem, replace –
Or for Windows:
$ gem install travis
Now run the following command to make sure everything is working up to this point:
$ travis version
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
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:
secure: "YOUR ENCRYPTED API KEY"
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.
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
Then, include the following as values in the
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.