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 }}
Top comments (1)
Hi, thanks :)
Helped me while deploying my Nuxtjs static web app to Github Pages.
There was just one difference that I should create my secrets in github-pages environment (github.com/[USERNAME]/[REPOSITORY]...).
And then add env section to generate step with my secrets like this: