Configuring CI/CD on GitLab with Firebase for Frontend Applications

1. Introduction

GitLab is becoming a popular source code management (SCM) and CI/CD platform thanks to the GitLab Community Edition.
At the same time, Firebase Hosting makes it extremely easy to deploy testing, staging, and even production environments.

In this article, I will guide you through setting up basic CI/CD for a frontend application (Angular) using:

• GitLab CI
• Firebase Hosting

💡 This setup works well not only for Angular, but also for:

• ReactJS
• VueJS
• SolidJS
• Static HTML / CSS / JavaScript projects

2. Install Firebase CLI

Install firebase-tools globally:

npm install -g firebase-tools

or using Yarn:

yarn global add firebase-tools

3. Login to Firebase from CLI

firebase login

• Firebase will ask whether you want to send usage data → choose No (optional).
• A browser popup will open → log in with your Google account.

4. Initialize Firebase Hosting

Go to the root directory of your project and run:

firebase init

Configuration steps:

• Select features
  Use the SPACE key to select:

• Select project

Then

Example project ID:

firebase-hosting-deploy-test

• Public directory (deploy folder)

For Angular:

dist/

For React / Vue → use the corresponding build directory

After completion, Firebase CLI will generate:

firebase.json
.firebaserc

5. Build & Manual Deployment Test

Build the Angular app

yarn build

After the build completes, your folder structure will look like:

dist/
└── firebase-hosting-deploy-test

Deploy to Firebase Hosting

firebase deploy

Firebase will return a hosting URL similar to:

https://fir-hosting-deploy-test.web.app

👉 Open the link in your browser to verify the deployment.

6. GitLab CI & GitLab Runner Overview

To automate build and deployment, let’s review some basics.

What is GitLab Runner?

• GitLab Runners are machines that execute CI/CD jobs
• They follow instructions defined in .gitlab-ci.yml

What is an Executor?

• Defines the environment where jobs run
• Common executors:
  • shell
  • ssh
  • docker
  • kubernetes

👉 In this guide, we use the Docker executor, which is the most common and convenient option.

Using Docker executor is similar to SSH-ing into a VPS with Docker installed and running commands inside a container.

7. Example .gitlab-ci.yml Configuration

stages:
  - build
  - deploy

build_master:
  only:
    - master
  stage: build
  image: node:16
  before_script:
    - node -v
    - npm -v
  script:
    - yarn
    - yarn build-prod
  cache:
    key: node_modules_example_fe
    paths:
      - node_modules/
  artifacts:
    expire_in: 1 day
    paths:
      - dist/

deploy_master:
  only:
    - master
  stage: deploy
  environment:
    name: master
    url: https://example.web.app
  image: andreysenov/firebase-tools:9.13.1-node12
  script:
    - echo "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID"
    - firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --token $FIREBASE_TOKEN

8. Configuration Breakdown

stages

stages:
  - build
  - deploy

• Defines job execution order
• build runs first, followed by deploy

build_master Job

• Runs only on the master branch
• Uses node:16 Docker image
• Installs dependencies and builds the project
• Caches node_modules
• Stores dist/ as artifacts

artifacts

artifacts:
  paths:
    - dist/

• Allows subsequent jobs to reuse the build output
• Prevents rebuilding from scratch

deploy_master Job

• Uses a Docker image with Firebase CLI preinstalled: andreysenov/firebase-tools
• Deploys to Firebase Hosting
• Adds pipeline metadata to the deployment message
  

9. Generate Firebase Token for CI

Run the following command locally:

firebase login:ci

Firebase will return a token like:

1//xxxxxxxxxxxxxxxxxxxxxxxx

Add Token to GitLab CI Variables

1. Go to Repository → Settings → CI/CD → Variables
2. Add a new variable:

• Key: FIREBASE_TOKEN
• Value: the generated token
• Enable Masked and Protected (recommended)

Now it can be used in CI:

$FIREBASE_TOKEN

10. Enable CI/CD

• Push .gitlab-ci.yml to your repository
• Go to CI/CD → Pipelines
• Monitor build and deployment progress 🚀

11. Conclusion

✔️ With this setup:

• No more manual builds
• No more manual deployments
• Every merge automatically deploys to Firebase Hosting

👉 Recommended references:

• GitLab CI/CD documentation
• Firebase Hosting documentation

Frontend CI/CD doesn’t get much easier than this 😃