Post
Ask Question

Deploy An Angular App To Firebase Via GitHub Actions

In this article, we will learn step by step how to deploy our web applications with Angular in Firebase hosting using GitHub Actions.

Given these considerations, here are the important points that we will review in this article,

  • Create Angular app
  • Create Firebase project
  • Configure Firebase in the Angular app
  • Create a repository in GitHub and implement GitHub Actions

Prerequisites

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

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 your angular app.
 
Open the browser and write http://localhost:4200.
 
 

Create Firebase project

Go to the 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 on Create project.

Once your Firebase project is created, click on Continue.

Now, you can access the Firebase project.

Configure Firebase in the Angular app

Install Firebase CLI globally with the following command, 

npm install -g firebase-tools

Login to your Firebase account with the following command,

firebase login

Choose the Google account that you created for the Firebase project.

Allow Firebase CLI to access 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 it with the Hosting URL.

In the .gitignore file add the following line,

 /.firebase

Create a 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,

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.

If all is correct. You can see that the deployment to Firebase was successful.

Now every commit that you do in the code is going to be deployed to Firebase automatically.

Thanks for reading

Thank you very much for reading, I hope you found this article interesting and may be useful in the future. If you have any questions or ideas that you need to discuss, it will be a pleasure to be able to collaborate and exchange knowledge together.


Similar Articles