CI pipeline setup in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

💻 Command Output

intermediate

Identify the output of a basic CI pipeline run

Given this simple GitHub Actions workflow snippet for a Remix app, what will be the output of the Run tests step if tests pass?

Remix

name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - name: Run tests
        run: npm test

A The step completes successfully with exit code 0 and logs showing all tests passed.

B The step fails with exit code 1 and logs showing syntax errors in test files.

C The step is skipped because no tests are found in the project.

D The step completes but logs show warnings only, no test results.

💡 Hint

Think about what happens when npm test runs and all tests pass.

If tests pass, the npm test command exits with code 0, so the step succeeds and logs show test results.

❓ Configuration

intermediate

Correct the YAML syntax error in a CI pipeline

Which option fixes the syntax error in this GitHub Actions workflow snippet?

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run npm install

A

- name: Install dependencies
  run = npm install

B

- name: Install dependencies
  run npm install

C

- name: Install dependencies
  run: npm install

D

- name: Install dependencies
  run: "npm install"

💡 Hint

YAML requires a colon after keys and proper indentation.

The run key must be followed by a colon and a space before the command. Option C is correct syntax.

❓ Troubleshoot

advanced

Diagnose why a Remix app build fails in CI

A Remix app build step in CI fails with the error: Cannot find module 'esbuild'. What is the most likely cause?

A The <code>npm install</code> step was skipped or failed, so dependencies like esbuild are missing.

B The Node.js version is too new and incompatible with esbuild.

C The build command is incorrect and does not include esbuild.

D The Remix app does not support building in CI environments.

💡 Hint

Check if dependencies are installed before building.

If dependencies are not installed, modules like esbuild won't be found, causing build failure.

🔀 Workflow

advanced

Choose the correct order of steps in a CI pipeline for Remix

What is the correct order of these steps in a CI pipeline for a Remix app?

A 2,1,3,4

B 2,3,1,4

C 1,2,3,4

D 3,2,1,4

💡 Hint

Think about what must happen before tests and build.

You must first get the code (checkout), then install dependencies, then run tests, and finally build the app.

✅ Best Practice

expert

Select the best practice for caching dependencies in CI

Which option is the best practice to speed up CI pipeline runs for a Remix app using npm?

A Skip dependency installation entirely to save time.

B Cache the <code>node_modules</code> folder directly between runs.

C Use a custom script to copy dependencies from a previous build.

D Cache the npm cache folder (e.g., <code>~/.npm</code>) and run <code>npm ci</code> each time.

💡 Hint

Consider what is reliable and recommended by npm for CI.

Caching the npm cache folder and running npm ci ensures clean installs and faster builds without risking stale dependencies.

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