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 (houssein.me/continuous-integration-angular-firebase-travisci).

Angular app (Pokedex)

We will use an existing Angular built app called Pokedex. If you have your own application and you want to use it, that’s completely fine, the steps should be the same. Pokedex is an application where we list the Pokemons and their stats. Application also offers the ability to save pokemons to favourites for easier access (this functionality uses localStorage).

If you intend to use Pokedex app, please fork it on GitHub, so you have your own copy to integrate (github.com/jamzi/pokedexAngular). After forking, clone your repo, make sure to have latest Angular CLI installed () and then just run to install the packages. Run ng serve and your app should serve on .

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

Travis CI

We will first take care of Continuous Integration using the Travis CI, which connects to GitHub repositories out of the box. Navigate to () and sign in with your GitHub account. Navigate to your profile and you should see a list of your public repos from GitHub and find the (or your repo)and enable CI. If you don’t see your all repos then manually sync with a big in the top right corner.

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 file there and paste this snippet in.

language: node_jsnode_js:   - “7”
branches: only: - master
before_script:
- npm install -g @angular/cli
script:
- 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.

Firebase

We will use the Firebase hosting, which is free for smaller web apps. The first step for us is to log into Firebase Console (console.firebase.google.com) and create new project, let’s name it .

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

Navigate to project folder and run, 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 , 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: and running the deploy with: 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: . 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 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 in the section and in the section under script.

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

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

Greenkeeper

Greenkeeper is a automated dependency management tool, which will help you update your NPM packages and build process. You can add it to GitHub repository simply by enabling Greenkeeper GitHub integration (https://github.com/integration/greenkeeper) and selecting on which repos do you want Greenkeeper.

After enabling Greenkeeper, it will create an initial Pull Request to update package.json packages and add badge to README.md 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