> ## Content Index
> Fetch the complete content index at: https://danielbarta.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# CI/CD for Angular projects with Firebase and Github
- URL: https://danielbarta.com/cd-github-firebase/
- Published: 2020-09-10T13:02:37.000Z
- Updated: 2026-07-30T19:49:42.000Z
- Description: We can utilise GitHub Actions to automatically deploy when we push something.
- Author: Daniel Barta
- Tags: Angular, Github, Firebase, #Import 2023-04-16 20:09, #Import 2026-10-23 10:14

![](https://danielbarta.com/content/images/2020/09/1_l9vYpzZm1lKwm4Zz5q23gw.jpeg)

[Source of image](https://medium.com/@jhinter/github-actions-build-and-deploy-your-web-app-using-ci-cd-and-firebase-within-minutes-51e8d4c2ebc4?ref=danielbarta.com)

[In a previous post](https://danielbarta.com/set-up-dev-and-prod-environment-in-firebase/), we managed to set up different environments for development and production, with the same crucial settings for both projects, but there is one concern left. At this point, we need to manually deploy to the development or production project. Firstly, we can easily forget to deploy. Secondly, we might accidentally deploy to the wrong project. If for some reason, the concept of Continous Integration and Continous Delivery is new, it is perfectly summed up by [Jeff Delaney](https://fireship.io/contributors/jeff-delaney/?ref=danielbarta.com) in under 2 minutes.

We can utilize GitHub Actions to automatically deploy on every push. We want to have an automatic build and deployment for production every time we push something.

In our repository's `/.github/workflows` folder, create a file called `deploy@master.yml`. The script below does exactly what we want to do on the master:

- Creates a Ubuntu VM
- Sets up Node on it
- Retrieves dependencies from the cache, if it is possible
- Install the project's dependencies
- Runs unit tests
- Builds the project
- Deploys it to Firebase, both to my master and dev environment

```yml
name: deploy@master
on:
    push:
        branches:
            - master
jobs:
    main:
        name: Test, Build and Deploy
        runs-on: ubuntu-latest
        steps:
            - name: Check out code
              uses: actions/checkout@v2

            - name: Node ${{ matrix.node-version }}
              uses: actions/setup-node@v2.1.1
              with:
                  node-version: ${{ matrix.node-version }}

            - name: Cache node modules
              uses: actions/cache@v2.1.1
              env:
                  cache-name: cache-node-modules
              with:
                  # npm cache files are stored in `~/.npm` on Linux/macOS
                  path: ~/.npm
                  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
                  restore-keys: |
                      ${{ runner.os }}-build-${{ env.cache-name }}-
                      ${{ runner.os }}-build-
                      ${{ runner.os }}-

            - name: Install npm dependencies
              run: |
                  cd functions
                  npm install
                  cd ..
                  npm install

            - name: Run tests
              run: npm run test

            - name: Build production
              run: npm run build:prod

            - name: Deploy to Firebase@master
              uses: w9jds/firebase-action@v1.5.0
              with:
                  args: deploy --only storage,firestore,functions
              env:
                  FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
                  PROJECT_ID: todo

            - name: Deploy to Firebase@dev
              uses: w9jds/firebase-action@v1.5.0
              with:
                  args: deploy
              env:
                  FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
                  PROJECT_ID: todo-dev

```

deploy.yml

The first steps are best explained by the official [GitHub Docs](https://docs.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow?ref=danielbarta.com). Caching and installing npm dependencies are also well explained [there](https://docs.github.com/en/actions/configuring-and-managing-workflows/caching-dependencies-to-speed-up-workflows?ref=danielbarta.com). To make that work, we must set up a secret in the repo named `FIREBASE_TOKEN`, where the value is the token we get when we sign in from the CLI using `firebase login:ci`. The `PROJECT_ID` must match the project name in Firebase.

![](https://danielbarta.com/content/images/2020/09/githubcd.PNG)

A successful run using already cached npm dependencies

## Summary

We have implemented CD support for our Angular&Firebase project. We enhanced CI by failing as soon as possible using automated tests. To further improve, it might be a good idea to run tests on pull requests too. To do that, we only need to change the trigger at the beginning of the file from `push` to `pull_request`, remove the last three steps, and put this into a separate YAML file.