Intro (skippable)

I have a rule - every time I struggle big time with some issue, I write a blog article about it. So if someone struggles with the same situation (or it will be me and I will forget, you know 🙂) this article could help.

This time I had problems deploying my app to Firebase hosting via GitHub Actions.

Setup

• I created a React App.
• Then added Firebase.
• Set it up for hosting purposes (via Firebase Hosting).
• Then I set up GitHub Actions part of Firebase Hosting (link to docs)
• As it is necessary for security, I stored my variables in .env file

`REACT_APP_FIREBASE_APIKEY=xxxx`
…etc

Goal

I wanted an app to work after deployment via GitHub Actions.

Problem

I deployed it two ways:

1. manually (npm build, then firebase deploy)

2. via GitHub Actions (commit to master activates workflow)

First was working fine, second - resulted in a blank white page (while GItHub Actions checks were successful).

Console showed this error:

Firebase invalid api key error in console ( Error (auth/invalid-api-key))

Attempts

Attempt 1. Set up keys in GitHub repository

I added the same key values from .env to my repository secrets (Settings/Security and Variables/Actions).
Result: No effect

Attempt 2. One of the solution was to use || (OR) operator when configuring Firebase

apiKey: process.env.REACT_APP_FIREBASE_APIKEY || "mock-key",

Result: Blank screen was gone, I was able to see the hosted app. But, as I understood later, it was just partly working. I couldn’t make any requests (login, for example).

Misc attempts:

• Ensure that in .env I wasn’t using “” or , for storing key
• Ensure that there were no spelling errors in keys or variable names
• Ensure that keys in .env file start with REACT_APP
• Delete keys and restore keys (both REACT and FIREBASE)
  And other fun activities.

Solution

Partly I made the correct configuration. The thing I was missing is setting up env variables in the workflow file. In my case I needed to add env before jobs in firebase-hosting-merge.yml

env:

REACT_APP_FIREBASE_APIKEY: ${{secrets.REACT_APP_FIREBASE_APIKEY}}

jobs:

Check list

To successfully deploy to Firebase Hosting via GitHub actions you need:

1. Add values to .env file

2. Set up firebase config with said variables

const firebaseConfig = {

apiKey: process.env.REACT_APP_FIREBASE_APIKEY,

};

3. Set up keys in GitHub repo setting (Settings/Security and Variables/Actions)

4. Set up env in workflows file (in my case firebase-hosting-merge.yml) env:

In my case, that was enough to make GitHub Actions deploy my app to Firebase Hosting fine.

I hope that helps (if not - good luck in further research).

Thank you for reading.