Automate Preact deployment with Firebase and Travis CI

I have been working on a small side project for a couple of weeks and finally, reached the step in which I have to deploy my code and show the app to the world. Usually, I use digitalocean but I found it really difficult to setup things every time ( even when I have scripts which automate things for me ). Recently, a colleague of mine showed me how easy is to deploy a static app on Firebase Hosting so I decided to give it try.

Because I build my app using preact-cli, it is very easy to build, just need to type “preact build” in my terminal and the code is ready for deployment, quite simple, isn’t it?. The only thing I have to do is to upload it to Firebase Hosting using Travis CI on every push to github. ( Travis CI is one of the most popular continuous integration tools and is totally free for open source projects )

Create firebase project

Register at Firebase, create a project https://console.firebase.google.com and install firebase tools globally:

npm install -g firebase-tools

Setup Firebase

After the project is created and firebase-tools installed, is time to setup firebase, first thing we have to do is navigate to your project folder and login with your google account

firebase login

Next action is to initiate your project and follow the steps:

firebase init

Firebase will ask you a few questions:
? Which Firebase CLI features do you want to setup for this folder?
- Select Hosting
? What do you want to use as your public directory?
- Type build ( it is default preact-cli build folder )
? Configure as a single-page app (rewrite all urls to /index.html)?
- Yes

Create Travis YML file

In order to connect your project to travis we need to create a travis.yml file in the root level of it. My file looks like this:

The file is separated into few sections:
1. First, need to specify language and nodejs version which we are going to use.
2. Specify the branch, in my case I want to deploy only on push in master branch
3. before_script: in that section, I prefer to install all dependencies, in my case firebase-tools, preact-cli and my project related ones.
4. script: that section is responsible only for building my preact app using preact cli
5. after_success: use Firebase tools to deploy my app, we need to have token for that ( more info in next section ) which will pass as env variable $FIREBASE_TOKEN
6. finally, I like to receive a notification when my deploy is done

Setup Firebase token in Travis

As I said in previous section, we need to configure a Firebase token, in Travis. Go back to your terminal and type:

$ firebase login:ci 

that will open google login popup and after login it will generate token for you, copy the token.
Next step is to go to travis-ci.org and find your project:

Find your project

Click on the gear icon and go to settings page where you can add Environment Variables FIREBASE_TOKEN

After FIREBASE_TOKEN variable is added

That is everything, few very easy steps and you have auto build and deploy on every push to master branch.