Cristopher Coronado

Posted on Feb 21, 2021 • Edited on Feb 23, 2021

Deploy an Angular app to Firebase via GitHub Actions

#angular #firebase #github #programming

Prerequisites

Install Node.js
Install @angular/cli via npm
Install Git locally
Visual Studio Code (Optional IDE)
GitHub account
Google account

1. Create angular app

In your cmd, execute this command: ng new angular-firebase-demo

Go to the project in the cmd and execute ng serve. You have to wait until the compilation is successful.

Now, you can access to your angular app. Open the browser and write http://localhost:4200.

2. Create Firebase project

Go to Firebase console and login with your Google account.

Click in Add project.

Write the project name and click in continue.

Disable Google Analytics and click in Create project.

Once your Firebase project is created, click in Continue.

Now, you can access to the Firebase project.

3. Configure Firebase in the Angular app

Install Firebase CLI globally with the following command npm install -g firebase-tools.

Choose the Google account that you created the Firebase project.

Allow to Firebase CLI to access to Google account.

Initialize the project using this command: firebase init

Upon initializing the project you’ll be asked a few questions:

Firebase CLI features: Hosting
Project Setup: Use an existing project (Angular Firebase Demo)
Public directory: dist/angular-firebase-demo
Configure as single-page app: Yes
Set up automatic builds and deploys with GitHub?: No
Overwrite index.html: No

Open your project in the IDE, and add the following script in the package.json file: "build:prod": "ng build --prod".

Then, execute that script with this command: npm run build:prod.

As a result, a dist folder is created. And inside this are the compiled files.

Use this command to deploy your production-ready app to Firebase Hosting: firebase deploy.

Now, your app is deployed to Firebase and you can access with the Hosting URL.

In the .gitignore file add the following line: /.firebase

4. Create repository in GitHub and implement GitHub Actions

Go to GitHub and create a repository. This repository can be Public or Private.

Then, from the CMD in your project directory. Use the following git commands.

git init
git remote add origin https://github.com/cristofima/AngularFirebaseDemo.git
git branch -M main
git add .
git commit -m "Demo project"
git push -u origin main

GitHub requires a FIREBASE_TOKEN to be able to deploy your Angular app to Firebase. Generate a token for Firebase CI:

Now, from your GitHub repository go to Settings > Secrets

Click in New repository secret and add the Firebase token.

Finally, go to Actions and set up a workflow.

Copy the following YAML file:

name: CI

on:
  push:
    branches:
    - main

jobs:
  firebase-deploy:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master
    - uses: actions/setup-node@master
      with:
        node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    - uses: w9jds/firebase-action@master
      with:
        args: deploy --only hosting
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Commit the file.