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

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

In part 2, you have learnt how to automate your deployment using Gitlab CI/CD. Your web is finally goes live! Next thing you will want to do is to setup multiple environments for development and production. This is essential because we don’t want to mess up your in-progress work and the production. It would be a disaster if you pushed the new feature without proper testing, and those hidden bugs clash your site. In general, we need at least 2 environments: staging and production. In this article, we will discuss how to setup a staging environment and integrate with our previous CICD pipeline.

Step 1: Setup project in firebase

For a new environment, you need to create a new project in firebase by the same procedure in part 1. For the project ID, I suggest to use suffix to indicate the environment name. For example, if your project name is abc, then the project id will be abc-staging for staging environment. If you have multiple staging environment, this small trick can help you easily identify when you are using the firebase web console.

Step 2: Setup multiple project in your codebase

firebase allows you to setup multiple projects in the your codebase. All you need to do is to add .firebaserc file in the root directory, with a simple JSON.

{
  "projects": {
    "prd": "abc",
    "stg": "abc-staging"
  }
}

Step 3: Update your CICD pipeline

If you follow my step to setup the CICD, you may notice I have setup prod-build and prod-deploy. For staging development, we can clone the same script for prod-build and prod-deploy and rename as staging-build and staging-deploy . If your image has no difference in production and staging, you may even skip the clone of staging-deploy.

To make prod- and staging- works in their corresponding branches only, we use only property in gitlab to indicate the dedicated branch. For example:

staging-hosting:
  stage: deploy
  script:
    - firebase deploy --only hosting --token $FIREBASE_TOKEN
  only:
    - branch_staging
  dependencies:
    - staging-build
prod-hosting:
  stage: deploy
  script:
    - firebase deploy --only hosting --token $FIREBASE_TOKEN
  only:
    - master
  dependencies:
    - prod-build

Step 4: Update your deployment script

Last but not least, you need to tell firebase which project you need to deploy when running the pipeline. firebase CLI has a flag -P to indicate the project name. For example:

prod-hosting:
  ...
  script:
    - firebase deploy -P prd --only hosting --token $FIREBASE_TOKEN
staging-hosting:
  ...
  script:
    - firebase deploy -P stg --only hosting --token $FIREBASE_TOKEN

The name of the project refers to the key in your .firebaserc.

Final Words

You now have a running react app on the Internet, which is accessible by everyone! You don’t need to worry about the deployment procedure anymore, everything is be done by committing your code to a particular branch! If you want to test a new feature, push to staging branch. If your code is ready, push to master branch. Take a break, have some coffee, and is ready to share your amazing work to others. And the most important thing is, NO MONEY is needed!!