CIRCLECI PIPELINE TO DEPLOY ANGULAR APP TO FIREBASE

I am usually in a hurry so I can understand if you are here just to find the solution for your CircleCi pipeline to deploy your angular app on Firebase.
Just a second, before the pipeline will be runned, you should generate your Firebase Token as described here and save it on CircleCi as an environment variable. It will be useful for authentication in order to succeed in the deployment.

version: 2.1
jobs:
  build:
    working_directory: /tmp/workspace
    docker:
      - image: circleci/node:12.11.1-browsers
    steps:
    - checkout
    - restore_cache:
        key: dependencies-{{ checksum "package.json" }}
    - run:
        name: Install dependencies
        command: npm install
    - save_cache:
        key: dependencies-{{ checksum "package.json" }}
        paths:
          - ./node_modules
    - run:
        name: Install Angular cli
        command: sudo npm install -g @angular/cli > /dev/null
    - run:
        name: Build uat application
        command: ng build --configuration=prod
    - run:
        name: Test application
        command: ng test -- --watch=false
    - persist_to_workspace:
        root: /tmp/workspace
        paths:
          - dist
  deploy:
    working_directory: /tmp/workspace
    docker:
      - image: circleci/node:12.11.1-browsers
    steps:
      - checkout
      - attach_workspace:
          at: /tmp/workspace
      - run:
          name: Install Firebase
          command: npm install -D firebase-tools
      - run:
          name: Deploy to firebase prod
          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN --only hosting:prod
workflows:
  build-and-deploy:
    jobs:
      - build:
          filters:
            branches:
              only: master
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master

Now if you are here, it means you have more time so let’s take a look to each section of the pipeline.

In this section we can see the first part of the build. Here we are running inside the docker image circleci/node:12.11.1-browsers all the steps that allow us to checkout the code, restore the installed packages from the cache (in the first build of course will be empty), making an npm install and then save the node_modules folder in the cache. As we can see, we use the package.json checksum to generate the key for our cache (the key changes only if an update is made in the package.json).

version: 2.1
jobs:
  build:
    working_directory: /tmp/workspace
    docker:
      - image: circleci/node:12.11.1-browsers
    steps:
    - checkout
    - restore_cache:
        key: dependencies-{{ checksum "package.json" }}
    - run:
        name: Install dependencies
        command: npm install
    - save_cache:
        key: dependencies-{{ checksum "package.json" }}
        paths:
          - ./node_modules

In the second part we install and use the angular cli to build and run the tests. Thanks to the persist_to_workspace we can save the output of the build that will be used in the next job, the deploy.

    - run:
        name: Install Angular cli
        command: sudo npm install -g @angular/cli > /dev/null
    - run:
        name: Build uat application
        command: ng build --configuration=prod
    - run:
        name: Test application
        command: ng test -- --watch=false
    - persist_to_workspace:
        root: /tmp/workspace
        paths:
          - dist

So here the deploy job. The first step after the checkout will be the attach_workspace to have access to the dist folder containing our build. In order to deploy to firebase we have to install the firebase-tools (if not already listed in our dev dependencies) and use the firebase deploy command with the token already created.

deploy:
    working_directory: /tmp/workspace
    docker:
      - image: circleci/node:12.11.1-browsers
    steps:
      - checkout
      - attach_workspace:
          at: /tmp/workspace
      - run:
          name: Install Firebase
          command: npm install -D firebase-tools
      - run:
          name: Deploy to firebase prod
          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN --only hosting:prod

Last but not least the workflow section. We declare how we need to run the steps described until now. In particular we run the pipeline only for the master branch, and the deploy after a successful build.

workflows:
  build-and-deploy:
    jobs:
      - build:
          filters:
            branches:
              only: master
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master