CodeBlanks Logo Icon CodeBlanks
Login Register

GitHub Actions

Learn to write a CI workflow for a React project.

GitHub Actions

GitHub Actions works by placing YAML files in the .github/workflows/ folder. Each file is a workflow.

A workflow contains jobs; each job runs on a runs-on virtual machine. Steps run a ready-made action with uses or a shell command with run.

Common actions: actions/checkout pulls code, actions/setup-node installs Node.

Cache and speed

Each workflow starts from scratch; without a cache npm ci re-downloads everything. The actions/setup-node action reuses the node_modules cache with the cache: 'npm' option.

Caching speeds up the workflow by minutes and lowers the bill. The key depends on the package-lock.json hash; when the lock changes the cache refreshes. In large projects this gap reaches several minutes and clearly reduces cost.

Practice Write the Build workflow

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

Starter code

App.jsx
# Write the Build workflow here

Sample solution

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

Questions and answers

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

1 Fill in the blank: set up Node

Question 
- uses: actions/setup-node@v4
  with:
    node-version: '____'
Answer 
- uses: actions/setup-node@v4
  with:
    node-version: '20'

Explanation: de-version: 20 is a common choice.

2 What does cache: 'npm' do in setup-node?

  • Pins the Node version
  • Reuses the npm dependency cache Correct answer
  • Stores test results
  • Skips building the code

Explanation: The cache speeds up dependency download.

3 Match Actions concepts

Term Meaning
checkout Pulls the code
setup-node Installs Node
cache Reuses cache
run Runs a shell command

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