Motivation

Imagine you're building a blogging app with friends. One teammate adds a slick “sort by date” feature—awesome! But suddenly, the whole app breaks. Why? Their code didn’t play nice with the rest. Enter CI/CD, your team’s superhero.

CI/CD stands for Continuous Integration and Continuous Deployment (or Delivery). It automates the testing and deployment process, helping your team build confidently, fix issues early, and get updates out fast. Big platforms like TikTok, Medium, and Netflix rely on CI/CD pipelines to ship updates multiple times a day—while keeping things stable.

It’s also about collaboration. Ever had a group project where your code worked perfectly—on your machine? CI/CD ensures it works everywhere. And yes, it’s beginner-friendly! You don’t need to be a DevOps wizard to get started—we’ll prove it today.

Section 1: What is CI/CD and Why It Matters

🧩 Why It Matters

When working as a team, manually combining everyone’s code and deploying it yourself becomes a bottleneck fast. CI/CD automates this pain away. Instead of saying “It broke after your commit!” we can say “CI caught the bug—let’s fix it before it goes live.”

Let’s break CI/CD down:

• Continuous Integration (CI) means developers regularly merge code into the shared repo. Each merge triggers automated tests that check if everything still works.
• Continuous Delivery (CD) ensures that once code is tested, it’s always in a deployable state—though a human may still trigger the release.
• Continuous Deployment (also CD) takes it one step further: after passing tests, changes are automatically deployed to production—no human input needed.

🔁 The CI/CD Infinity Loop

This diagram shows CI/CD as an infinity loop, reflecting the continuous nature of modern software delivery.

🔷 Continuous Integration

1. Plan – Teams define tasks, bugs, and features through user stories or tickets.
2. Code – Developers build features or fix bugs in isolated branches.
3. Build – Code is compiled or bundled. For React, that’s tools like Webpack or Vite; for JavaScript backends, it might involve Babel or packaging Docker containers.
4. Test – Automated unit and integration tests run to catch issues. Tools like Jest, Vitest, ESLint, and Prettier enforce quality.

💬 Ask your class: “Who’s had something work on their machine but crash on a friend’s?”
Expect chuckles.
That’s why automated CI testing exists—to avoid that embarrassment.

🔷 Continuous Delivery & Deployment

1. Release – After passing tests, code is bundled and made ready for deployment.
2. Deploy – The release is pushed to staging or production, often via tools like GitHub Actions, Jenkins, or Vercel.
3. Operate – The system is live. DevOps teams monitor uptime and health.
4. Monitor – Logs and analytics help teams understand usage and catch issues fast.

Real-World CI/CD Wins & Woes

✅ Success Story: Shopify

Shopify deploys thousands of times a day using CI/CD. Every change—from a minor UI tweak to a new checkout flow—goes through automated testing, canary releases (to a small group first), and production rollout with confidence. This velocity is only possible with solid CI/CD.

❌ Failure Example: Knight Capital Group

In 2012, Knight Capital deployed code to production without fully testing it through a CI/CD pipeline. A missing config flag caused a trading algorithm to malfunction, losing $440 million in 30 minutes. A proper CI/CD pipeline could have caught this in staging.

CI/CD in Full-Stack Projects

Let’s map this to our blogging app built with React (frontend), Node.js (admin backend), and Next.js (full-stack framework):

• CI tests your React UI (e.g., does “filter by tag” work?).
• Linting ensures your Node.js code is consistent and error-free.
• CD deploys your Next.js site (w.g. Vercel) so users always get the latest posts.

Even in small apps, this automation is a lifesaver.

Section 2: Setting Up CI with GitHub Actions

🔍 Overview

GitHub Actions is a built-in CI/CD tool. It acts like a mini robot inside GitHub that runs every time you push code—checking for errors, running tests, and more.

Key structure:

• Workflow File: .github/workflows/ci.yml
• Trigger: On push or pull request to main
• Steps: Lint, test, build—automated!

🔧 CI/CD Key Concepts (with GitHub Actions)

• Pipelines: The ordered steps—like “lint → test → build → deploy.”
• Workflows: The YAML files that define what the pipeline should do.
• Triggers: What sets it off—usually a git push or pull request.
• Jobs: Groupings of steps like “run all tests.”
• Steps: Individual actions like installing dependencies.
• Actions: Reusable components built by others (or you!).

Automation tools we’ll use: GitHub Actions (today), and later Vercel, CircleCI, and Jenkins.

✨ Hands-On Example

Here’s a minimal pipeline to test our blog’s homepage:

Test File (pages/index.test.tsx):

import { render, screen } from '@testing-library/react';
import Home from './index';

test('displays blog title', () => {
  render(<Home />);
  expect(screen.getByText('My Awesome Blog')).toBeInTheDocument();
});

GitHub Actions YAML (.github/workflows/ci.yml):

name: CI Pipeline

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install Dependencies
        run: npm install
      - name: Run Linting
        run: npm run lint
      - name: Run Tests
        run: npm test
      - name: Build Project
        run: npm run build

🧪 Try It

1. Clone the repo: https://github.com/WesternSydneyUniversity/comp3036-ci-cd-introduction
2. Add a small change (or a bug).
3. Push it.
4. Watch GitHub Actions catch it immediately!

🧪  Try It Locally

I (Tomas) have been working with Github actions a lot and found that doing small changes to Github Actions can be really tedious, going through many commits to get it right. Luckily, there is a tool that you can use to run Github Actions locally. You need the following:

1. Local installation of Docker Desktop
2. The ACT tool

3. ⚠️ In the config of Docker desktop “Settings > General > Virtual Machine Options” I had to chang tho gRPC fuse as file sharing implementation:
   
    

   

Happy coding!

Conclusion: CI/CD Takeaways

• CI/CD makes your app safer, your team faster, and your life easier.
• It’s not just for big tech—it’s perfect for student projects, too.
• Automate early. Test constantly. Let your tools catch bugs, so your users don’t.

❗ Pro Tip: Skipping tests to “save time” will cost more time later when things break. Trust your robot helpers!