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 https://travis-cicd.firebaseapp.com

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.

Cheers!

Angular - function reference

@angular/cli: 8.2.0

This article demonstrates a powerful mechanism (yet well-known, I am sure) to pass on function references while passing data from one component to another.

This mechanism or idea can be quite helpful if you are planning to build re-usable toolbar components for your application. Reusable toolbars perform the same kind of operation most of the time. But what if, for a rare use-case, you want an existing toolbar button to perform slightly differently?

Let us see the setup here. We have an app-component and an app-toolbar component. The app-toolbar takes in an array of elements and renders some buttons with some actions.

With a usual use-case, each button is meant to perform a known action.

So far, nothing defferent from the usual. But let's say, I want to perform a more complex operation during Delete operation, for which it might be difficult to write a reusable piece of code.

For such use cases, I would pass on a method from the calling component, where I have all the logic available. Not just that, I would also have to pass on the AppComponent class reference, bound to the method, so that the correct method from the correct TypeScript class gets executed.

Now when I click on Delete button, I see that my AppComponent class' method gets executed.

You can download the source from GitHub.

Cheers!