Adding Environment Variables To GitHub Actions
Tags: tutorial, github, actions, opensource
Published: 2020-08-24 14:32:29

---
title: Adding Environment Variables To GitHub Actions
published: true
description: This article  walks through how to pass environment variables to GitHub Action Workflows
tags: [tutorial, github, actions, opensource]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8yqsc6035ho43em5273j.jpg
canonical_url: https://www.aboutmonica.com/blog/adding-environment-variables-to-github-actions
---

This article walks through how to pass environment variables to [GitHub Action](https://github.com/features/actions) 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`](https://docs.npmjs.com/configuring-npm/npmrc.html) 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".

![](https://dev-to-uploads.s3.amazonaws.com/i/k0ypm40kknkvgx5tbaea.png)

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:

```yml
 - name: Install Dependencies
      run: npm install
```

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

```yml
- 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.

```yml
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 }}
```