CI pipeline setup in Remix - Mini Project: Build & Apply

CI pipeline setup

📖 Scenario: You are working on a Remix web application. To keep your code quality high and avoid errors, you want to set up a Continuous Integration (CI) pipeline. This pipeline will automatically check your code whenever you push changes to your repository.

🎯 Goal: Build a simple CI pipeline configuration file that installs dependencies, runs tests, and reports the results automatically on every code push.

📋 What You'll Learn

Create a YAML file named ci.yml in the .github/workflows directory

Define a job named build that runs on ubuntu-latest

Add steps to check out the code, install Node.js version 20, install dependencies with npm install, and run tests with npm test

Print the test results as the final output

💡 Why This Matters

🌍 Real World

CI pipelines help developers catch errors early by automatically testing code changes before merging them.

💼 Career

Setting up CI pipelines is a key skill for DevOps engineers and developers to ensure code quality and smooth collaboration.

1

Create the initial CI workflow file

Create a file named ci.yml inside the .github/workflows folder. Add the workflow name CI Pipeline and set it to trigger on push events.

Remix

# Create the YAML file with name and trigger
# Your code here

Hint

Start with the workflow name and on keys in YAML format.

2

Add the build job and runner

Add a job named build that runs on the ubuntu-latest runner.

Remix

name: CI Pipeline
on: [push]
jobs:
  # Add the build job here
  # Your code here

Hint

Use jobs: then define build: with runs-on: ubuntu-latest.

3

Add steps to checkout code and install Node.js

Inside the build job, add steps to: 1) check out the repository code using actions/checkout@v3, and 2) set up Node.js version 20 using actions/setup-node@v3.

Remix

name: CI Pipeline
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # Add checkout step
      # Add Node.js setup step
      # Your code here

Hint

Use - uses: actions/checkout@v3 and - uses: actions/setup-node@v3 with node-version: '20'.

4

Install dependencies and run tests

Add steps to run npm install to install dependencies and npm test to run tests. These should be run commands inside the build job steps. The final step should print the test results.

Remix

name: CI Pipeline
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      # Add npm install step
      # Add npm test step
      # Your code here

Hint

Use - run: npm install and - run: npm test as steps.

Practice

1. What is the main purpose of setting up a CI pipeline for a Remix app?

easy

A. To write code faster without testing

B. To manually deploy the app to production

C. To create UI components automatically

D. To automatically run tests and build the app on code changes

Solution

1. Step 1: Understand CI pipeline purpose

   A CI pipeline runs tests and builds automatically when code changes happen.

2. Step 2: Identify correct purpose for Remix app

   This helps catch errors early and ensures the app builds correctly before deployment.

3. Final Answer:

   To automatically run tests and build the app on code changes -> Option D

4. Quick Check:

   CI pipeline = auto test and build [OK]

Hint: CI pipelines run tests/build automatically on code changes [OK]

Common Mistakes:

• Thinking CI deploys manually
• Assuming CI writes code
• Confusing CI with UI design

2. Which of the following is the correct syntax to trigger a GitHub Actions workflow on every push to the main branch?

easy

A. when: push to main

B. trigger: push main

C. on: push: branches: [main]

D. event: push branch main

Solution

1. Step 1: Review GitHub Actions trigger syntax

   The correct YAML syntax uses 'on:' followed by the event and branches list.

2. Step 2: Match syntax to options

   on: push: branches: [main] matches the correct YAML format: 'on: push: branches: [main]'. Others are invalid syntax.

3. Final Answer:

   on: push: branches: [main] -> Option C

4. Quick Check:

   GitHub Actions trigger = on: push: branches: [main] [OK]

Hint: GitHub Actions triggers start with 'on:' keyword [OK]

Common Mistakes:

• Using 'trigger' instead of 'on'
• Missing YAML indentation
• Writing event as plain text

3. Given this GitHub Actions step in a Remix CI pipeline:

      - name: Install dependencies
        run: npm install

What will happen when this step runs?

medium

A. It installs all npm packages listed in package.json

B. It removes all installed npm packages

C. It runs the Remix app without installing packages

D. It updates npm to the latest version

Solution

1. Step 1: Understand npm install command

   Running 'npm install' downloads and installs all dependencies listed in package.json.

2. Step 2: Match command effect to options

   It installs all npm packages listed in package.json correctly describes this behavior. Other options describe unrelated actions.

3. Final Answer:

   It installs all npm packages listed in package.json -> Option A

4. Quick Check:

   npm install = install dependencies [OK]

Hint: 'npm install' installs packages from package.json [OK]

Common Mistakes:

• Confusing install with uninstall
• Thinking it runs the app
• Assuming it updates npm itself

4. You wrote this GitHub Actions workflow snippet but the pipeline fails to start on pushes:

on:
  push:
    branch: main

What is the error causing the failure?

medium

A. The key 'branch' should be 'branches' (plural) in YAML

B. The 'on' keyword is misspelled

C. The indentation is incorrect for 'push' key

D. The workflow file must be named 'ci.yml' exactly

Solution

1. Step 1: Check YAML keys for GitHub Actions triggers

   The correct key to specify branches is 'branches' (plural), not 'branch'.

2. Step 2: Identify error in snippet

   Using 'branch' causes the trigger to be ignored, so the pipeline won't start on push.

3. Final Answer:

   The key 'branch' should be 'branches' (plural) in YAML -> Option A

4. Quick Check:

   Trigger key = branches (plural) [OK]

Hint: Use 'branches' not 'branch' for GitHub Actions push triggers [OK]

Common Mistakes:

• Using singular 'branch' instead of 'branches'
• Misnaming workflow files
• Incorrect indentation

5. You want your Remix app's CI pipeline to run tests only when files in the app/ directory change. Which GitHub Actions trigger configuration achieves this?

hard

A. on:
push:
branches: [main]
only: ["app/**"]

B. on:
push:
branches: [main]
paths: ["app/**"]

C. on:
push:
branches: [main]
include: ["app/**"]

D. on:
push:
branches: [main]
files: ["app/**"]

Solution

1. Step 1: Understand GitHub Actions path filters

   To trigger workflows only on changes in specific paths, use the 'paths' key under push.

2. Step 2: Identify correct syntax for filtering 'app/' directory

   on: push: branches: [main] paths: ["app/**"] uses 'paths: ["app/**"]' which matches all files in app/ and subfolders.

3. Final Answer:

   on: push: branches: [main] paths: ["app/**"] -> Option B

4. Quick Check:

   Use 'paths' to filter files in GitHub Actions triggers [OK]

Hint: Use 'paths' key to filter files triggering workflow [OK]

Common Mistakes:

• Using 'files' or 'only' instead of 'paths'
• Incorrect YAML indentation
• Missing quotes around path patterns