My Workflow

Automating the deployment of your side-projects is one of the best things you could for your future self. Also known as Continuous deployment or CD. In this blog, we will be using Firebase for free hosting and Github actions for continuous deployments.

If you are here then you probably know about firebase, its a development platform by Google that offers services such as hosting, realtime database, cloud storage, etc.

If you have never deployed a react app before with firebase, there are tons of tutorials out there but here is One

I wrote a GitHub action to build and deploy my side project to firebase when pushed to its repo.

When writing your own action, make sure you have your FIREBASE_TOKEN ready. You can also generate your own by doing this on your terminal inside your repo :

firebase login:ci

and add this token to the secrets of your GitHub repo as FIREBASE_TOKEN

Submission Category:

DIY Deployments

Yaml File or Link to Code

name: Firebase Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Here is the link to the main.yml file : main.yml

Here is the repo

Additional Resources / Info

A similar tutorial for Angular folks :
Link