Deploy a React app into Firebase Hosting with GitHub Actions

Chamod Shehanka Perera
SLIIT FOSS Community
3 min readFeb 23, 2020

Prerequisites

  • React application
  • Google Account
  • GitHub Account
  • Firebase CLI should be installed in your computer
  1. Push your project into GitHub repository if you don’t know how to do that read the below article of mine.
    Adding your first project to GitHub using the command line
  2. Move to your GitHub repository in browser and go to Actions tab.

3. Choose NodeJS workflow template.

4. Then search firebase in marketplace and choose GitHub Action for Firebase

5. After that make your workflow.yaml like below one

6. In above yaml file there’s a firebase token you must generate that token using firebase CLI. Before that go to your firebase console and create a new project.

Fill your required project details and make your firebase project. After that open your project in terminal and run below command to initialize your project

firebase init

choose hosting and choose your project as well then run below command to generate token for your project.

firebase login:ci

Once it done copy that generated token and go to GitHub

6. Go to Setting tab to add your secret token to GitHub project

GitHub Encrypted secrets allow you to store sensitive information, such as access tokens , in your repository.

7. Move to Secret section

Then click on add a new secret and past your secret and your secret name should be FIREBASE_TOKEN because that the name you’ve put in workflow yaml file

Then your secret section looks like this

Then you do a change and push it to GitHub automatically your react application will deploy to firebase hosting if you want to see the hosting overview you can see it in firebase console.

--

--

Chamod Shehanka Perera
SLIIT FOSS Community

Software Engineer | GitHub Field Expert | Golang Sri Lanka Lead | GDG Organizer | KCD Sri Lanka Organizer| Beginner Surfer