How to publish an Angular app to Firebase Hosting using Github Actions

The purpose of this post is to publish an Angular application within a Firebase project using the Firebase Hosting product. To automate the deploy we will use a Github Actions pipeline that will be triggered in every commit on the main branch.

To follow this tutorial, you will need to have:

1. Firebase account
2. Google account
3. Firebase CLI installed, see more here
4. Github account
5. Previous knowlodge of git and github

Firebase Project

Go to console.firebase.google.com and create a new project.

I'll use demoangulargithubactions

I choose to disable Google Analytics, since it's irrelevant for this tutorial.

Wait until the project creation finish.

As soon as the project is available, you will see a lot of products available for you. For now, keep this tab and let's go to the next step.

Github repository and Angular project

In this tutorial I'll create a new repository called demogithubactions and a new angular project using ng new angular-tour-of-heroes, but this step is optional. If you already have a project, use it.

Clone your repo locally.

Create the angular project.

The project will be create inside the folder angular-tour-of-heroes, as image below.

I prefer to move all code to the root folder. Just because it simplify or Github Actions pipeline.

Firebase configuration

Now we have our project and repo, let's configurate our firebase project.

If you don't have the Firebase CLI installed, do it.

Run firebase init hosting and choose Use an existing project.

Choose your project in the list.

Anwser the questions, be free to anwser or not like me:

• Chosse the folder that will be publish, this need to be the same folder that the one generate when we run ng build, in my case will be dist.

• Next, I choose No.

• Again, I choose No, because I prefer to do the conections between Github and Firebase using my own script.

Done. If everthing is ok, you will receive a message like the image below.

Commit everything.

Github Actions

To configure Github Actions, first we need an auth token from Firebase, generate this token using firebase login:ci. Follow the instructions and authenticate.

A token will be displayed, like image below. For now, keep this token safe, we'll put it in a Secret in your Github repo.

Access your repo, go to Settings -> Secrets -> Actions e create a New repository secret.

Put the name FIREBASE_TOKEN e paste your token in the value field. Add the Secret.

Go to Actions, search for Manual e click in Configure in the Manual workflow box.

A page will be create with lots of code, replece everthing with the code below.

name: Deploy-To-Firebase

on: 
  push:
    branches: 
      - main

  workflow_dispatch:

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 16.13
      uses: actions/setup-node@v1
      with:
        node-version: 16.13    
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run build -- --prod
    - uses: w9jds/firebase-action@master
      with:
        args: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

To save the file, click in Start Commit, follow the instructions.

Click in Actions again, if not exist a worflow running, go to Deploy-To-Firebase and click Run workflow.

Optionally, open the deploy and follow step by step. After script execution all steps need to be green, like bellow image.

Go back to the Firebase tab console.firebase.google.com and refresh. Click All products and then Hosting.

Open one link in a new tab. Maybe you'll see something like next image, if thats the case, we need to ajust a configuration

Go to angular.json, at line 23, the value of outputPath configuration is different than what was informed previouslly in firebase init.

Here we have two options, change file angular.json and use "outputPath": "dist" or change file firebase.json and use "public": "dist/angular-tour-of-heroes". I choose to change angular.json.

Do a new commit. Follow Github Actions pipeline, refresh your Firebase console and you will see something like next image.

Open your project link and see your project published.

Conclusion

I holp that this tutorial could help you to configure a Github Action pipeline to deploy your angular project to Firebase Hosting.

If you like this tutorial, try adding a Telegram notification with Github Actions step to your pipeline.