Continuous everything with Angular, Travis CI, Firebase and Greenkeeper
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 (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
We will first take care of Continuous Integration using the Travis CI, which connects to GitHub repositories out of the box. Navigate to (travis-ci.org) 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 pokedexAngular (or your repo) and enable CI. If you don’t see your all repos then manually sync with a big Sync account button 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 .travis.yml 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 pokedexAngular.
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
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:
