Continuous everything with Angular, Travis CI, Firebase and Greenkeeper

Janez Čadež
May 2, 2017 · 4 min read
Image for post
Image for post

Today, we will take a look on how to completely automate your build and deployment steps when developing Angular applications. We will integrate Travis CI and Firebase into our existing Angular project. As a bonus, we will enable Greenkeeper, a tool for automatic dependency management on GitHub.

I would like to thank Houssein for his awesome tutorial on Continuous Integration (

Angular app (Pokedex)

If you intend to use Pokedex app, please fork it on GitHub, so you have your own copy to integrate ( After forking, clone your repo, make sure to have latest Angular CLI installed (npm install -g @angular/cli) and then just run npm install to install the packages. Run ng serve and your app should serve on localhost:4200.

If you will use your app, just create new repository on GitHub and push your app to the repo.

Travis CI

It was that simple, the last step for CI is to add a Travis CI configuration file to our project to tell Travis CI how to prepare environment for our app, on which branches to run CI build and which scripts to run on build.

Let’s navigate to the root of our app and add .travis.yml file there and paste this snippet in.

language: node_jsnode_js:   - “7”
branches: only: - master
- npm install -g @angular/cli
- ng build --prod

We are specifying that we are using NodeJS and installing latest major version, in our case the version 7. We will watch only master branch and before running ng build (production), we are installing Angular CLI.

If you push your new configuration to master branch, the Travis CI should kick in and successfully build your Pokedex app.


Now on our computer, we will install NPM package called firebase-tools, which is a Firebase CLI to deploy apps to hosting, interact with database or set up authentication. Let’s install it by typing npm install -g firebase-tools.

Navigate to project folder and run firebase init, which will generate our Firebase config file. You will be presented with a wizard, hit Y to proceed. For Firebase CLI features, select hosting and select the Firebase project which we setup earlier. Next, the CLI will ask you about Database Rules, we don’t care about that, hit enter. Select only hosting (deselect with space). For the public directory write dist, because our build process will dump the files into dist folder. Lastly, for the rewrites, enter y, because our app is a SPA (single-page app).

Well done, we have completed the Firebase setup. You can test the deployment by building our app with: ng build and running the deploy with: firebase deploy and your app should be deployed to Firebase hosting. Take a note of the url where the app is deployed to. The deploy process will be done later by CI automatically.

To generate Firebase token for Travis CI, open up the command line and type: firebase login:ci . This will output a link you need to click and later you will get your token displayed in the command line.

We will add this token to variable on Travis CI, so our build process will have credentials to deploy to Firebase Hosting. Navigate to Travis, select repository and click on more options — settings. There, under environment variables, add FIREBASE_TOKEN key and your key as a value and click on add.

The last step for us is to modify the .travis.yml file to also enable deploy to Firebase Hosting as a part of our build process. Add npm install -g firebase-tools in the before_script section and firebase deploy — token $FIREBASE_TOKEN in the after_success section under script.

Your final .travis.yml file should look like this:

language: node_jsnode_js:   - “7”
branches: only: - master
- npm install -g firebase-tools
- npm install -g @angular/cli
- ng build --prod --aot
after_success: - firebase deploy --token $FIREBASE_TOKEN


After enabling Greenkeeper, it will create an initial Pull Request to update package.json packages and add badge to file. It will automatically trigger the CI process and if everything went ok and the checks are all green, you can merge this PR into master.

Further, Greenkeeper will watch the NPM registry for our packages from package.json file. When the new version is published, Greenkeeper will open a Pull Request with the updated package. If there would be a problem, it will open an issue on GitHub.

Youtube screencast:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store