How to setup a production-ready Devops environment for React without a penny— Part 1

4 min readApr 20, 2021

If you like me, have countless side projects, and want to deploy your project in industry-standard, but don’t want to spend too much money? I believe this series can help you.
In this series, I will teach you how to deploy your app in multi environment with CI/CD pipeline, using Firebase and Gitlab CI/CD only. And the most important part is, it costs ZERO dollar!
Part 1: Project setup and deployment
Part 2: CI/CD pipeline for auto deployment
Part 3: Multi-environment setup

Introduction

Before we start, let me talk about why I choose Firebase and Gitlab. If you are a beginner, working on some side projects, money is probably one of the biggest concern. Firebase and Gitlab provides full range of products that help you to build your project. If you are looking for a solution platform that can done thing perfectly in free plan, firebase and gitlab are good choices for your.

In this series, we will talk about how you can

Deploy your react web app to firebase hosting
automate deployment process with gitlab CICD
Setup multiple environments(dev and production)

So, let’s get started!

Step 1: Create Gitlab project

To use Gitlab CI/CD, you have to create Gitlab account. One good thing about Gitlab CI/CD is that it is not required to use Gitlab repository for Gitlab CI/CD. If you prefer to use Github or even self-host git server, you can do so by New Project > Run CI/CD pipelines for external repositories. If you have no preference, create a blank new project in Gitlab is a good choice as it can save your time in integrating those platforms.

Step 2: Create Firebase project

Firebase provides several useful features, such as real time database, authentication, analytics, etc. In our use case, we will host our react app on Firebase hosting. The reason I choose Firebase because no setup is needed, and it provides a domain name and HTTPS support automatically, for FREE! If you already have a custom domain name, you can also link it to Firebase.

To kickstart, you have to create a new Firebase project. You can do so by go to Firebase console, login to your google account, and click new project.

You can create your project with any name, but you need to pay attention to the project ID. Firebase will auto generate a ID to your project by default, and you can customize it by clicking the pencil icon. This ID is extremely important because your hosting URL will be [project-id].web.app or [project-id].firebaseapp.com . If you are not going to have your own custom domain name, and you want the URL to be pretty, make sure your project ID is good enough. Once you created the project, you can no longer edit the ID. So make sure you won’t regret it in the future.

test-demo-a06fd definitely not a good name for the subdomain

After the naming, Firebase will ask you to enable Google Analytics for this project. You can enable it if you needed, or setup afterwards if you are not sure what it is.

Once it’s completed, you will see the project overview in the Firebase console.

Step 3: Deploy your app to Firebase storage

To deploy your app to Firebase hosting, you have to first install Firebase CLI. Go to your terminal and install in your computer by

npm install -g firebase-tools

Then, go to the root directory of your project, and login using

firebase login

Once you logged in, you can tell firebase what service you want to use in this project. In this case, we use the hosting service.

firebase init hosting

Firebase will ask you several questions.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File public/index.html already exists. Overwrite? No

(PS: If you use create-react-app without any custom config, the default build folder will be /dist . )

After that, firebase will auto generate firebase.json and .firebaserc .

Finally, you can publish your work to the world by

firebase deploy --only hosting

Deploy automatically

If we want to deploy automatically, it’s kind of difficult to re-login every time. Therefore, we need to use a access token which can be used to re-login. Firebase provides a very simple way to do it.

firebase login:ci

After login, a access token will be generated and print in the console. Then you can deploy by

firebase deploy --only hosting --token FIREBASE_TOKEN

This command will be used in our CICD pipeline.

Summary

In this article, we have discussed how to setup Gitlab and Firebase, and deploy our app to Firebase. In part 2, we will talk about how to automate entire deployment using Gitlab CI/CD. Stay tuned~