Adding Font Awesome Pro to your CI/CD Pipeline using GitHub Actions and Azure

I've been working on an SSR flavored Nuxt.js app that needed to leverage Font Awesome Pro. Font Awesome has excellent documentation how to install Font Awesome Pro with npm or yarn locally, but I needed to make a few tweaks to get it to play nicely with our particular app and CI/CD flavors.

This post assumes you already have a working Nuxt.js SSR app deployed to Azure with Github Actions.

First, since we are leveraging CI/CD, we want to set Font Awesome Pro up on a per project basis, so we need to create a .npmrc file in the root of our project.

Contrary to the instructions provided, since we are leveraging Github Actions and Azure as part of our CI/CD pipeline our .npmrc file should only contain @fortawesome:registry=https://npm.fontawesome.com/

Next, we need to install Font Awesome Pro locally by running

FONTAWESOME_NPM_AUTH_TOKEN=YOUR_OWN_TOKEN_HERE npm install --save @fortawesome/fontawesome-pro

Then, we need to set up the Font Awesome Pro Token as a GitHub Secret on our repo, so click on over to secrets on your repo and add your key there and click save.

Next, we need to adjust the GitHub Actions workflows yaml file in our local branch to be able to reference our key in the CI/CD pipeline, as follows:

- name: Install dependencies using a safe clean install, build and test
run: |
npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}"
npm ci --ignore-scripts

Note, in our yaml file, the pipe after our run: is a block scalar that indicates new lines in our block should be preserved.

Finally, let your scripts deploy your app to Azure and enjoy your lovely Font Awesome Pro icons.

I hope this helps folks who run in to some of the same issues I did on first go round with these frameworks and services.