Easy Continuous Delivery with Travis CI and Firebase hosting
Tags: tutorial, firebase, travisci
Published: 2020-07-05 13:56:29

Continuous delivery with Travis CI and Firebase hosting. It's as easy as 1, 2, 3.

## 1. Select the repository you want to use with Travis CI.
Click on your profile picture in the top right of your [Travis Dashboard](https://travis-ci.com/dashboard), click Settings, and toggle the repositories you want to use with Travis CI. [See the docs.](https://docs.travis-ci.com/user/tutorial/#to-get-started-with-travis-ci-using-github)

## 2. Add your Firebase CI token to your environment variables
On your command line install Firebase CLI, initiate your project and generate a CI token, like so:

```bash
# Install the CLI
npm install -g firebase-tools

# Run this command from your app’s root directory
firebase init

# This will print out a new access token 
firebase login:ci
```

Then go to your repository settings in Travis CI: [Dashboard](https://travis-ci.com/dashboard) > menu icon of the repository > Settings.

![Settings option in menu](https://i.imgur.com/FfzluiK.jpg "Settings option in menu")

In the Settings page, add a new environment variable called FIREBASE_TOKEN with the access token you just generated on the command-line as the value and be sure to leave "Display value in build log" turned off since your token should be stored securely.

![Adding a new environment variable](https://i.imgur.com/dZgELhl.jpg "Adding a new environment variable")

## 3. Add a `.travis.yml` file to your repository
Create a `.travis.yml` file with these two commands in an appropriate [phase](https://docs.travis-ci.com/user/job-lifecycle/).

```yaml
  - npm install -g firebase-tools
  - firebase deploy --token "$FIREBASE_TOKEN"
```

Here's a complete example of a simple an Angular CI/CD pipeline.

```yaml
dist: trusty
sudo: false

language: node_js
node_js:
  - "10"

addons:
  chrome: stable

cache:
  directories:
     - ./node_modules

install:
  - npm install

script:
  - npm build
  - npm run test -- --no-watch --no-progress --browsers=ChromeHeadless


after_success:
  - npm install -g firebase-tools
  - firebase deploy --token "$FIREBASE_TOKEN"
```

Push a commit with your `.travis.yml` and the files generated by `firebase init` to your remote and that should be enough to kick-off your build and deploy your app to Firebase.


## Context
I want to finish up explaining why I wrote yet another Travis CI + Firebase hosting post.


While setting up continuous delivery of my Angular app I had a very hard time using the [Travis CI Firebase Deployment provider](https://docs.travis-ci.com/user/deployment/firebase/).

Firstly, I couldn't get the Travis CLI to work on my Mac due to annoying Xcode and command-line tools related errors like this one:

```bash
dyld: lazy symbol binding failed: Symbol not found: _ffi_prep_closure_loc
  Referenced from: /Users/toure/.rbenv/versions/2.6.0/lib/ruby/gems/2.6.0/gems/ffi-1.13.1/lib/ffi_c.bundle
  Expected in: /usr/lib/libffi.dylib
```

After googling 'dyld: lazy symbol binding failed: Symbol not found: _ffi_prep_closure_loc' and going through issues and Stack overflow answers about updating my Xcode tooling and whatnot, to no avail, I gave up on trying to add an [encrypted firebase token](https://docs.travis-ci.com/user/deployment/firebase/#generating-your-firebase-token) to my `.travis.yml`.

I then added the token to my environment variables and tried to keep using the Travis CI Firebase provider, but even though I could print and see the token in the pipeline, I couldn't get authentication to work. Maybe I wasn't escaping the special characters right or something.

```bash
Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential.
``` 
 

So, I ended up giving up altogether on the Firebase provider and doing it the way I described in this post. Which is actually the same way I do it with other CI/CD tools that I use, like Bitbucket pipelines.

Thanks for reading! Let me know what you think of the post :)