How to Set up automatic builds and deploys with GitHub on an existing frontend APP on firebase hosting.
Tags: developer, tutorial, firebase, githubactions
Published: 2023-11-12 14:10:04

A wordy heading. Yes i know. But we must recognize that this makes it specific to our situation.

So in my last article we talk about [<u>**How to deploy your frontend APP on firebase hosting.**</u>](https://dev.to/hermannleboss/how-to-deploy-your-frontend-app-on-firebase-hosting-16c9). 

Now let see how we can set up automatic build and deploy with github. 


## 1- Set up the GitHub Action to deploy to Firebase Hosting

### 1.1- Github Repo 
Fork this repo

```shell
git clone https://github.com/hermannleboss/vue-typescript.git
```
Then checkout branch feature/github


I assume you have already followed the step to enable Firebase hosting on this repository. If not follow this :[<u>**How to deploy your frontend APP on firebase hosting.**</u>](https://dev.to/hermannleboss/how-to-deploy-your-frontend-app-on-firebase-hosting-16c9).

Or you can just create a GitHub repository (public or private) or use an existing one. You must have admin permissions for the repository.

### 1.2- Set up the GitHub Action part of Hosting

Now let dig deeper. 

If you've NOT set up Hosting, run this version of the command from the root of your local directory:
```shell
firebase init hosting
```

If you've ALREADY set up Hosting, then you just need to set up the GitHub Action part of Hosting. Run this version of the command from the root of your local directory:

```shell
firebase init hosting:github
```

Follow the CLI prompts, and the command will automatically take care of setting up the GitHub Action:

- Creates a service account in your Firebase project with permission to deploy to Firebase Hosting.

- Encrypts that service account's JSON key and uploads it to the specified GitHub repository as a GitHub secret.

- Writes GitHub workflow yaml configuration files that reference the newly created secret. These files configure the GitHub Action to deploy to Firebase Hosting.

Setup the repo with the format **user/repository** : here **hermannleboss/vue-typescript**

You will have two files inside .github/workflows/

```yml
#.github/workflows/firebase-hosting-merge.yml
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXXX }}'
          channelId: live
          projectId: xxxxxx

```
Make sure you have line 14 

```yml
- run: npm install && npm run build
```

Now commit your update then push it. 
Now you can create your branch add your commits the create a Pull Request 



PS: If you some build error on deploy check that your workflow can edit your repository. 

![Setting Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ystjh4y5nijd8ju6gdd5.png)

Set it to read and write

![Setting Screenshot 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3a600unwsgbj699nd1n.png)