Stop 18 · DeploymentTopics · 6/9

CI/CD

Part of the Frontend Developer Roadmap

In short

Humans forget to run tests before deploying. Machines don't. CI/CD runs your checks on every push and ships only the code that passes.

Continuous Integration/Continuous Deployment — automatically running tests and deploying code on every push, removing manual, error-prone release steps.

The jaadu airport officer watches suitcases pass through an X-ray scanner towards a plane.

Think of it like this

Airport security check

Every bag goes through the scanner, every single time, no matter who you are. Only cleared bags reach the plane. CI is the scanner for your code, and CD is the conveyor belt that loads cleared code onto production.

Watch it happen

A pull request through CI/CD

Push / PR
npm ci
Lint+types
Test
Build
Deploy

1/6You open a pull request. GitHub starts the workflow on a fresh Ubuntu machine.

The big ideas

What you need to know

CI: check every change

Continuous Integration runs lint, type checks, tests and a build on each push or pull request.

CD: ship automatically

Continuous Deployment releases code to production once it passes all checks, without manual steps.

Block bad merges

Branch protection on GitHub can stop a pull request from merging until CI is green.

Pipelines are code

GitHub Actions workflows live as YAML files in .github/workflows, reviewed like any other code.

See it in code

Walk through the code

yaml
1# .github/workflows/ci.yml2name: CI3on:4  pull_request:5  push:6    branches: [main]7jobs:8  check:9    runs-on: ubuntu-latest10    steps:11      - uses: actions/checkout@v412      - uses: actions/setup-node@v413        with: { node-version: 22, cache: npm }14      - run: npm ci15      - run: npm run lint && npx tsc --noEmit16      - run: npm test && npm run build

1/4Run on every pull request and on every push to main.

This runs on every pull request and every push to main. If any run step fails, the job turns red and GitHub shows a cross on the commit.

Save yourself the pain

Common mistakes

Oops

Using npm install in CI.

Do this instead

Use npm ci. It installs exactly what the lock file says, so CI tests the same versions your teammates use.

Oops

Putting API keys directly in the workflow YAML.

Do this instead

Save them under repo Settings, Secrets, and read them as ${{ secrets.MY_KEY }} in the workflow.

Your mission

Add a green tick to your repo

~30 min

Quick check

Your CI passes locally but fails in GitHub Actions with a missing package. What's the most likely cause?

Go deeper

  1. 1Set up a pipeline (GitHub Actions, GitLab CI) that runs tests on every push.
  2. 2Add an automatic deploy step that only runs if tests pass.
  3. 3Learn the difference between CI (testing/building) and CD (deploying).

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge