Deploy an Angular app to Firebase via GitHub Actions
Tags: angular, firebase, github, programming
Published: 2021-02-21 18:56:21

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zqv1szblhtm218cuqr1.png)
 
Go to the project in the cmd and execute `ng serve`. You have to wait until the compilation is successful.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6d784tx2n0rw9qvigk2o.png)

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4au3rf3icbdio6cftp0w.png)
 
# 2. Create Firebase project

Go to [Firebase console](https://console.firebase.google.com/) and login with your Google account.

Click in `Add project`.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78te8sskdsh2g7d3oq5j.png)

Write the project name and click in continue.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u782286qkmvbnhtib7w.png)

Disable Google Analytics and click in `Create project`.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwatgkn1z87yq1y1iwzi.png)
 
Once your Firebase project is created, click in Continue.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoepatx28tbfpzum7hqc.png)

Now, you can access to the Firebase project.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqg2lz3dk8c190llbrtt.png)
 
# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09ohh3uv498gnv88r6zi.png)

Allow to Firebase CLI to access to Google account.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1yy566juzz0t2l2jj6c.png)
  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwbj3a4gx3mvefd8tl13.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h40q1mbfxwk3v4d7qhpp.png)

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mhmff74ttqdz3180zjd.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdjh50ql23q53s6uvoc1.png)

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x4s00gl8mouffe0rhoq.png)

Now, your app is deployed to Firebase and you can access with the [Hosting URL](https://angular-firebase-demo-b2b38.web.app/). 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj3std5ucj1pch04vo0x.png) 

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4udxh88nuuzbj27qsl80.png) 

# 4. Create repository in GitHub and implement GitHub Actions

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsajuunrtjhjcvzfria5.png)

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6rig7zuylq5vtehoa0z.png)
 
GitHub requires a FIREBASE_TOKEN to be able to deploy your Angular app to Firebase. Generate a token for Firebase CI:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju9zool4bba7kezh6pu8.png)

Now, from your GitHub repository go to Settings > Secrets

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz4jmq29ukc8n1l0m2ut.png)

Click in `New repository secret` and add the Firebase token.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxqb6j0zwvjowah6gb4z.png)
 
Finally, go to Actions and set up a workflow.

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/818bm5zxam2dxk9egmf8.png)

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afd48rlbgidibzqu87ye.png)

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