Jonathan Scheiber

Github Actions are available for a while now. But, how to build assets with Webpack Encore to create a build that will be used by eg. your deployment system?

Since the opening of Github.com with regard to private repositories, I wanted to see what it looked like to compare with Gitlab.com.

It is also a research lead for my current employer, to no longer use a private instance of Gitlab (as well as its runner CI) and to reduce costs. Gitlab.com is a no-go, in my opinion, because of the many downtimes and the latency time that is too high for my taste (for professional projects).

However, my (homemade) deployment system retrieves the latest build of the assets from Gitlab, so I had to be able to do almost the same thing on Github.

Here is the code:

name: Build assets
on:
  push:
    branches:
    - master
    - staging

jobs:
  yarn:
    name: Yarn
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
    - name: Cache node_modules
      uses: actions/cache@v1
      id: yarn-cache-node-modules
      with:
        path: node_modules
        key: ${{ runner.os }}-yarn-cache-node-modules-${{ hashFiles('**/yarn.lock') }}
        restore-keys: |
          ${{ runner.os }}-yarn-cache-node-modules-
    - name: Yarn install
      if: steps.yarn-cache-node-modules.outputs.cache-hit != 'true'
      run: yarn install
    - name: Yarn build
      run: yarn run encore production
    - name: Archive production artifacts
      uses: actions/upload-artifact@v1
      with:
        name: build
        path: public/build

Some explanations

First, I give a name to my workflow ("Build assets") which I will use to identify it when I go check the action status, and I specify under what condition the workflow must be executed: here, only when I push commits on the master and staging branches.

Then, in chronological order:

1. Define on which operating system the script will be launched, here ubuntu-latest (others are available, among which Windows & macOS);
2. Checkout the project code;
3. Define a cache on the node_modules folder so that it won't have to redownload everything for each build (which will save minutes in the context of private projects). It's based on the content of the yarn.lock file in order to define whether the content will be the same or not;
4. Run yarn install if the yarn.lock file has changed;
5. Build the assets using Webpack Encore;
6. And finally, create an artifact named build with the content of the build.

Et voilà! Your workflow can now build your assets with Webpack Encore :) (or any other bundler)

If you have any remarks, questions, suggestions... about this article, feel free to comment it :)