Start learning free

LESSON 51 OF 58 · FULL-STACK: SHIPPING IT

Before Every Merge in JavaScript

Practice

Continuous integration (CI) means a machine checks every push for you. With GitHub Actions, a YAML file in .github/workflows/ says when to start (on: push) and what to do: a job that runs on a fresh machine, as a list of steps. The steps run in order, and the job stops at the first one that fails: the push gets a red X instead of a green check.

The machine starts empty. actions/checkout copies your repository, which has no node_modules, so each package folder needs its own npm ci before its tests or its build can run. npm --prefix client … runs an npm command in client/.

A step can have if:, a condition that decides whether it runs, and env:, variables for its command. Secrets live in the repository's settings, and ${{ secrets.NAME }} reads one. Here are two steps from another project: a lint on every push, and a chat message only on pushes to release:

      - run: npm run lint
      - run: node scripts/notify.js
        if: github.ref == 'refs/heads/release'
        env:
          CHAT_TOKEN: ${{ secrets.CHAT_TOKEN }}

The check reads your workflow and plays three pushes. With the finished file it prints, among other lines:

> a push to the branch wishlist
  step 8: run curl --fail -X POST "$DEPLOY_HOOK"
    skipped: github.ref is refs/heads/wishlist, so github.ref == 'refs/heads/main' is false
  the job passes: a green check on the push, so wishlist can be merged
> the merge into main
  step 8: run curl --fail -X POST "$DEPLOY_HOOK"
    POST to the host's deploy hook (DEPLOY_HOOK, from the repository's secrets): the host deploys the shop from main
  the job passes and the merge is live
> a merge into main that breaks a server test
  step 5: run npm test
    1 of the 2 tests of server/app.test.js fails: the job stops here
  steps 6 to 8 never run: the broken shop is not deployed, and main gets a red X

Your task: in .github/workflows/ci.yml, the job already checks out the code, sets up Node.js 22 and runs npm ci. Add the client's install, the server's and the client's tests, the build, and a last step that calls the host's deploy hook with curl, only on main, with its address from the secret DEPLOY_HOOK.


Assignment
Follow the Coding Tutorial to add the install, test, build and deploy steps to the shop's CI workflow.


Hint
Every - run: item lines up with - run: npm ci, six spaces in. if: and env: belong to the curl step, so they start at eight spaces, under the r of run. YAML allows no tabs.


STEP 1 OF 7
    Ctrl + Enter to check

    Fsship 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