React CI/CD with GitHub Actions Tutorial: Playwright Tests
From portfolio to production: ship React with confidence
This React CI/CD with GitHub Actions tutorial shows how to take a personal portfolio app and ship it like production software. You will wire up automated builds, Playwright end‑to‑end tests, and simple uptime checks so your project demonstrates discipline employers recognise.
Rather than tossing code over the wall, you will learn how each commit moves through linting, unit tests, a reliable build, browser‑level checks, and a safe deploy. We focus on choices that keep feedback fast, keep failures readable, and keep costs low.
By the end, you will understand the path from local React changes to a monitored, deployed site, the decisions behind each pipeline stage, and how to adapt the approach for solo work, team collaboration, or client demos.
React CI/CD with GitHub Actions: the pipeline you will build
- On pull requests: install dependencies with caching, run lint and unit tests, type‑check if applicable, build once, run Playwright UI tests against a preview, and attach clear logs to the PR.
- On merges to main: repeat critical checks, build a production artefact, deploy to your chosen host, run a quick smoke test against the live URL, and create a lightweight release tag.
- On a schedule: perform a heartbeat check of your site and surface failures as Issues or notifications.
Set up your repo and environments first
Decisions to make
- Branch model: feature branches and pull requests targeting main or develop.
- Node version: pick a stable LTS and use it everywhere (local and CI).
- Environment variables: define development, preview/staging, and production values; store secrets in GitHub’s Environments.
- Package scripts: standardise lint, test, build, preview so CI can call them consistently.
- Artefacts: keep the built output and Playwright traces as downloadable artefacts to speed debugging.
Fast feedback (run on every PR)
- Install with cache and a locked dependency file.
- Static checks: ESLint and optional TypeScript.
- Unit tests in headless mode with concise output.
- Build once; fail early if the build breaks.
Gatekeepers (block merges)
- Playwright flow tests on a preview build or ephemeral URL.
- Accessibility smoke (key pages render without obvious a11y failures).
- Basic performance smoke: page responds and main bundle served.
- Required checks in branch protection before merge.
Playwright tests that survive CI flakes
Principles
- Test user‑critical journeys only: load homepage, navigate to a key route, submit a simple form, and verify a success message.
- Use role‑based and text selectors over brittle CSS selectors.
- Run the app once per job and point Playwright to that URL; avoid starting multiple servers.
- Capture traces, screenshots, and videos on failure; upload them as artefacts.
- Use minimal retries for known flake points, not blanket retries everywhere.
Mistakes to avoid
- Testing every pixel; validate outcomes and critical UI, not layout minutiae.
- Hard‑coding timeouts instead of waiting for network or element state.
- Skipping e2e on pull requests; fix problems before they reach main.
Choose a deployment target for a React SPA
Pick a host that fits SPA routing, preview deploys, and secrets handling. Any of the options below can work well for a portfolio or early production use.
| Option | Preview deploys | SPA routing | Secrets support | Best for |
|---|---|---|---|---|
| GitHub Pages | Via PR build artefacts or external action patterns | Needs 404.html fallback | Limited; pair with Actions Environments | Simple static sites under the same repo |
| Netlify | Built‑in deploy previews | Native redirects | Environment variables per context | Fast previews and easy SPA setup |
| Vercel | Built‑in preview URLs | Framework‑aware routing | Environment variables by environment | Frictionless front‑end deployments |
| AWS S3 + CloudFront | Custom with per‑branch buckets or prefixes | Custom error/redirect rules | Secrets via GitHub + AWS credentials | Granular control and enterprise patterns |
Key insight: Favour a target that gives you automatic previews on pull requests. Reviewers catch routing and asset issues before they ship.
Basic uptime and smoke monitoring
Zero‑cost with GitHub Actions
- Schedule a workflow to request your homepage and a health endpoint.
- On failure, open or update a GitHub Issue and label it for visibility.
- Optionally post a short summary to your team channel via a webhook secret.
External services
- Use a free uptime monitor to ping your site every few minutes.
- Add a keyword check for a known string on the page to catch blank renders.
- Keep alerts simple: email first; expand to chat as the project grows.
Protection rules and quality gates
Recommended rules
- Require status checks to pass before merging to main.
- Enforce linear history and a minimum number of approvals.
- Lock environment secrets to specific branches and reviewers for production deploys.
- Block force‑push to protected branches; allow auto‑cancel of superseded runs for speed.
Speed and reliability tips
- Cache dependencies by lockfile and Node version to cut minutes from every run.
- Build once per workflow and reuse the artefact for tests and deploys.
- Split jobs: quick checks first, then e2e and deploy, so feedback lands early.
- Use concurrency to cancel older runs on the same branch.
Three sensible setups you can copy
Starter Solo learner
More Structured Team‑ready
Reliability‑first Production‑minded
Final guidance
Ship small, verified changes. Keep the pipeline readable, fail fast on pull requests, and treat Playwright as a user‑journey safeguard rather than a pixel‑perfect judge. Add simple uptime checks so you know when things regress. With these habits in place, your React project moves from portfolio piece to production‑ready work that stands up to scrutiny.
Turn what you just learned into a real IT career move
Whether you want to build job-ready skills, follow a structured career path, or get expert advice before choosing a course, Codionix IT Training UK can help you move forward with confidence.
Explore IT Courses
Browse instructor-led training across cloud, cybersecurity, networking, data, support, digital skills, and more.
View CoursesView Career Paths
See structured pathways designed to help you progress toward roles like helpdesk technician, network engineer, ethical hacker, and beyond.
Explore Career PathsBook Free Consultation
Not sure which course or path fits you best? Speak with the team and get clear, practical guidance before you commit.
Get Free AdviceRelated articles
INP Optimisation in React and Next.js: Interaction Fixes
Discover practical fixes to reduce INP and input delays in React and Next.js. Step-by-step approaches backed by Lighthouse data and field insights for UK developers.
Bun vs Node.js vs Deno 2026: Which to Learn First (UK)
This UK-focused comparison weighs the strengths and maturity of Bun, Node.js, and Deno in 2026. It highlights what each runtime means for your portfolio, hiring prospects, and real-world project work.
Next.js on AWS vs Azure for UK SMEs: Serverless Path Decisions
A practical decision matrix for UK SMEs comparing Next.js deployments on AWS and Azure. Discover costs, data residency, and developer experience to choose the right serverless path.
Free IT Training Consultation
Use the calendar to book your free one-to-one course advice session with a Codionix IT training expert. Get personalized career guidance to help you choose the best online IT course in the UK for your goals. We’re happy to answer any questions you may have and help you determine which of our training programs best fit your needs.
How it works?
You schedule a call at your convenience
We do a free discovery and consulting meeting
We guide you towards the best career path for you
Your benefits:
- Personal Guidance
- Course Clarity
- Career Focus
- Honest Advice
- Stress-Free
- Clear Direction
Find us on:
Schedule a Free Consultation
Not sure which IT course is right for you? Book a free consultation and get expert guidance from our team — no cost, no pressure.
