Build a Bitbucket CI/CD with Angular and Firebase

How to fully automate your Firebase deployment with your Firebase token and credentials

Photo by Courtnie Tosana on Unsplash

It can be very frustrating to accidentally push credentials to a public repository or forget the commands to build and deploy a project after months not working on it. It’s part of the reasons why a CI/CD can be your best friend!

CI/CD (Continuous Integration/Continuous Delivery) allows us to release our code frequently and in a sustainable way. The CI is running a series of commands, also called pipeline, triggered by one or more repository branches. This pipeline can integrate all kinds of actions but is mainly used to run the tests, build the project and create an artifact (a version of the website). The CD is used to deploy this artifact.

I will assume you already created an Angular project linked to Firebase as well as a Bitbucket repository.

In this article, we will go through a CI/CD configuration built with Bitbucket Pipelines, used for Angular and Firebase, all hosted in a Bitbucket repository.

So, how do I configure my Bitbucket CI/CD with Firebase?

Although this may seem like a complicated process, there are only three files with which we are going to work. We will need to update environment.prod.ts and package.json from our Angular project. In addition, we are going to create a file named bitbucket-pipelines.yml through the Bitbucket Server platform. That’s it!

Angular Configuration

Our main goal here is to create our deployment configuration and replace our credentials with some variables to ensure confidentiality.

First, we are going to modify our environment.prod.ts by replacing the Firebase configuration with variables that will be substituted in our Bitbucket pipeline later.

Then, we need to create new deployment scripts (build-prod and deploy) in our package.json that will be used in our pipeline later.

Note, we introduced $FIREBASE_TOKEN and $FIREBASE_PROJECT_ID which will be defined later.

Finally, we need to push our code to our git repository. This tutorial will assume that your code is pushed to the master branch.

Bitbucket Configuration

All that remains is to create our pipeline (YAML file) and create our variables. First, we will connect to our Bitbucket repository website and create our pipeline.

Bitbucket Pipelines menu

In your repository screen, select Pipelines from the menu. If this is the first time you are setting up a pipeline, you will need to select JavaScript as the language template.

Great! Now we have our YAML file (.yml) that will contain all the commands we are going to run in our pipeline. This is default file we get:

Next, we will update our YAML file and add our Firebase configuration.

Here we are! Let’s see what we have; our pipeline is going to run on master and execute one step named Firebase production development. In the script section we will replace every variable in environment.prod.ts with our credentials using the sed command. We are going to create these variables at the end of the tutorial.

Once we have replaced variables, we will add the command to install our npm packages, build the project and deploy it.

These 5 new lines will :

• Install our npm packages (using npm install)
• Run lint to find potential problem in our code
• Run test to verify our code is working as expected
• Build our project with the command build-prod (that we created in our Angular project’s package.json)
• Deploy the project to Firebase with the deploy command (also created in Angular)

Finally, we are going to create all our variables in Bitbucket.

Bitbucket Variables menu

On the right of the YAML editor, click on the Variables button and then add all the variables we introduced before without the ‘$’ sign and assign them their values.

To get your Firebase token you can run this command in the app terminal : firebase login:ci

Then click on the Commit button to save all our changes.

And you are done 👏

Bitbucket Pipelines log

Now, on every push to master, our pipeline will build and deploy our Angular application. And we didn’t need to check our Firebase configuration, neither our lint, test, build and deploy commands!

I hope you enjoyed this tutorial. If you have any questions or suggestions, please leave a comment below.