DEV Community

Aisalkyn Aidarova
Aisalkyn Aidarova

Posted on

🏠 Homework β€” Restaurant Company Real CI

Goal

You are the DevOps Engineer. A developer gave you the Restaurant Company source code.

Your job is to understand the application first, run its checks manually, and then automate them with GitHub Actions.

Part 1 β€” Get the latest code

Use your Restaurant Company repository.

cd restaurant-company

git switch main
git pull origin main
Enter fullscreen mode Exit fullscreen mode

Check:

git status
git log --oneline -5
Enter fullscreen mode Exit fullscreen mode

Part 2 β€” Investigate the application

Before running anything:

ls
cat package.json
Enter fullscreen mode Exit fullscreen mode

Students must find and write down:

1. What is package.json?
2. What scripts are defined?
3. What command is used for lint?
4. What command is used for build?
5. What dependencies do you see?
Enter fullscreen mode Exit fullscreen mode

Then:

ls package-lock.json
Enter fullscreen mode Exit fullscreen mode

Question:

What is the difference between package.json and package-lock.json?

They should be able to explain it in their own words.

Part 3 β€” Run manually

Run:

npm ci
Enter fullscreen mode Exit fullscreen mode

Then:

npm run lint
Enter fullscreen mode Exit fullscreen mode

Then:

npm run build
Enter fullscreen mode Exit fullscreen mode

Finally:

ls
ls dist
Enter fullscreen mode Exit fullscreen mode

Students should understand this flow:

SOURCE CODE
     ↓
npm ci
     ↓
Dependencies
     ↓
npm run lint
     ↓
Code Check βœ“
     ↓
npm run build
     ↓
dist/
Enter fullscreen mode Exit fullscreen mode

Questions

They must answer:

What does npm ci do?

Where does npm know which dependencies to install?

Why is package-lock.json important?

What does npm run lint do?

Where does npm find the lint command?

What does npm run build do?

What is dist/?

Part 4 β€” Create your own CI branch

Do not work directly on main.

git switch -c homework-ci
Enter fullscreen mode Exit fullscreen mode

Create:

mkdir -p .github/workflows
nano .github/workflows/homework-ci.yml
Enter fullscreen mode Exit fullscreen mode

Use:

name: Homework Restaurant CI

on:
  pull_request:

jobs:
  ci:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install Dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Build
        run: npm run build
Enter fullscreen mode Exit fullscreen mode

Part 5 β€” Before pushing, explain the YAML

They must be able to explain:

on:
pull_request:
jobs:
runs-on:
steps:
uses:
run:
actions/checkout
actions/setup-node
npm ci
npm run lint
npm run build
Enter fullscreen mode Exit fullscreen mode

Do not accept β€œI copied the YAML.”

They need to explain what happens:

Pull Request
     ↓
Trigger
     ↓
Workflow
     ↓
Job
     ↓
Ubuntu Runner
     ↓
Checkout
     ↓
Setup Node
     ↓
npm ci
     ↓
Lint
     ↓
Build
Enter fullscreen mode Exit fullscreen mode

Part 6 β€” Push 

git status
git diff

git add .
git commit -m "Add homework CI pipeline"

git push -u origin homework-ci
Enter fullscreen mode Exit fullscreen mode

Important question

Ask them:

We used only pull_request:. Should CI run just because you pushed the branch?

They should understand the difference from:

on:
  push:
  pull_request:
Enter fullscreen mode Exit fullscreen mode

which can result in separate runs from the two different events.

Part 7 β€” Create Pull Request

On GitHub:

homework-ci
     ↓
Pull Request
     ↓
main
Enter fullscreen mode Exit fullscreen mode

Now watch GitHub Actions.

Expected:

βœ“ Checkout Code
βœ“ Setup Node
βœ“ Install Dependencies
βœ“ Lint
βœ“ Build
Enter fullscreen mode Exit fullscreen mode

DO NOT MERGE immediately.

Open the workflow and look at every step.

Part 8 β€” Explain the result

Students should prepare a 2-minute explanation:

CI is an approach. GitHub Actions is a tool.

Developer gave me the Restaurant Company source code.

I first inspected package.json and package-lock.json.

I manually ran npm ci, npm run lint, and npm run build.

Then I automated those commands using GitHub Actions.

My workflow is triggered by a Pull Request.

GitHub creates a runner, checks out the source code, sets up Node, installs dependencies, runs lint, and builds the application.

I would have every student say this aloud rather than only submit screenshots.

πŸ“€ What to submit

  1. Screenshot of package.json scripts
  2. Screenshot of successful npm ci
  3. Screenshot of successful npm run lint
  4. Screenshot of successful npm run build
  5. Screenshot showing dist/
  6. Screenshot of their homework-ci.yml
  7. Screenshot of Pull Request
  8. Screenshot of GREEN GitHub Actions
  9. Their answers to the seven questions above

⭐ Bonus β€” only for stronger students

Have them explain, without changing the workflow:

Why do we need Setup Node in GitHub Actions
if Node/npm is already installed on our EC2?
Enter fullscreen mode Exit fullscreen mode

Correct concept:

EC2 β‰  GitHub Actions Runner
Enter fullscreen mode Exit fullscreen mode

The GitHub runner is a separate environment. Installing Node on EC2 does not install it on the GitHub Actions runner.

Top comments (0)