Passing env variables in GitHub actions

[rahul-sharma-nyz]

Hi,

I am using GitHub actions for CI/CD for my CRA.

// App.js
import React from 'react';
...
const secret = process.env.REACT_APP_MY_SECRET;
...

This works well on local but fails the CI/CD because the secret variable is not found.
How do I pass env variables in GitHub actions?

[eddiemonge]

I found this result by Googleing github actions environment variables: https://help.github.com/en/actions/configuring-and-managing-workflows/using-environment-variables

Also see @rahul-sharma-nyz comment about keeping the secret from being exposed.

[trdp30]

Thanks @eddiemonge.

[rahul-sharma-nyz]

For future readers, if you don't want to expose your secret in the workflows/*.yml file, you should store it as GitHub secret token and then import it as:

steps:
  - name: Hello world
    run: echo Hello world $FIRST_NAME $middle_name $Last_Name!
    env:
      REACT_APP_MY_SECRET: ${{ secrets.MY_SECRET }}

[trdp30]

Thanks @rahul-rxr, I was in the confusion for defining the variable.

[justinfarrelldev]

Thank you, you're a lifesaver @rahul-rxr!

[ITurres]

Hey @eddiemonge and @rahul-sharma-nyz, it's been nearly four years since you guys kicked off this discussion, and I must say, the insights shared have been invaluable to me and my team! 🚀 Thank you both so much for your contributions! 🙌

[r3ing]

@rahul-sharma-nyz
I had the same problem deploying on firebase hosting, and I found the solution in the following documentation
https://create-react-app.dev/docs/adding-custom-environment-variables, I was able to solve it this way:
..............................

- name: Install 
  run: npm install
- name: Build
  run: REACT_APP_ANYNAME=${{secrets.ANYNAME}} 
         REACT_APP_ANYNAME=${{ secrets.ANYNAME}}
         REACT_APP_ANYNAME=${{secrets.ANYNAME}} npm run build

[ABOBAKAR-IT]

on:
push:
branches:
- main

jobs:
deploy:
name: Deploy to EC2
runs-on: ubuntu-latest
env:
VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}

steps:
  - name: Checkout Repository
    uses: actions/checkout@v4

  - name: Setup Node.js
    uses: actions/setup-node@v4
    with:
      node-version: '20'
  


  - name: Install Dependencies
    run: npm install

  - name: env setup
    run: | 
      export VITE_API_BASE_URL=${{secrets.VITE_API_BASE_URL}} 

  - name: Build Project
    run: npm run build