Skip to main content

GitHub Actions

GitHub Actions is the CI/CD service offered by GitHub. It's seamlessly integrated in the GitHub ecosystem, offering features like mandatory checks before pull requests can be merged.

When initialized, GitHub monitors the repositories which we asked it to. For every commit that is pushed, it looks for instructions from a .yml or .yaml file. If such a file is found in the .github/workflows folder, GitHub runs these instructions.

Writing Actions in YAML​

YAML is a data serialization language designed to be human-friendly. This language is often used in CI/CD pipelines and configuration files. It might ease you in knowing that YAML is a superset of JSON and all it does is hold data. YAML files rely heavily on indentation and don't have good error messaging out of the box. If you ever feel bewildered by syntax errors in the YAML file, consider using a YAML linter.

Let's write our Action:

.github/workflows/build-app.prod.yml
on: push

jobs:
  build:
    name: Build application
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "22"
          cache: npm

      - name: 🧰  Install
        run: npm ci --production-only

      - name: 📦  build
        run: npm run build

So what is happening here?

  1. GitHub requires the on key which supplies the events that trigger the workflow. This workflow runs on any push to the repository;
  2. The jobs array defines all tasks that we want to have performed;
  3. We define our first job build;
  4. runs-on configures the job to run on a fresh virtual machine hosted by GitHub;
  5. In steps we start out by checking out our current branch using a 3rd party action;
  6. And finally we install our node_modules using npm ci --production-only, which stands for clean install and installs the modules omitting the dev-dependencies.

If everything works accordingly, you will see checkmarks in your GitHub PR indicating the success or failure of your build!

Other commands​

One more check we might want to add in our application is making sure there aren't any ESLint errors.

ESLint has a command-line interface (CLI) for this. We can use NPM to execute these CLI commands for us by just having ESLint as a package in our package dependencies. Checkout the ESLint CLI to get a better idea of the CLI.

After that add a script key and value in the package.json. This script is going to run the ESLint check for us:

{
  "lint": "eslint '*/**/*.{js,ts,tsx}'"
}

Finally run the script in the GitHub Actions, before the build step:

- name: 🧹 Run lint
  run: npm run lint

Further reading​