I want to share a trick where you can deploy GitHub source code to Firebase application using Travis CI, although GitHub pages can also be used to host static web page with limited functionality using Jekyll but with limited plugins supported. As an example, we will be using Wintersmith static page generation tool for our Firebase app since currently Firebase cannot be connected to GitHub application yet. We will also be using Travis CI to generate static page and automatically deploy it to Firebase.

Installation

But before that, make sure you have installed NodeJs to your system. If not, you can check NodeJS for installation. Once everything has been set up, we can now install the Firebase Tools by running the code below:

npm install -g firebase-tools

Getting Started

First, we need a GitHub repository so we can integrate Travis CI. If you do not have a repository yet, create an empty repository. Sign-in to Travis CI via https://travis-ci.org/ and authenticate using your GitHub account. On the profile page, make sure to check the desired repository. Then click the cog icon next to check box.

It will redirect us to the setting page of our repository. I recommend to enable or turn ON the Build only if .travis.yml is present and Build branch updates and set the others to OFF as shown in the screen below:

In the Environment Variables, we have to set our Firebase token. We can obtain the api token by running the command below via terminal:

firebase login:ci

A web browser tab will be opened and will ask for our Google login credentials. Just fill-up the details and click login. A message will be prompted asking permission from Firebase app, just select allow button. Once the process is completed, we can now see our token in the terminal window. Back to Travis configuration, we can name the variable whatever we want. Just don’t forget to change the name located in .travis.yml which I will tackle later on. And one of the most important parts is to not turn ON the Display value in build log checkbox. Since we are using free Travis CI account, anyone can view our logs and might use our token to deploy their own code to our Firebase application. Click Add button to apply the environment variable.

The Git repository

For now, lets switch to GitHub repository. First is to clone it on our own local machine.

git clone git@url:user/repo.git
cd repo/

Next is associate this repository to our firebase application. If you haven’t created an application, you may refer to [Get Started with Hosting](https://firebase.google.com/docs/hosting/quickstart) documentation page. You can run the command below to initialize your current local repository as a Firebase application.

firebase init

You will notice that there are 2 files generated by firebase command. The firebase.json file contains settings on list of directories that will be visible to public while the .firebaserc file contains which project id you will be using. You can ignore the public folder (add to .gitignore) since we will be using Wintersmith to generate the files and directories.

ls -la
-rw-r--r--   1 user  staff    61B Jul  7 19:02 .firebaserc
-rw-r--r--   1 user  staff     8B Jul  7 19:13 .gitignore
-rw-r--r--   1 user  staff    46B Jul  7 19:02 firebase.json
drwxr-xr-x   4 user  staff   136B Jul  7 19:02 public

We can now create our main web page. As I mentioned earlier, we will be using Wintersmith Tool to generate static web pages. This tool converts markdown files into HTML pages. For more detailed documentation about Wintersmith and its usage, you may refer to Wintersmith: Quick Start Guide.

Automatic build and deploy using Travis CI

Now here is the trick. We will use Travis CI to build static web page and deploy it to Firebase. All we have to do is add .travis.yml file in our repository. From here, we will instruct Travis on what to do. As you can see, we will let it install firebase-tools and wintersmith just like what we did in our local machine. Then make it build our static web pages and deploy to Firebase server.

language: node_js
node_js:
  - "5.11"

branches:
  only:
    - master

before_script:
  - npm install -g firebase-tools
  - npm install -g wintersmith

script:
  - wintersmith build

after_success:
  - firebase deploy --token=${FIREBASE_API_TOKEN}

Lastly, add all the files to git, commit all our changes and push it to GitHub. Travis CI will trigger the build since we enabled build pushes and it will check if the master has been changed. Every time you change, push or merge to master, Travis CI will be triggered and eventually deploy it to Firebase server. Once the build and deploy were successful, we can now view our static web site hosted by Firebase.

You don’t have to pay for hosting server per month. You can also create your own static web blog using this trick. You can even use your preferred static page generation tool instead of Wintersmith. No need to worry because Firebase, GitHub and Travis CI are free. And we are just taking advantage of their features LoL.

References

You may refer or fork my repository https://github.com/marlosoft/firebase-deploy-travis-ci for a working copy. To view the build log of Travis CI, you may visit https://travis-ci.org/marlosoft/firebase-deploy-travis-ci. And for the working firebase web application, you can visit https://firebase.marlosoft.net/. Did you find this post useful? Feel free to comment below.