CI/CD basics
- React course
- Advanced
- Lesson 49/56
- 4 min
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.
Practice 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.
Starter code
# Write the CI workflow hereSample solution
name: CI
on: push
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm testQuestions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What happens when the test step fails in a CI pipeline?
- The pipeline stops and the team is alerted Correct answer
- Deployment still runs
- Only lint re-runs
- The code is auto-fixed
Explanation: A failing step stops the pipeline.
2 Fill in the blank: expose a secret as an env var
env:
API_KEY: ${{ ____.API_KEY }}env:
API_KEY: ${{ secrets.API_KEY }}Explanation: Secrets are accessed with secrets.
3 Match CI/CD concepts
| Term | Meaning |
|---|---|
CI |
Merges changes |
CD |
Deploys the package |
pipeline |
Sequence of steps |
secrets |
Hidden keys |