๐Ÿฟ 3 min. read

Adding Environment Variables To GitHub Actions

Monica Powell

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:

1error An unexpected error occurred: "Failed to replace env in config: $
2{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:

1@fortawesome:registry=https://npm.fontawesome.com/
2//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:

1- name: Install Dependencies
2 run: npm install

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

1- name: Install Dependencies
2 run: |
3 npm config set //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
4 npm ci
5 env:
6 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 successfully run without running into the error we saw earlier with retrieving the environment variable.

1name: CI
2
3on:
4# will run on all PRs that are opened or updated (synchronized)
5pull_request:
6 types: [opened, synchronize, reopened]
7
8jobs:
9test:
10 name: Test
11 runs-on: ubuntu-latest
12 env:
13 CI: true
14 steps:
15 - uses: actions/checkout@v2
16 - name: Use Node.js 13.x
17 uses: actions/setup-node@v1
18 with:
19 node-version: 13.x
20 - name: Install Dependencies
21 run: | # run multiple commands
22 npm config set //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
23 npm ci
24 env:
25 FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
26 - name: Test
27 run: | # run multiple commands
28 npm config set //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
29 npm run test
30 env:
31 FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
32```

This article was published on August 23, 2020.


Don't be a stranger! ๐Ÿ‘‹๐Ÿพ

Thanks for reading "Adding Environment Variables To GitHub Actions". Join my mailing list to be the first to receive my newest web development content, my thoughts on the web and learn about exclusive opportunities.

    ย 

    I wonโ€™t send you spam. Unsubscribe at any time.

    Webmentions

    92
    • Vince Fulco ("It" or "Yoda")
    • Abdel Mejia ๐Ÿค–
    • laTiaLuci
    • Star woman๐Ÿ˜Ž๐Ÿฟ๐ŸŒŸ๐Ÿ‘‘
    • Shannon Clarke
    • Lorien
    • Ashnita Bali
    • Sibelius Seraphini
    • James Sorbello
    • Saron
    • Nep Montanez
    • Herakles Bogdanos
    • CodeLab ๐Ÿ”ฌ
    • Open Sauced
    • Jaclyn E. Jimรฉnez de Vries (she/her)
    • Tre Tuna
    • Aldo Avilรฉs Perata
    • Charles C. Pustejovsky III ๐Ÿ‘
    • Richard Hendricks
    • Mizar
    • Matt Harris
    • Catrina Dean
    • Prince Wilson
    • maxosen74
    • Ajuna ๐Ÿ‡น๐Ÿ‡ฟ
    • Mike Coutermarsh
    • Laurie
    • DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป
    • @ngel O. Rojas P.
    • Patrick Johanneson
    • Michael Liendo
    • Renรฉ-Jean Corneille
    • Jen Downs
    • Brian Douglas
    • Carolyn Stransky
    • Miguel Manjarres
    • Peter Frank
    • chanDev
    • TechBadGuy
    • Olumide Falomo.
    • +2