Firebase Hosting with GitHub Actions
Tags: react, github, firebase, devops
Published: 2020-10-24 02:16:20

Recently Firebase has launched a brand-new GitHub [Action](https://github.com/marketplace/actions/deploy-to-firebase-hosting). With this you can preview your site on every Pull Request. This Preview channel will be updated once PR is created or updated. Every PR will get its own preview channel, so you can focus on each PR's changes. Also we can configure Github Action to deploy the site to live version once PR is merged.

I have configured this for one of my GitHub [repository](https://github.com/pprachit09/coderlust-resume).

1. Go to your GitHub repository and click on "Actions" tab.
2. Click on "set up a workflow yourself" ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8vcvmjdbi8xzesrpdduz.JPG)
3. Give name to your file. Here I am naming my file as "deploy-preview.yml"
4. Add below code in the yml file
```
name: Deploy to preview channel

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the main branch
on:
  pull_request:

jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # Add any build steps here.
      - run: npm i && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          expires: 7d
          projectId: your-project-id
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels
```
Ok. So let's take a step back and understand what we have done here. 
* First we have added _on_ condition _pull_request_ so that this action will trigger on every Pull Request
* We have added `- run: npm i && npm run build` to download all the npm packages and create a build to deploy on production.
* _repoToken_ You don't need to set this secret yourself - GitHub sets it automatically.
* _projectId_ The Firebase project that contains the Hosting site to which you want to deploy. If left blank, you need to check in a .firebaserc file so that the Firebase CLI knows which Firebase project to use.
* _firebaseServiceAccount_ Now this is required and you can find the same in your project settings. Go to _https://console.firebase.google.com/u/1/project/{project-name}/settings/serviceaccounts/adminsdk_ and click on *Generate new private key*. Save the json file and add it in GitHub secrets.

1. For that, go to settings tab of your repository and select secrets from the left menu.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/plpaksk9uzh8hf15u0s0.JPG)

2. Click on *New Secret*. Give the Name as *FIREBASE_SERVICE_ACCOUNT* and in value field, paste the JSON copied in the Firebase project. Click on save.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xg2k8nnt19z13ovf74i5.JPG)

Now you are ready to commit your new GitHub action file to your repository. From the right hand side, Click on "Start commit" and give commit message. Also, select option of create a new branch for this commit and start a pull request.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x7s3cql2du4ir21dh2hw.JPG)

Once you raise a Pull Request, you can see the GitHub action in Action. Once the Action is completed, you will see the preview URL present on your PR. Super Cool...!!!! You can also decide the expiry of this Preview Channel by specifying it in your .yml file you created earlier. _expires_:

If you want to deploy your site to the live version on successful merge. You can add one more GitHub Action, For example let's call it as "deploy_live.yml". Add below content in your file

```
name: Deploy to Live Channel

on:
  push:
    branches:
      - main

jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # Add any build steps here. For example:
      - run: npm i && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          projectId: your-project-id
          channelId: live
```

Here we are specifying, 
```
on:
  push:
    branches:
      - main
```
So that this action will only trigger when PR is merged in main branch.

And Here we go....!!! We have completely automated deployment of our site.

Reference: https://github.com/marketplace/actions/deploy-to-firebase-hosting
https://github.com/pprachit09/coderlust-resume/tree/main/.github/workflows

Feel free to share your thoughts...!!! Happy Learning.