Github actions tweaks

Here there are some cool tricks you can do to improve your Github Actions.

Caching your packages

How many times you have re-installed all of your packages in your actions even when no packages were changed?
This is not only time consuming but it can actually cost you more money as Github actions are charged based on the time they actually run;
you can have a look here in case you are interested 😉

How

To cache our modules we will use the actions/cache@v2 action

Here is an example of caching npm dependencies for Linux/MacOS

- name: Cache node_modules 📦
  uses: actions/cache@v2
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

Here you can see it in a Github Action used for deploying my svelte-kit powered blog to gh-pages 🚀

Create strings based on env variables

There are times where you need to be able to create a string based on env variables.
The most common case is when you want to create a path using one or more env variables;

How

name: paths-printer 🦄

env:
  BASE_URL: "https://example.com/"
jobs:
  print-stuff:
    runs-on: ubuntu-latest
    steps:
      - name: Create paths from env variables
        # this outputs "IMAGES_PATH: https://example.com/assets/img/"
        run:  echo  "IMAGES_PATH: ${env.IMAGES_PATH}"
        env:
          IMAGES_PATH: "${{ env.BASE_URL }}assets/img/"

Use a custom npm config

This is very handly when you are working with private packages 📦
The idea is to store your PAT TOKEN for accessing your packages in your repository secrets and then use it on a custom npm config file.

📝Note that we can just use the default .npmrc but it is a good idea to keep the npm config for your github actions separated.

How

In order for it to work we need to:

1. an npm config file 🦄
   • includes the configuration for our private github packages
   • we will take the PAT TOKEN from an env variable
   • we can name it anything that we want
   • place it in the project root folder
2. set our action to use our npm config file ✨
3. create a PAT TOKEN
4. place the PAT TOKEN in our repository secrets

Lets have a look at a case where we are using private github packages

1. Create the npm config file

Create a file named .ci.npmrc in the root folder of your project and place the following contents:

@your-scope:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

💡 Remember to replace "@your-scope" with your scope

1. Set the action to use our custom npm config file

- name: Install dependencies ✨
  run: npm ci
  env:
    NPM_CONFIG_USERCONFIG: .ci.npmrc
    NODE_AUTH_TOKEN: ${{ secrets.PAT_TOKEN }}

1. Create your PAT TOKEN Follow the instructions here When you are on the step 7 permissions and scopes:

• make sure to select the "write:packages" option!
• the "read:packages" is enabled as well
• Continue to the next steps and keep your PAT TOKEN ready!

1. Place the PAT TOKEN to your repo secrets Go to your repository on github:
   1. Click on "⚙️settings" tab
   2. Select "Secrets"
   3. Click on "New repository secret"
   4. Set the "name" to be "PAT_TOKEN"
   5. Paste your token in the "value"
   6. Select "Add secret"

Summary 👨🏻‍💻

We have explored ways to improve the performance of our github actions using caching.

Then we explored how we can create strings dynamically from env variables and finnaly we had a look in configuring our npm config for using private github packages in a secure and scalable way 😉.

Happy coding 😄 !!!

(The original post was published here)

Comments

[David Dal Busco]

The caching tricks is such a cool idea, thanks for the share Achiles 👍