Adding Environment Variables To GitHub Actions

This article walks through how to pass environment variables to GitHub Action Workflows. I recently set up GitHub actions on this site to automatically run unit tests whenever I open a new Pull Request to ensure that changes to the site were not introduction breaking changes to unit tests under the radar.

I ran into some hiccups when setting it up so that the workflow could install the Font Awesome dependency which requires an NPM token. I went through a few of my GitHub Actions build minutes while testing how to properly pass environment variables to my .github/workflow/test.yml file. Hopefully this article saves you some time and build minutes the next time you set up environment variables for GitHub Actions.

In order to setup my GitHub Action, I modeled my new GitHub Action workflow after similar functional workflows and expected everything to run smoothly. However, I merged the pull request with my changes and saw on the Pull Request that the step of the GitHub Action workflow that installed dependencies failed with the following error:

error An unexpected error occurred: "Failed to replace env in config: $
{FONTAWESOME_NPM_AUTH_TOKEN}"

And then I remembered 💡 my site requires an environment variable to build and deploy. Locally I have .npmrc file that sets up the the npm configuration to pass in the appropriate environment variable for my site and looks like:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

In particular the GitHub Action workflow did not have access to the FONTAWESOME_NPM_AUTH_TOKEN which I have set in my local bash profile and passed into the .npmrc file. So I needed to give the GitHub repository that is running this actions access to the environment variable by going to its settings page. You can access settings by clicking "Settings" in the repository's navigation. The url to update secrets for a repository (at the time of this writing) looks like: https://github.com/username/repo/settings/secrets where username and repo should be replaced with the username and repo of the desired repository and clicking "new secret".

Above is a screenshot of what the secrets page under my repository settings looked like once I added the FONTAWESOME_NPM_AUTH_TOKEN.

Now, that my repository had access to the environment variable I needed to update each job within my action to also have access to the variables. Before adding the environment variable to my repository my GitHub Action the job that installed dependencies looked like:

 - name: Install Dependencies
      run: npm install

after adding the environment variable I updated the dependency installation job to:

- name: Install Dependencies
      run: |
        npm config set //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
        npm ci
      env:
        FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}

npm config set allowed me to manually set the npm configuration outside of the .npmrc file and pass in the appropriate environment variable. I also updated npm install to npm ci which installs a project with a clean slate and is better suited for a CI environment. Finally after the run values I passed in a env key that contained FONTAWESOME_NPM_AUTH_TOKEN which referenced ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} a.k.a the secrets from this GitHub repository.

The full GitHub action workflow I ended up using to install all dependencies (including Font Awesome which required a token ) and running unit tests looked like the below. Note: the test command also needed access to the same environment variable and needed it to be set separately in order for the GitHub Action to succesfully run without running into the error we saw earlier with retrieving the environment variable.

name: CI

on:
# will run on all PRs that are opened or updated (synchronized)
pull_request:
  types: [opened, synchronize, reopened]

jobs:
test:
  name: Test
  runs-on: ubuntu-latest
  env:
    CI: true
  steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 13.x
      uses: actions/setup-node@v1
      with:
        node-version: 13.x
    - name: Install Dependencies
      run: | # run multiple commands
        npm config set //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
        npm ci
      env:
        FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
    - name: Test
      run: | # run multiple commands
        npm config set //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
        npm run test
      env:
        FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}