Skip to content

Ship a change, and break one on purpose

Change the footer, watch it go live without touching AWS, then see a broken build get stopped.

About 25 min · Verified 8 October 2026

0 of 9 steps done0%
On this page

Part 1: a change that ships#

The page footer says "ShortLink — a DevOps with AWS workshop project." You will add a line to it. It is a harmless, visible change that no test checks.

Create a branch#

Your computerBranch from an up-to-date main
git switch main
git pull origin main
git switch -c footer-note

Open shortlink-web/src/App.jsx and find the footer text (around line 114):

shortlink-web/src/App.jsx
-            ShortLink — a DevOps with AWS workshop project.
+            ShortLink — a DevOps with AWS workshop project. Deployed by my own CI/CD pipeline.

Test and build locally first#

Your computerNever push what you have not run
npm --prefix shortlink-web test
You should see
Tests 23 passed (23)

Commit, push the branch, then merge#

Your computerCommit and push the branch
git add shortlink-web/src/App.jsx
git commit -m "feat(web): add a note about the pipeline to the footer"
git push -u origin footer-note

The pipeline does not start: it only listens to main. Merge when you are happy:

Your computerMerge into main and push
git switch main
git merge --no-ff footer-note -m "Merge footer-note"
git push origin main

Watch it go live#

shortlink-web-prod starts by itself within about a minute. When DeployWeb is green, hard-refresh <WEB_URL>.

You should see
The new sentence appears in the footer. You never ran aws s3 sync.

Part 2: break the build on purpose#

Introduce a syntax error#

Your computerA throwaway branch
git switch -c break-the-build

Add a line of invalid code at the end of shortlink-web/src/main.jsx:

shortlink-web/src/main.jsx
+const = ;

Run npm --prefix shortlink-web run build and see Vite refuse to build. Now push it to main anyway for the experiment:

Your computerPush the broken change
git add shortlink-web/src/main.jsx
git commit -m "chore: break the build on purpose"
git switch main
git merge break-the-build
git push origin main

See what the pipeline does#

The Build stage turns red and its log shows the Vite error. DeployWeb never starts. Reload your site: it is exactly as before, because the broken build never reached S3. aws s3 sync --delete would otherwise have replaced a working site with a broken one.

Revert#

Your computerUndo it
git revert --no-edit HEAD
git push origin main

A new execution tests, builds and republishes the good version.

Part 3: the API address is baked in#

This is the lesson that saves hours. Suppose you rebuild your load balancer and its address changes.

Change the variable and rebuild#

  1. Open CodeBuildBuild projectsshortlink-web-buildEditEnvironmentAdditional configuration.
  2. Change VITE_API_BASE_URL to the new address and Update environment.
  3. Nothing happens by itself, because the pipeline starts on commits, not on settings. Open CodePipelineshortlink-web-prodRelease change.

Until that rebuild finishes, the live site still calls the old address, because the old value is stored inside the JavaScript files. Open the browser developer tools → Network to confirm which host the calls go to.

Next: rollbacks and operations.

Found a mistake? Edit this page on GitHub.