DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Automating deployment with React and Firebase and GitHub actions!
Tanvesh sarve
Tanvesh sarve

Posted on

Automating deployment with React and Firebase and GitHub actions!

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

GitHub logo tanvesh01 / CoronaTrackerApp

A Corona Tracker App, track the number of COVID positives, recovered and deaths in India and the world

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool…

Additional Resources / Info

A similar tutorial for Angular folks :
Link

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.