CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - CI/CD and monitoring

Write a workflow with lint, test and build steps.

Summary - CI/CD and monitoring

In this group you learned CI/CD pipelines, GitHub Actions workflows and performance monitoring.

On every push build and test run automatically; quality thresholds are set with Web Vitals and Lighthouse. Secrets live on the platform, not in the repo.

Now you will write a cached build and test workflow.

Practice Write the Test workflow

Write a test workflow. Use name: Test, on: push. Set up setup-node@v4 with node-version: '20' and cache: 'npm'. Run npm ci && npm test.

Starter code

App.jsx
# Write the Test workflow here

Sample solution

App.jsx
name: Test
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci && npm test

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Which of the following is wrong?

  • secrets are not written to the repo
  • cache shortens npm ci time
  • Lighthouse gives an accessibility score
  • Web Vitals runs only on the server Correct answer

Explanation: Web Vitals runs on the client side.

2 Fill in the blank: checkout action

Question 
steps:
  - uses: actions/____@v4
Answer 
steps:
  - uses: actions/checkout@v4

Explanation: answer: checkout. actions/checkout@v4 pulls the code.

3 Match concepts

Term Meaning
CI Merges changes
cache Saves time
Lighthouse Gives scores
secrets Hidden keys

All lessons in Advanced

1 Next.js basics

  1. What is Next.js?
  2. App Router
  3. Page and layout
  4. Summary - Next.js basics

2 SSR and SSG

  1. What is SSR?
  2. What is SSG?
  3. Server Components
  4. Summary - SSR and SSG

3 API routes

  1. API routes
  2. GET and POST
  3. JSON response
  4. Summary - API routes

4 Next.js store

  1. Project: Next.js store
  2. Static home page
  3. Dynamic product page
  4. Cart API

5 Data fetching

  1. Data fetching with SWR
  2. React Query basics
  3. Mutations
  4. Summary - Data fetching

6 Redux Toolkit

  1. What is Redux Toolkit?
  2. createSlice
  3. configureStore
  4. Summary - Redux Toolkit

7 Zustand

  1. What is Zustand?
  2. Store with create
  3. Using selectors
  4. Summary - Zustand

8 State project

  1. Project: State management
  2. Redux Toolkit store
  3. Zustand cart store
  4. Data fetching with SWR

9 react-hook-form

  1. What is react-hook-form?
  2. register and handleSubmit
  3. Validation
  4. Summary - react-hook-form

10 Framer Motion

  1. What is Framer Motion?
  2. The motion component
  3. Transitions and variants
  4. Summary - Framer Motion

11 Accessibility and i18n

  1. Accessibility basics
  2. ARIA and keyboard
  3. i18n and react-i18next
  4. Summary - Accessibility and i18n

12 Advanced testing

  1. Integration testing
  2. Mock Service Worker
  3. Coverage measurement
  4. Summary - Advanced testing

13 CI/CD and monitoring

  1. CI/CD basics
  2. GitHub Actions
  3. Performance monitoring
  4. Summary - CI/CD and monitoring

14 Advanced final

  1. Challenge: Next.js API
  2. Challenge: Zustand store
  3. Challenge: Form and validation
  4. Challenge: Accessible modal