Deploy your Angular App to Firebase hosting via BitBucket Pipelines

BitBucket Pipelines — Building, Deploying to Firebase Hosting (pt 2 — Angular App)

This is the second part of the series on deploying to Firebase using BitBucket Pipelines. This article will focus on the Angular app, part 1 was for a static HTML site and can be found here.

In this article, we are going to look at how we accomplished our set up to have a test site and a production site depending on which branch was committed to.

Three Firebase projects?

In total, we have three Firebase projects, one for the landing page hosting, one for the production app, and one for the testing. This may not be the best way to go about it, but it works for our needs at this point. It does ensure, especially from the test and production standpoints, the environments are completely separate.

You can host multiple sites in a single project — and works with hosting, however, at this time you can only have one database per project. Given that we do not have to mix our test and production database we went this way. We could link our static site to our project or test projects — and maybe we will move that in the future.

Migration from Test to Production

One of the great things of a NoSQL database such as Firebase or Firestore there is no need to worry about migrating database structure. As new objects/documents are updated in the storage the structure is then applied. This can include adding or removing fields. Your code will need to handle when a field is not populated or does not specifically exist in the result (i.e. check for nulls).

Setting up your Angular Application Environment.ts

I am assuming you already have a project set up in Firebase and have it configured

If you initiated your project using the Angular CLI, in your src/environments/ folder you should have two files environments.ts and environments.prod.ts. What we need to do is add your Firebase project information for your test and production environments into those files. If it wasn’t obvious — test info in environments.ts and your production into environments.prod.ts.

This is done by navigating to each of your projects, in the Authentication section select Web Setup button.

Firebase console Web setup button

You will be presented with the configuration options you need.

Firebase config

Just select the values under var config = { until };. That can be pasted right into the appropriate environments.ts file. Depending on your linter, you may want to change the double quotes to single quotes to remove any linting errors.

For more in-depth information on using a test or production environment variables, check the documentation on angular.json. To get you started check out this link.

Deploy to Firebase Options

Now that you have set up your development environment set up, let’s ensure we can deploy to the proper environments.

Install Firebase Tools

To do this, we need to install the firebase command line tools. In your project directory run the following command:

$ npm install -g firebase-tools

That will install the command line tools.

Next, you want to log in so that you can initialize your project by running the following command:

$ firebase login

That will open a browser window you log in with your Google account that is tied to your firebase console.

Firebase login with your Google creds

Upon a successful sign on, you should be prompted with this window:

Successful login via browser

and in your terminal:

Initialize your Firebase project

Now that you have successfully logged in, let’s initialize your project. This is done by running the following command:

$ firebase init

You will then be prompted with a series of questions.

1. Confirm project directory

2. Which services do you wish do you deploy. Because we are only focusing on hosting at this point, we use the arrow keys down to Hosting and press the space bar. Pressing enter you should see the following:

Hosting selected

3. Default Project. Here will scroll through the list and find your project. However, we have two projects? Can we have a default? Don’t worry, simply select don't select a default project. We will tell the firebase cli which site to deploy too based on the command line options.

Don’t select a default project

4. The next question is setting up your public directory. This is your distribution folder. To find out what your distribution folder is, check out your angular.json file. You will see several lines that look like this:

outputPath

What you are looking for is the outputPath value. This is where the builder will put the compiled code in. In this projects case it is dist/test-project. Enter the value from your angular.js file.

5. Single page app? — Yes.

Final options completed!

That will create the two files read by the Firebase CLI — firebase.json and .firebaserc.

Firebase Token

Now that we have logged in, we can now create a firebase token. If you already did this in the previous article, you can reuse that and you don't need to create a new one.

$ firebase login:ci

Once a token has been generated, you will see this in your console with the token following the :.

✔  Success! Use this token to login on a CI server:

Copy and save that token so we can add it to your pipeline variables in BitBucket.

Testing your deployment

First, we will need to build our project. This is done by entering the following in a terminal window:

$ ng build

So now let’s test out before we deploy by typing the following in your terminal :

$ firebase deploy --project your-firebase-projectname --non-interactive

In the your-firebase-projectname you will need to enter your Firebase project for your environment you want to test deploy to. You may be asked to login if required.

Once you receive a notice you have deployed successfully, you can go to your firebase console, and you should see that the deployment under the Release History section of the hosting options.

You can test the deployment by going to any of the URL’s in the domain section. You should see your site there.

Pipelines build script

Now that we have successfully deployed our project, we need to create our bitbucket-pipelines.yml file. If you are not familiar with Bitbucket pipelines — and the bitbucket-pipelines.yml file, review the previous article in the series.

This the file in its entirety :

image: node:8.12.0
pipelines:
   branches:
      master: #master branch
      - step:
         deployment: production
         caches:
         - node
         script:
         - npm install
         - npm install -g @angular/cli
         - npm install -g firebase-tools 
         - ng build --prod
         - ls -laR ./dist #recursively list directories
         - firebase deploy --token=$FIREBASE_TOKEN --project your-prod-firebase-projectname --non-interactive
      develop: # develop branch 
      - step: 
         deployment: test
         caches:
         - node
         script:
         - npm install
         - npm install -g @angular/cli
         - npm install -g firebase-tools 
         - ng build
         - ls -laR ./dist #recursively list directories
         - firebase deploy --token=$FIREBASE_TOKEN --project your-test-firebase-projectname --non-interactive

Branches:

Key items in the include the declaration of the branches: line. I have two branches defined master: and develop:. These are the actual branch names that when a commit is completed or merged into those branches (not sub-branches) then the pipeline is fired.

npm install and npm install -g @angular/cli

We did not add those in the previous article as that was a static HTML site and therefore no need to compile. In this project, we have to compile our project. These tools will ensure the latest modules are loaded on the docker image and that we can actually compile.

This is where the cache command is very important. You are billed monthly based on the number of minutes the pipeline runs. By using the cache directive, only the first run, will populate the cache. Any further changes will be incremental and thus saving time and therefore money.

ng build and ng build — prod

For the master branch, we want to ensure we use the --prod flag on the build command so that we can ensure the proper enviroments.ts file is used.

ls -laR

This command was added for troubleshooting. This way you can see what files were generated in the /dist folder. The output is saved in the pipelines log.

A snipped output would look something like this:

the output from ls -laR

Enable Pipelines

Ensure you have enabled Pipelines on your Bitbucket project.

To do this, go to your Project Settings -> Pipelines -> Settings.

Enable pipeline settings

Commit to your branches

Commit the bitbucket-pipelines.yml file to your master and develop branches. Now BitBucket will monitor for commits and run your appropriate pipeline script based on the branch.

Firebase Token

Now we get to use that token you created above. Go to the Repository Variables link in your project and in the Name box enter: FIREBASE_TOKEN and in the Value box paste in your token.

You can use the same token for both your production and development projects.

Test

Now, just do a commit to your develop and master branch and watch your pipeline work and deploy.

Happy Automation!