DEV Community

Felipe Marques
Felipe Marques

Posted on

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.

Novo projeto no Firebase

I'll use demoangulargithubactions

Image description

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

Image description

Wait until the project creation finish.

Image description

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

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

Clone your repo locally.

Image description

Create the angular project.

Image description

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

Image description

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

Image description

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

Choose your project in the list.

Image description

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

  • Next, I choose No.

Image description

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

Image description

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

Image description

Commit everything.

Image description

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

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

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

Image description

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

Image description

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

Image description

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 }}

Enter fullscreen mode Exit fullscreen mode

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

Image description

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

Image description

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

Image description

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

Image description

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

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

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

Image description

Open your project link and see your project published.

Image description

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.

Top comments (1)

Collapse
 
jangelodev profile image
João Angelo

Thanks for sharing !