Github Actions - How can I make my env variable(stored in .env file) available in my workflow

Question

I'll try to be as clear as possible. I have also asked about related issues but didn't receive a convincing response.
I'm using React and firebase for hosting.
Also, I'm storing my firebase web API key in my .env file.
I set up firebase hosting using Firebase CLI and chose to automatically deploy on merge or pull request.
After the setup finished a .github folder with .yml file was created in my working directory.

   .github
      - workflows
          -firebase-hosting-merge.yml
          -firebase-hosting-pull-request.yml

So now when I deploy my project(without pushing to GitHub) manually to firebase by running firebase deploy everything works fine and my app is up and running.
However when I make changes and push my changes to Github. Github actions are triggered and the automatic deployment to the firebase process starts. The build passes all the checks.

However, when I visit the hosted URL there is an error I get in the console saying Your API key is invalid, please check you have copied it correctly.
I tried few workarounds like storing my firebase web API key into the Github secrets and accessing it in my .yml file.

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
 
name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build --prod
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_EVENTS_EASY }}'
          channelId: live
          projectId: my-project
        env:
          REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}}
          FIREBASE_CLI_PREVIEWS: hostingchannels

But I am still getting the error. I feel that the error is definitely due to the environment variables.
I have stored my firebase web API key in my .env.production file located in the root directory. Somehow GitHub actions are not using my environment variables defined.
Please let me know how can I manage my env variables so that it can be accessed by my workflow.

Bunnybunow

Looking at the action, there's no mention of additional env to be included. This is from a quick read. – Etymologize

Thank you for your response. I'm new to Github actions, can you please explain. – Bunnybunow

This is the repository of the action you're using to deploy: github.com/FirebaseExtended/action-hosting-deploy I see no mention of env examples, so I'm not entirely sure you can do it. By the way, when you say you store your API key in the root directory, do you mean on GitHub? If so, you might have leaked your API token. – Etymologize

No, I store my API key in the .env file which is not pushed to GitHub as I have added it in the .gitignore file. I'm accessing the API key in my project by the command process.env.REACT_API_KEY – Bunnybunow

What about other config variables required? Like storageBucketId, messagingId, etc...? – Ellyellyn

Answer 1

The answer is put custom env vars in first level before jobs:

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master

env: # <--- here
  REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}} # <--- here

jobs:
  build_and_deploy:
...

And add this secrets in Github > Your project > Settings > Secrets

Pun

You completely saved my life here. AND WHY IS THIS NOT CLEAR ANYWHERE ELSE? Thank you for being awesome. – Carniola

Answer 2

You can use Create Envfile Github Action to create a .env file in your workflow.

To add a key to the envfile, add a key/pair to the with: section. It must begin with envkey_.

steps:
  - uses: actions/checkout@v2
  - name: Use Node.js
    uses: actions/setup-node@v1
  - name: Make envfile
    uses: SpicyPizza/create-envfile@v1
    with:
      envkey_REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}}
      directory: './'
      file_name: '.env'

Messina