In this tutorial we will use firebase hosting to deploy react app with github actions continuous deployment.

Create a new react app. Open terminal in your desired directory and type:

npx create-react-app <enter-app-name>

Once its done go to github, create a new repository and push the react app to the repository.

Now go to Firebase and create a new project.

To use github actions for continuous deployment you should have firebase tools installed on your system.

npm install -g firebase-tools

Now we need to log into firebase and get token. Open terminal in root of your project and type

firebase login:ci

It will open new tab for authentication. Upon successful authentication you will get a token in terminal where you ran the above mentioned command. We will use this token later so keep it somewhere safe.

Now we will initialize a firebase project. In terminal type

firebase init

It will ask you which features do you want to setup so press down arrow and go to Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys and then press space bar to select it and then press Enter.

Now you will be asked to select the firebase project so press Enter on Use an existing project and use arrow key to reach to the project you created earlier and then press Enter.

You will be asked a series of questions to setup hosting.

What do you want to use as your public directory: build

Configure as a single-page app (rewrite all urls to /index.html)? y

Set up automatic builds and deploys with GitHub? n

If you take a look at your project directory you will see two new files .firebaserc and firebase.json. Here we configured it as single-page app. If you type no then when you navigate to any route other than "/" and refresh the page you will get 404 error. We also typed no to automatic builds because we will do it manually.

Now is the time to create github workflow to handle continuous deployment. At the root of your project, create a directory .github and inside it create another another directory workflows and inside it create a file main.yml and paste the following into main.yml

name: Firebase Deployment
on:
  push:
    branches:
      - main
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2.3.2
      - name: Install Dependencies
        run: npm install      
      - name: Build
        env:
          CI: false        
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@v2
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2.3.2
      - name: Download Artifact
        uses: actions/download-artifact@v2
        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 }}

The on section describes the process which trigger the workflow. In this case the process is github push to main branch. You can change the branch name if it is something else in your case. The jobs section describes what to do when push command is performed so here we defined to perform npm install to install the dependencies and npm run build. Also we defined CI: false otherwise if there are any warnings then they will be treated as errors which will cause build crash. For example if you have imported a package or a file in any file and its unused, CI:true will treat it as error and build will crash. So if you want to keep CI: true then make sure you have no warnings otherwise build process will not succeed.

On last line you can see we referenced FIREBASE_TOKEN so now go to your github repository, click Settings, on the left side click Secrets and then click Actions. Click New repository secret and in name field type FIREBASE_TOKEN and its value will be the token which you got when you ran firebase login:ci and finally click Add secret.

Push the changes to github. Go to your github repository, click Actions, you will see automated process is triggered. When its done, go to your firebase project, click on Hosting, here you can find the url of your deployed react app. Now make any changes to your code and push to github, check Actions tab in github, workflow process trigger again.