Thursday, 23 January 2020

Firebase hosting and functions with Travis

@angular/cli: 8.2.0
Source: GitHub

This is a short article which describes the steps to automate the deployment process of your Angular application to your firebase project, using Travis.

Application deployed at

There are a few pre-requisites to understanding this flow:
1. You have a firebase project created.
2. You have created a firebase token required for Travis to identify your firebase project. You may refer to this document to create the token. This token should be added to the Travis project.

The aim is deploy the application (via hosting) and the functions to the firebase project. However, the important point to note here is: the angular project and the functions folder each has a separate package.json file. This means that each folder should have a separate node_modules folder.

The before_script hook navigates into the functions folder and performs "npm ci". It also installs firebase-tools globally so that the firebase commands can be used for deployment.

The script hook performs the build for both the functions and the angular project. After the before_script hook, we are in the functions folder. Once the lint and build of functions is done, we navigate to the parent folder and perform the angular build.

These processes are configured to run only on the master branch. No activities occur when you commit changes to any other branch.

The deploy hook performs the actual deployment of the functions and hosts the build angular application to the firebaseapp. Travis ensures that this hook is NOT fired when it checks a pull request. This hook is fired only when a pull request is merged with the master branch.

Let's see a demo with a branch pull request and a master-merge.

When I make a change to a branch and raise a pull request, Travis fires a build for sanity check.

Now when I merge this pull request into master, another build triggers which eventually also performs the deployment tasks.

And that is all.