Module 11 Lesson 1: Case Study: Full-Stack JS

In this case study, we examine the pipeline of "EduFlow," a fictional education platform using React, Express, and Postgres.

1. The Requirement

• Speed: Developers need test results in <3 minutes.
• Security: Scans for leaked Stripe keys.
• Deployment: Automated to a "Staging" URL for every Merge Request.

---

2. The Blueprint (.gitlab-ci.yml)

stages:
  - build
  - test
  - deploy

variables:
  # Speed up NPM by using a local cache
  NPM_CONFIG_CACHE: "$CI_PROJECT_DIR/.npm"

cache:
  paths: [.npm]

# 1. Faster Build with Artifacts
compile:
  stage: build
  image: node:18-alpine
  script:
    - npm ci # CI mode is faster and cleaner than 'install'
    - npm run build
  artifacts:
    paths: [dist/]

# 2. Parallel Testing (Module 3)
test-unit:
  stage: test
  script: npm run test:unit
  artifacts:
    reports: { junit: junit.xml }

test-integration:
  stage: test
  services: [postgres:alpine]
  script: npm run test:integration

# 3. Dynamic Preview Environment (Module 6)
preview_deploy:
  stage: deploy
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    url: http://$CI_ENVIRONMENT_SLUG.eduflow.test
  script:
    - ./deploy-script.sh
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"

---

Visualizing the Process

graph TD
    Start[Input] --> Process[Processing]
    Process --> Decision{Check}
    Decision -->|Success| End[Complete]
    Decision -->|Retry| Process

---

3. Analysis

• npm ci: By using npm ci instead of install, we guarantee the exact same library versions every time.
• Preview Apps: Developers can share a "Link" to their new feature with the UI designer immediately, before any code is merged.
• Parallelism: The test-unit and test-integration run at the same time, saving the team about 40% in total wait time.

---

Exercise: The Success Audit

1. Why did we put npm ci in the build stage but share the dist/ folder as an artifact? (Review Module 3).
2. If the test-integration fails, does the preview_deploy still happen? (Why?)
3. Search: What is the "GitLab Review App" cleanup job? (How do we delete the dynamic preview site when the branch is deleted?)
4. How would you add a Security Scan (SAST) to this specific pipeline?

---

Summary

This setup represents the "Standard" for modern web development. It is fast, automated, and provides a "High-Feedback" environment for developers and designers to cooperate effectively.

Next Lesson: Data efficiency: Case Study: Python/ML Microservice Pipeline.