Start learning free

LESSON 125 OF 161 · FRONTEND: THE PROJECT AROUND THE CODE

Check Every Push in JavaScript

Practice

Your tests only help if someone runs them. CI (continuous integration) means a machine runs them for you on every push. On GitHub, you describe that work in a workflow: a YAML file in .github/workflows/. Its top-level keys are name, on (the event that starts it) and jobs. Each job runs on a fresh machine (runs-on) and lists its steps. A step either uses a ready-made action (uses:) or runs a command (run:).

Here is a tiny workflow that you start by hand from the Actions tab and that only prints a line:

name: Hello
on: workflow_dispatch
jobs:
  hello:
    runs-on: ubuntu-latest
    steps:
      - run: echo Hello from GitHub

The machine starts empty. It has none of your files, and no node_modules, because that folder is not in the repository. So the shop's job must copy the repository first (actions/checkout). Then it sets up Node.js (actions/setup-node, with a node-version and cache: npm) and installs the exact packages listed in package-lock.json (npm ci). Only then can it run npm test and npm run build. If any step fails, GitHub marks the push with a red X.

The check can't run GitHub's machines or npm. It reads your workflow and the project files and prints what each step would do. When your workflow is done, it prints (each step also says what it did):

> what GitHub does with .github/workflows/ci.yml on a push
  workflow: CI
  starts on: push
  job build, on a fresh ubuntu-latest machine
  step 1: uses actions/checkout@v6
  step 2: uses actions/setup-node@v6 with node-version 22, cache npm
  step 3: run npm ci
  step 4: run npm test
  step 5: run npm run build
  every push now installs, tests and builds the shop on Node.js 22: a broken test or build marks it with a red X

Your task: the file already has name: CI and a build job on ubuntu-latest with an empty steps:. Make it start on every push, then add the steps: checkout, setup-node with Node.js 22 and the npm cache, npm ci, npm test and npm run build.


Assignment
Follow the Coding Tutorial to write .github/workflows/ci.yml: the on: push trigger and the five steps that copy, set up, install, test and build the shop.


Hint
YAML reads the spaces at the start of each line, and tabs are not allowed. The items under steps: sit at six spaces and start with - uses: or - run:. with: goes at eight spaces under its item, and its keys at ten.


STEP 1 OF 8
    Ctrl + Enter to check

    Tools Ci in JavaScript

    Keep going with JavaScript1,600+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free