Jonathan Scheiber

Build assets with Webpack Encore on Github Actions

Read time: 3 minutes One comment
Build assets with Webpack Encore on Github Actions

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 with regard to private repositories, I wanted to see what it looked like to compare with

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. 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
    - master
    - staging

    name: Yarn
    runs-on: ubuntu-latest
    - name: Checkout
      uses: actions/checkout@v2
    - name: Cache node_modules
      uses: actions/cache@v1
      id: yarn-cache-node-modules
        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
        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 :)


Posted by Max on 15/02/2024 at 13:54.
Thats great, but how do you go on from there. You have now your artifact, ok. Whats next? How to bring it into my deploy process / the repository?

GHA helps here if your hosting does not allow npm/yarn to run. Maybe you can assist . :)

Add a comment