Site Loader
Integrate Github repo with Firebase
Take advantage of Github CI/CD

In this post, We discuss how easy, interesting and productive is to integrate Github repo with Firebase firestore to build and publish web app. The purpose is to build, test and deliver your web app to any platform. I’ll try to describe how you can take advantage of Github Actions CI/CD.

I’ve been using Microsoft Azure a for a while, (this is not about MS Azure), then started using Azure DevOps (this pos is not about Azure DevOps). After a while I needed certain grade of freedom and interoperability with almost-free platforms out there.

Certain day, I was coding a web app for a customer which needed it as fast and possible. It was not clear to me about all the requirements at the initial interview. I promptly discovered that this project would need to be developed using an continuous integration / continuous delivery.

It was going to grow grade by grade, incrementally, and then I found myself doing some research. I discovered couple options (which I will not be naming right now), in those options Github raised the head.

My web app: The details

The application profile is this:

  • Language: JavaScript/TypeScript
  • Framework/Libraries: NodeJS, React JS
  • Database: Google FireStore
  • Hosting: FireStore
  • IDE: Visual Studio Code
  • Public: Yes, with a custom domain and using SSL
  • Authentication: Yes, with mail/password, social login
  • Testable: Yes, couple unit tests

The approach

I wanted every time I make a commit and push the changes to my Github repo, the process start to build, compile and test it automatically. So, depending on the results finally publish the application to my firestore project and send me a mail because it is important.

If you need to use this case, then follow these steps and read the documentation online. Because I will not be able to be very specific or go deep, but I’ll do my best.

  1. Create your Github account, if you already have one then proceed and create your repo. If you don’t know how to do this (assuming you are just starting to learn) follow this help page to achieve it.
  2. Clone your project and open it with VSCode to start coding. If you are already coding make some commits and pushes. Validate your pushes by entering to Github.com/your_user/your_repo
  3. With your repo start page open click on the Actions tab.
Working with actions starts here
  1. Click on the New workflow Icon, then in the template list choose the Node.js template to use this template to build your workflow
Several templates are available here
  1. After selecting the workflow template a template file (.yml) will automatically create allowing you to manipulate or control the build, integration, test and publish flow.
  2. I made some changes to my template to look like this:
name: Node CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, build, and test
      env:
        CI: false
        FIREBASE_TOKEN: ${{secrets.FIREBASE_TOKEN}}
      working-directory: ./frontend
      run: |
        npm i -g cross-env
        npm i -g firebase-tools
        npm ci
        firebase use development && cross-env REACT_APP_ENVIRONMENT=development npm run build && firebase deploy --only hosting,storage --token $FIREBASE_TOKEN

After analyzing carefully this template you could notice the trigger flag: ON: [push] this means that this template will be executed every time I push the code from my commited version locally to the Github server.

Also notice that I setted up the secrets (credentials) to be stored using the Github vault, then declared it in my template to be used in the publishing process.

Final thoughts

That’s the whole overview for today, hope to see you soon integrate Github repo with Firebase. This platform is very powerful and easy to use, so you can take advantage of the goods it offers, because it’s been receiving improvements day after day.

Feel free to contact me if you need to know more about using this cool platform for your projects and delivering your customers fast and safe software products.

walalm

Leave a Reply

Your email address will not be published. Required fields are marked *