Home

Welcome to the angular-travis-ci-heroku wiki!

Angular + Travis CI + Heroku

CI and CD for Noobs

Automation has taken IT industry by a wave. In order to keep us updated on trends in automation arena, let’s get acquainted with so called continuous integration (CI), continuos delivery and deployment.

Among many CI and CD tools, I have chose Travis as CI tool and Heroku as the cloud provider for this blog.

Pre-requisites:

• Github account — (Travis CI currently does not support git repositories hosted on Bitbucket or GitLab, or other version control systems such as Mercurial.)
• Travis CI account — github account can be used
• Heroku account
• Basic idea on Git-cli commands.
• Angular 4 seed , NodeJS and npm

Let’s Begin

Follow the angular quick start guide and create a local development environment for angular application, which will be deployed in heroku using Travis CI.

After downloading the quick start example. create a repository in github.com and commit the code to the newly created repository. we shall use this repo to configure CI in Travis.

In my case I have created a repo as “angular-travis-ci-heroku”. Click the link to visit the repo page.

GITHUB Repository

Now that we have our code in Github, lets go ahead and configure Travis.

Travis CI

Log in to Travis CI with Github credentials to sync Github repos with Travis.On successful login head over to Accounts menu in right top corner.

Account page

Activate the repository for which you would want to setup CI in Travis.

Setting up CI in travis as simple as below

steps to setup CI

Once the repository is activated , Travis checks for .travis.yml file in the linked repository.

Let’s go ahead and create one for our angular (node) application.

.travis.yml

language: node_js
node_js:
- '6'
before_install:
- npm install -g @angular/cli
install: npm install
branches:
  only:
  - master
after_script:
- chmod +x publish-gh-pages.sh && ./publish-gh-pages.sh
deploy:
  provider: heroku
  api_key:
    secure: generate yours using travis cli 
  app: angular-cd-demo

I have selected language as node_js as I have used node server to run the angular application rather than using any web container.

node_js — builds the code in the versions specified here.

**before_install **is a stage in script execution flow which is triggered before the installation phase.In this case I have installed angular cli globally before installing project dependencies. Other commands like apt-get, brew can be used in this section.

install — In this stage we can install our application dependencies. in this case since we are using node server and angular seed manages its dependencies through npm, we run npm install.

after-script — scripts in this phase are executed after the main “script” phase. The main “script” contains the build scripts or business rule checks which are used to decide whether a build is good to be integrated or not.

branches — specify which branch alone needs to be monitored by Travis

Continous deployment

Travis comes with in house support for Heroku as well as other cloud providers(follow the link to explore about other cloud providers).

deploy — This section can be used to configure deployment process.

deploy section requires Heroku api key in order to deploy code in Heroku servers.This can be generated as described in the link.

Let’s configure Travis to trigger a build only if .travis.yml is present and only on push operations.This can be done in the travis configuration section as shown below

Travis build configuration

Voila, done! On every commit to our configured git repository travis would build the code, test it and trigger a deployment on Heroku servers.