The Complete DevOps Guide with React, Firebase, and GitlabCI, Part 1

Setting up the React Project, Firebase Hosting

I had been working with Daybook as a full stack web developer, on a React project, with Firebase backend and Firebase hosting. I had to wire up Kubernetes and GitLab CI for it and had no idea where to start. There were countless roadblocks, so I’m writing a series to help others who face the same issue, with an anecdote of the issues and mistakes that I did during my journey.

Hold on a minute! What in the world is DevOps?

DevOps is a set of practices that automates the processes between software development and IT teams, in order that they can build, test, and release software faster and more reliably. You can focus more on developing, rather than spending rather than waste hours building, testing and deploying.

Why can’t I just do all the building and testing manually? Why take so much trouble to setup CI?

Well, doing that works quite fine when you’re a lone wolf. But what if you have multiple people on the team? How do you decide when to build? What do you do if a test fails? What if someone accidentally deploys your website before testing, and it crashes? You could lose millions of dollars if you’re a big firm. So, focus more on developing, and let the machine break the loop for you and automate the boring job of testing, building and deploying for you.

Why Daybook needed CI/CD and management of separate environments?

Without further ado, let’s get started! I’m assuming that you already have a React app (created using create-react-app) with Firebase as the database, as React Fundamentals is beyond the scope of this series (you can skip certain steps that I mention if you use some other database).

1. Installing Firebase CLI (skip if already done)

Let’s initialize firebase in the project. For this, you need to have the firebase CLI installed first:

$ npm install -g firebase-tools

The -g flag indicates that firebase-tools should be installed globally.

If you are using firebase-tools for the first time, you’ll have to log in using your Google account:

$ firebase login

This will open a browser window:

Click ‘Allow’, and you’ll get a success message as follows, after which you can close the browser tab.

2. Initializing a Firebase Project (skip if already done)

In the project directory, initialize a firebase project.

$ firebase init

firebase init

Currently, I want Database and Hosting, so I choose them using a space bar and hit enter.

Project setup

The next step is to choose a default project. If your account already has some projects, they will be listed. You can create new projects either in Firebase Console or in the CLI. In order to support multiple environments (as explained in Part 3, choose the ‘Don’t set up a default project’ option.

Then go with the defaults for a few steps:

Keep the hosting directory as build for now.

Setup complete

The initialization is now complete.

In order to use firebase database, you need to install the firebase package using npm or yarn:

$ npm install firebase

3. Firebase Configuration (skip if already done)

For now, take one of your firebase projects (development, preferably), and add its configuration object into src/firebase/firebase.js:

import firebase from 'firebase';
let config = {
    apiKey: '<firebase-api-key>',
    authDomain: '<your-firebase-auth-domain>',
    databaseURL: '<database-url>',
    projectId: '<firebase-project-id>',
    storageBucket: '<firebase-storage-bucket-id>',
    messagingSenderId: '<firebase-message-sender-id>',
};
firebase.initializeApp(config);
const database = firebase.database();
export { firebase, database as default };

I’ll deal with multiple environments and projects in the next part. Till then, please bear with me.

4. Deploying the project

In order to prep and compress the project for production, we need to build it, which can be done as follows:

$ npm run build

To deploy everything (all configured functionality — in this case, database and hosting) to firebase:

$ firebase deploy --project <project-name>

Note that we need the --project flag here because we haven’t chosen a default project.

Alternatively, to just deploy hosting, you can do:

$ firebase deploy --only hosting --project <project-name>

The Complete DevOps Guide with React, Firebase, and GitlabCI, Part 2