How to publish an Angular app to Firebase Hosting using Github Actions
Tags: github, devops, angular, firebase
Published: 2022-08-21 23:42:00

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](https://firebase.google.com/docs/cli#install_the_firebase_cli)
4. Github account
5. Previous knowlodge of git and github

## Firebase Project

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

![Novo projeto no Firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pyq14jz9a3u6doq4rwa.png)

I'll use `demoangulargithubactions`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlvwj4uj8wzoc4v9lpqm.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db9lq88xfdxjexichj6n.png)

Wait until the project creation finish.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9zyjv7oevupuwpplvle.png)

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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4d3c2f1foqinvcw1mlc.png)
 
## 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nizxm1qsemrvy8dzxj74.png)

Clone your repo locally. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gymd5iayk0v16957ohr.png)

Create the angular project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uch5y1k7qxi5wm73ank.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35spi1pzd10sq4k2lv3y.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em52izzeijx1kr81uobs.png)

## 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`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9czcl9dtjcjswehzygk6.png)

Choose your project in the list.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48uyhq6cxqsqpz6arxi0.png)

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`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htaktppwkm097jed9pb6.png)

- Next, I choose No.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69jtfolmmdsjqxjfz7e0.png)

- Again, I choose No, because I prefer to do the conections between Github and Firebase using my own script.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdt6pn60c6mipr1ixoyz.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9imk4579rx3c5879jg4.png)

Commit everything.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ied182ttaz0uo660eur.png)

## 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxo9fpc8ptmam9diu0aj.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwleoy0wprufmqd3vg16.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm60i8j5ccvu7sigco1e.png)

Put the name `FIREBASE_TOKEN` e paste your token in the value field. Add the Secret.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfmiok742davwmnwuquh.png)

Go to Actions, search for Manual e click in Configure in the Manual workflow box.
   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2wyp1bu0ryqb7rlehhw.png)

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

``` yaml
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yuie9owue72nfrl21m2.png)

Click in Actions again, if not exist a worflow running, go to `Deploy-To-Firebase` and click `Run workflow`. 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j21aukvhdfkhl2x79h3n.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxg2isrl5mz57ucz1kki.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v7o56ix2m68isc1a41d.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyhwl08hzambf30ax8sb.png)

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`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zz5xhmgdaq3y82b41t67.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14x8jy960x94i0r2emtn.png)

Open your project link and see your project published. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sklpnrxeyjll7zhw8a1z.png)

## 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](https://dev.to/felipemsfg/telegram-notification-with-github-actions-69m) step to your pipeline.