How to provide preview channels on Firebase hosting with environment variables?

Question

I want to use preview channels on Firebase in order to share and test feature before they go live. Creating the preview channels has been simple but currently I am getting an error when using the preview channel url:

I currently use a.env file that store React environment variables that allow me to connect to firebase but when building and deploying for the preview channels these env variables can't seem to be accessed.

Any ideas on how I can get this to work please

Answer 1

The error is indeed due to your hosted app not having access to those environment variables specifying the Firebase project your app is supposed to connect to (eg to authenticate users, manage data etc.). Why they aren't accessible to your GitHub Actions' pipeline steps, I cannot tell without any insights into your setup of course.

However, one approach towards tackling the issue (without having to check your project configuration in into the version-controlled code) is to store all the required (environment) variables in GitHub so that they become available to the GitHub Actions associated with the GitHub project you are working on. You can add them at https://github.com/<your-username>/<your-GitHub-project-name>/settings/variables/actions . Assuming you had a React app, then shipping the environment variables alongside the code to be deployed on a preview channel can be achieved via a firebase-hosting-pull-request.yml script possibly looking similar to this one:

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    env:
      REACT_APP_FIREBASE_API_KEY: ${{ vars.REACT_APP_FIREBASE_API_KEY }}
      REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ vars.REACT_APP_FIREBASE_AUTH_DOMAIN }}
      REACT_APP_FIREBASE_PROJECT_ID: ${{ vars.REACT_APP_FIREBASE_PROJECT_ID }}
      REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ vars.REACT_APP_FIREBASE_STORAGE_BUCKET }}
      REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ vars.REACT_APP_FIREBASE_MESSAGING_SENDER_ID }}
      REACT_APP_FIREBASE_APP_ID: ${{ vars.REACT_APP_FIREBASE_APP_ID }}
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXX }}'
          projectId: XXXXX
          expires: 2d

This reads the variables stored for the repo's GitHub Actions and makes them available to all your pipeline steps being executed within the build_and_preview job.

If you had more sensitive data to store, you could possibly store those in GitHub secrets (at https://github.com/<your-username>/<your-GitHub-project-name>/settings/secrets/actions ) available to your GitHub Actions as well and then make them available to your deployed code in a similar fashion as we did with variables.