Learning Travis CI with Firebase + React: Part 1

While I am late to the Continuous Integration (CI) game, I finally decided it was time to learn more about it.

First, I will admit that I am generally slow to adopt automation. My litmus test for adding automation is to do something manually until I start to get annoyed and then and only then add automation.

I have worked on a number of projects using Firebase (back-end) and React (front-end) and never got to a point where I felt the need to automate the test and deployment process. Disclaimer, I was the sole developer on these projects.

I am now, however, preparing to work on a project with multiple developers. Instead of waiting for the anticipated annoyance of enforcing a consistent test and deployment process across developers, I decided to learn to use the Travis Continuous Integration (CI) software.

Rather than explaining what Travis CI does, I will walk through using it with a simplified example using Firebase and React.

Project Setup

I first added a new Firebase project from the Firebase Console.

Then using Firebase CLI, I initialized a project folder on my development computer (laptop); selecting all the features (Database, Functions, and Hosting).

At this point, from the Firebase project folder, I can use the command

firebase deploy

to deploy all the features.

Next, using create-react-app, I create a React application in a folder, client, in the Firebase project folder.

At this point, from the client folder, I can use the command

yarn build

to build the React application (creates a build folder) and the command

yarn test

to test it.

In order to have the Firebase Hosting feature serve up the built React application, we update the firebase.json file in the Firebase project folder.

firebase.json

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "client/build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

At this point, we can remove the unused public folder in the Firebase project folder.

Finally, we create a new GitHub repository and initialize the Firebase project folder with it. In order to avoid committing any third-party Node.js modules, we create a .gitignore file in the the Firebase project folder.

.gitignore

**/node_modules

Manual Test and Deploy

At this point, we do the following to test and deploy our project.

Step 1: Build the Client; from the client folder.

yarn build

Step 2: Test the Client; from the client folder.

yarn test

Step 3: Deploy; from the project folder.

firebase deploy

Minimal Travis CI Configuration

Working slowly towards automating the testing and deployment of this project, we start with a minimal Travis CI configuration. In the Firebase project folder we create a file.

.travis.yml

language: node_js
node_js: lts/*
install: true
script: echo "script"

A Travis CI configuration needs to minimally specify the language (and version), the install step, and the script step. In this case, we are working with Node.js applications that depend on the long term support (LTS) version (currently 6.11.2). Setting the install to true skips the install step. The script, echo “script”, is a dummy operation that exits successfully (zero exit code).

With this configuration, enabling the GIT repository in Travis CI, and pushing changes to master, we observe that Travis CI automatically executes successfully with the following tail end of the log.

...
nvm install lts/*
Downloading and installing node v6.11.2...
Downloading https://nodejs.org/dist/v6.11.2/node-v6.11.2-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v6.11.2 (npm v3.10.10)
$ node --version
v6.11.2
$ npm --version
3.10.10
$ nvm --version
0.33.3
install
0.03s$ true
0.03s$ echo "script"
script
The command "echo "script"" exited with 0.
Done. Your build exited with 0.

Next Steps

I originally thought this was going to be a single article. Instead, it has turned into a two-part series.

In the next article, Learning Travis CI with Firebase + React: Part 2, we continue to work towards automating the testing and deployment of this Firebase + React project.