I recently put together a simple but effective pipeline for creating a continuous integration pipeline for a Dockerized Angular (2+) Application. Six months ago if the words docker, Travis, nginx, heroku etc… were mentioned I wouldn’t have a clue what was going on but Lesson’s have been learned and I feel this may be helpful.

What you are going to need for this is a GitHub Account, Heroku Account and a Travis Account. Start by creating a new Git repository (or use an existing one). Then create a new app on heroku and finally sync your Travis CI Account with your git account and turn on the repository you wish to use.

I generated the Angular Application using the Angular CLI.

ng new myangularapp

To start with, below is the Dockerfile I used. I use a node image as a builder and an nginx image to serve the app. As you will see the CMD is to a entrypoint script (sidenote: I used CMD over ENTRYPOINT as heroku didnt seem to like the latter) and this is so we can use a small script to inject the environment variable $PORT that heroku provides into the nginx configuration and then run nginx.

And here is the entrypoint.sh….

And then the nginx.conf…

almost there…. here is the docker-compose.yml

Nothing too special other than the injection of the heroku port number into nginx with the above files. I have also provided the PORT env within the docker-compose to ensure no issues with local deployment.

Finally we add a .travis.yml as follows…

A quick run through of what we are doing above is the following:

We define the programming language as node

We include google-chrome for testing purposes

We add Docker and docker-compose

We run our tests

We then login to heroku’s docker hub using environment settings and then push if we are building the master branch.

You will need to set the environment variables for heroku login on Travis you can do this in the settings on Travis within the repository, in this case HEROKU_DOCKER_USERNAME & HEROKU_AUTH_TOKEN. The username is simply your heroku login, and you can get your heroku auth token by logging into heroku via the CLI and doing the following command heroku auth:token

I was quite surprised with how easy it is to use Docker with Heroku by simply pushing to the heroku Docker registry with your app name like the following.

docker push registry.heroku.com/<app-name>/web

This has been my first attempt at writing an Article and sharing some knowledge so I hope it makes sense and hopefully helps someone looking to do something similar.

See my full demo here at

and here is the heroku https://adam-myangularapp.herokuapp.com/