Faster React Pipelines with Github Actions Dependency Cache

I’ve been having a bunch of fun with JavaScript these days. I try to build stuff with React and serverless on AWS Lambda (Sideproject: Cultooling).
In particular JSX and JS6 features are making me feel quite productive. What I hate is the truckload of dependencies that I have to initialize and work with. But I accept them and get by with them because of the ease of adding functionality. But what really grinds my gears is having to spend half of the compute time in my pipeline establishing dependencies. I publish my React application to S3 using Github Actions, so when they added a dependecy cache I saw an option to cut some time off.

To production we go

The help documentation is very useful, and I grabbed what I needed, and added it to my already existing Github Action pipeline.

    - name: Cache node modules
      uses: actions/cache@v1
      with:
        path: node_modules
        key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.OS }}-build-${{ env.cache-name }}-
          ${{ runner.OS }}-build-
          ${{ runner.OS }}-

Using this action with this configuration creates a cache of the path node_modules, using a hash of package-lock.json as a key. This ensures cache hits as long as dependencies are not changing, and misses when they change. Just as we want. restore-keys are the keys that will be tried to restore cache from.
The keys will be tried in order, and a hit will occur if the string in restore-keys is a partial match with a cached key.

If you want to use multiple cache paths, repeat this action for each.

Now drumroll and let’s look at the results:

While the pipeline is simple, half of the time spent running is on handling dependencies, so if we can get a nice speed up, simply by grabbing a tool off the Github shelf, I am not complaining.

The ease of S3 on AWS, has also made me believe that I will always be hosting static files there from now on. I had some issues getting this to work due to the AWS cli GH Action being broken. Luckily the fix is trivial as the ubuntu-latest that Github is providing contains both npm and aws-cli.
I have shared my Github Actions file for this pipeline. This will build and deploy to an S3 bucket assuming correct permissions has been setup on AWS, and the secrets AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY has been set on the repo. Please tell me where I have done it wrong – otherwise enjoy!

name: CI

on:
  push:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - name: checkout
      uses: actions/checkout@v1

    - name: Cache node modules
      uses: actions/cache@v1
      with:
        path: node_modules
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.OS }}-build-${{ env.cache-name }}-
          ${{ runner.OS }}-build-
          ${{ runner.OS }}-

    - name: Build and Test
      run: npm install && npm run build && CI=true npm test
    - name: Deploy to S3
      run: aws s3 sync build/ s3://cultooling.com --delete
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY:  ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: eu-west-1

I hope you found it useful reach out on twitter if you want to chat!