CI/CD basics

Learn the continuous integration and deployment flow.

CI/CD basics

CI/CD automatically builds, tests and deploys code on every push. CI (continuous integration) safely merges changes to the main branch; CD (continuous deployment) ships the package to production.

A typical pipeline has these steps: install, lint, test, build, deploy. If any step fails the pipeline stops and the team is alerted.

For React projects the build output goes to dist/ or .next/; you upload it to a CDN.

Environment variables and secrets

In CI, secrets are never written to the repo; they are added in the platform settings. On GitHub you access them as secrets.API_KEY.

Environment variables like NODE_ENV=production steer build behaviour. In React you expose a variable to the client with the VITE_API_URL or NEXT_PUBLIC_API_URL prefix.

A secret must never leak into the client bundle; it stays server-side only.

Exercise Write the CI workflow

Write a ci.yml workflow. Start with name: CI. Trigger on push with on: push. Inside a runs-on: ubuntu-latest job run npm ci && npm test.

Show example solution

name: CI
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test

Test yourself

What happens when the test step fails in a CI pipeline?
- The pipeline stops and the team is alerted
- Deployment still runs
- Only lint re-runs
- The code is auto-fixed
Show answer

The pipeline stops and the team is alerted — A failing step stops the pipeline.

Fill in the blank: expose a secret as an env var

env:
  API_KEY: ${{ ____.API_KEY }}

Show answer

env:
  API_KEY: ${{ secrets.API_KEY }}

Match CI/CD concepts

CI

Merges changes
CD

Deploys the package
pipeline

Sequence of steps
secrets

Hidden keys

Next lesson: GitHub Actions

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies