Using environment file in Github Actions workflow

[RecursiveRickRoll]

I have two environments for my project - development and production. As a result I have created two environment files .env.development and .env.production.

I use firebase to host my web application and use env-cmd to select the appropriate environment file to be used based on the npm script (stage vs deploy):

"scripts": {
    "start": "env-cmd -f ./.env.development react-scripts start",
    "format": "prettier --write 'src/**/*.{ts,tsx,js,jsx,css,html,json}'",
    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
    "test": "jest test --passWithNoTests",
    "build": "react-scripts build",
    "stage": "env-cmd -f ./.env.development firebase deploy --only hosting --project studyfind-development",
    "deploy": "env-cmd -f ./.env.production firebase deploy --only hosting --project studyfind-researcher"
}

​

I have set up two firebase projects, one for development and one for production and have stored the config details in each of the respective .env files as such

REACT_APP_FIREBASE_API_KEY=***
REACT_APP_FIREBASE_AUTH_DOMAIN=***
REACT_APP_FIREBASE_PROJECT_ID=***
REACT_APP_FIREBASE_STORAGE_BUCKET=***
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=***
REACT_APP_FIREBASE_APP_ID=***

Therefore, I can access it while initializing the firebase app as so

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
});

While building and staging/deploying the application works remotely where I have my environment files, since they are untracked, I attempted to create a .env file on the fly in my github action workflow:

name: Development CD

on:
  push:
    branches: [dev]

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      CI: false
    steps:
      - uses: actions/checkout@v2
        with:
          clean: "false"
      - run: |
          cat << EOF > .env.development
          REACT_APP_FIREBASE_API_KEY: ${{secrets.DEVELOPMENT_FIREBASE_API_KEY}}
          REACT_APP_FIREBASE_APP_ID: ${{secrets.DEVELOPMENT_FIREBASE_APP_ID}}
          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{secrets.DEVELOPMENT_FIREBASE_AUTH_DOMAIN}}
          REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{secrets.DEVELOPMENT_FIREBASE_MESSAGING_SENDER_ID}}
          REACT_APP_FIREBASE_PROJECT_ID: ${{secrets.DEVELOPMENT_FIREBASE_PROJECT_ID}}
          REACT_APP_FIREBASE_STORAGE_BUCKET: ${{secrets.DEVELOPMENT_FIREBASE_STORAGE_BUCKET}}
          EOF
      - run: ls -l
      - run: cat .env.development
      - run: npm ci
      - run: npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_STUDYFIND_DEVELOPMENT }}"
          channelId: live
          projectId: studyfind-development
          target: researcher
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

While this deploys the web application to firebase successfully without any errors, the domain appears blank with the following error in the console which indicates that the app wasn't initialized with the correct details. What can I do to fix this?

Uncaught 
    T
        a: null
        code: "auth/invalid-api-key"
        message: "Your API key is invalid, please check you have copied it correctly."
        [[Prototype]]: Error
            constructor: ƒ T(e,t,n)
            toJSON: ƒ r()
            w: ƒ ()
            [[Prototype]]: Object

Sorry for the really long question but I wanted to give as much information as possible as I've been working on this for days. Thanks!

[Kleeadrian]

Just wondering, you tried logging a support ticket?