Deploy an Angular Application to Firebase Hosting with Github Actions

Github Actions is a CI/CD tool that allows users to automate their project workflow, you can define certain actions to run when code is pushed to a branch, a new tag is uploaded or even when a directory has changes.

You can use this tool to automate the deploy process of your application, on this tutorial you'll learn how to easily deploy your angular application to firebase hosting with Github Actions.

Prerequisites

• Angular application(tested with v12+)
• Firebase project
• Github repository setup on the angular project

1. Setup Firebase hosting in the Angular application

If you don't have firebase tools installed yet run this command to install:
npm install firebase-tools

Now login using the firebase command line tool, use login:ci to get a token, you'll need this later on
firebase login:ci

When you run the login command, you should be redirect to firebase to authenticate with your account, once authenticated you should get a successful message on the browser and a token will appear on your cmd:

Run the command to setup firebase hosting on your angular project, after you run the command just choose your existing firebase project(or create one):
firebase init hosting

This command will create 2 files and a public folder in the project root(firebase.json and .firebaserc), it's important to note that you should have your firebase.json properly setup, the main thing to change here is the public folder that should match the same dist folder you have setup on your angular.json. To match the example repository provided at the beginning you should remove the public folder and use this configuration on firebase.json:

Firebase hosting supports github actions out of the box, just run this command to generate the files you need:
firebase init hosting:github

It should ask you 3 questions:

• 1. Will ask for the git repository you want to setup the workflow, choose the one you want
• 2. Will ask for the default commands to generate the build before every deploy, just go with the default one for now
• 3. Will ask for the branch you want the action to happen once you push some code, for the sake of this tutorial just hit enter and it will select master

The command will create a .github/ folder on your project root and generate 2 .ymlfiles inside it, these are the workflow files that will run once an action is made, for this tutorial, we'll skip the pull-request one and go further with the merge one:

Important to note: The command will also upload a service account JSON to github secrets, this is where environment variables are kept for github actions, you can check it out on your repository -> settings tab -> secrets

Push everything to your github, it needs to be there for the next steps.

2. Setup build/deploy command and.. Deploy!

In the previous step you did all the setup needed on your angular project to connect to firebase hosting as well as generating the require github/workflow files to be run whenever an action(a push in this case) is made.

Now we just need to setup angular building process inside of the workflow file so github actions knows what to do once the actions gets run.

In order to do this, let's change the file .github/workflows/firebase-hosting-merge.yml and add the proper build process for angular:

• 1. Add node support so we can install npm dependencies and run the needed scripts to build, add these below-uses: actions/checkolut@v2:

• 2. Let's do an npm install and build angular with a custom command(we'll see about this on the next steps) in the next phase, just replace the next line(— run: 'y') for this:

At the end your workflow file should look like this:

• 3. Let's cover that custom command we added on the workflow file on the last step, we gonna create a new build:prod command on package.json file, add this to the scripts part:

Now all you need to do is commit these files and push to master, github will get the new config and run the action, you can follow up in:

• github -> your repository -> actions tab

Worked, pretty awesome!

That's all you need to deploy your angular application to firebase hosting using github actions, this tutorial covers a basic example but it should work even for larger projects.