DEV Community

loading...
Cover image for Deploy an Angular app to Firebase via GitHub Actions

Deploy an Angular app to Firebase via GitHub Actions

cristofima profile image Cristopher Coronado Updated on ・4 min read

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

image

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

image

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

image

2. Create Firebase project

Go to Firebase console and login with your Google account.

Click in Add project.

image

Write the project name and click in continue.

image

Disable Google Analytics and click in Create project.

image

Once your Firebase project is created, click in Continue.

image

Now, you can access to the Firebase project.

image

3. 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 the Firebase project.

image

Allow to Firebase CLI to access to Google account.

image

image

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

image

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

image

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.

image

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

image

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

image

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

image

4. Create repository in GitHub and implement GitHub Actions

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

image

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

image

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

image

Now, from your GitHub repository go to Settings > Secrets

image

Click in New repository secret and add the Firebase token.

image

Finally, go to Actions and set up a workflow.

image

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 }}
Enter fullscreen mode Exit fullscreen mode

Commit the file.

image

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

image

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

Discussion (0)

pic
Editor guide