17-313 · Recitation 9

CI/CD
with Vercel

Ship it. Preview it. Protect it.

→ next · F fullscreen · N notes · T light/dark

Today

PART 1 · ~10 MIN

Deploy

Your game, live on the internet.

🚀
PART 2 · ~15 MIN

Preview

Change it without touching the live site.

👀
PART 3 · ~15 MIN

Protect

Stop broken code at the door.

🛡️

cmu-313.github.io/recitations/reci9-vercel

“It works on my machine.”

So how does it get to
everyone else's?

Teams answer this many times a day. The answer is a CI/CD pipeline.

CI · Continuous Integration

Every change gets tested automatically, before it merges.

Catch problems while they're small and cheap to fix.

A passing CI run on GitHub Actions
A CI run on GitHub Actions: the test job passed
CD · Continuous Deployment

Every change that lands on main goes live automatically.

No release day. No copying files to a server.

Vercel's Deployments tab
Vercel's Deployments tab: one deploy per push

The pipeline

Real pipelines test first. Today we build it back to front, CD first and CI last, so you feel why the tests matter.

Meet Vercel

🔗 Connects to your GitHub repo
🚀 Builds and deploys every push
👀 Gives every branch its own preview URL

Free Hobby plan. Similar tools: Netlify, Render, Cloudflare Pages, GitHub Pages.

Vercel's home page
vercel.com

Today's playground: 2048

STARS
13,000+
FORKS
17,000+
SINCE
2014
LICENSE
MIT

A real, popular repo. Not a sandbox.

The original 2048 game
gabrielecirulli/2048: plain HTML, CSS, and JavaScript
PART 1
Deploy

Your own 2048, live on the internet.

Fork→ Import into Vercel→ Live URL
Vercel's Import Git Repository page
Vercel's “Import Git Repository” page
YOUR TURN
Go do Part 1
Steps 1–2 · about 10 minutes
10:00
Done when your game is live at 2048-<andrewid>.vercel.app
cmu-313.github.io/recitations/reci9-vercel

What just happened?

Vercel now watches your master branch.

Every push → a fresh deploy.

That's continuous deployment.
● ● ●https://2048-<andrewid>.vercel.app
The game, live at its vercel.app URL
Live for anyone with the link
PART 2
Preview

Change the game without touching the live site.

master
→
2048-<andrewid>.vercel.app
production · what everyone sees
restyle
→
2048-git-restyle-….vercel.app
preview · just a link to share

Make it yours

Tron: Legacy themed 2048
Exhibit A: your TA is a Tron: Legacy fan · ▶ Play live
🎨
Your theme
🕹️
Your neighbor's

Redesign the game with AI. Colors, fonts, a whole theme: go wild.

The one trap

GitHub's compare page, with the base repository set to the original project
The base repository starts out as the original project, not your fork

A fork's pull requests point at the original repo by default.

Exhibit B

Your TA fell for it

while testing today's recitation.

13,000 stargazers would love to review your redesign.

Harmless, though: just close the pull request.

A stray pull request on gabrielecirulli/2048, now closed
gabrielecirulli/2048#645
YOUR TURN
Go do Part 2
Steps 3–6 · about 15 minutes
15:00
Done when your production site shows your new design
cmu-313.github.io/recitations/reci9-vercel

Same repo, two URLs

Production: the original game
Production (master) before the merge
Preview: the redesigned game
Preview (restyle) · ▶ Play live

Reviewers try a change at its preview URL. Merging promotes it to production.

PART 3
Protect

Right now, anything merged goes live. Even a broken game.

2+2=6 → merged → live for everyone

CI with GitHub Actions

name: CI

on:
  push:
    branches: [master]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
      - run: node --test test/game.test.js
  • Whenevery pull request, and every push to master
  • Wherea fresh Linux machine that GitHub lends you
  • Whatrun the test
2+ 2= 4✅

Our one test

CI reports.
Rules enforce.

Without a rule, a red ❌ is just a suggestion.

A ruleset on master: no pull request merges unless test passes.
The protect-master ruleset in GitHub's settings: active, with an empty bypass list, targeting the default branch
The protect-master ruleset: active on the default branch, with an empty bypass list
YOUR TURN
Go do Part 3
Steps 7–10 · about 15 minutes
15:00
Done when your break-it pull request shows ❌ and can't merge
cmu-313.github.io/recitations/reci9-vercel

What CI caught

A pull request with a failing test check and a blocked merge
test ❌ · Vercel ✅ · merge blocked
Discuss
Vercel still deployed a preview of the broken game. What kept it out of production?
▶ Play the broken preview

Delete self.score += merged.value; and push.

CI stays ✅. Why?

A test only catches what it checks.

You built a real pipeline

Deploy · Preview · Protect, the same loop real teams run many times a day.

🕹️

Show it off

Swap URLs with your neighbors and play each other's games.

Before you go: the Gradescope assignment.

cmu-313.github.io/recitations/reci9-vercel

Notes