Skip to main content
Course/Module 6/Topic 4 of 4Advanced

CI/CD Pipeline

Learn to set up continuous integration and deployment pipelines for React applications

85 minBy Priygop TeamLast updated: Feb 2026

GitHub Actions

  • Automated testing on every push
  • Automated deployment on merge to main
  • Code quality checks
  • security scanning
  • Performance monitoring

GitHub Actions Workflow

Example
# .github/workflows/ci-cd.yml
name: CI/CD Pipeline

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Run tests
      run: npm test -- --coverage --watchAll=false
    
    - name: Run linting
      run: npm run lint
    
    - name: Build application
      run: npm run build
    
    - name: Upload coverage reports
      uses: codecov/codecov-action@v3

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Build application
      run: npm run build
    
    - name: Deploy to Netlify
      uses: nwtgck/actions-netlify@v2
      with:
        publish-dir: './build'
        production-branch: main
        github-token: ${{ secrets.GITHUB_TOKEN }}
        deploy-message: "Deploy from GitHub Actions"
      env:
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Docker Deployment

Example
# Dockerfile
FROM node:18-alpine as build

WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm ci --only=production

# Copy source code
COPY . .

# Build the application
RUN npm run build

# Production stage
FROM nginx:alpine

# Copy built files to nginx
COPY --from=build /app/build /usr/share/nginx/html

# Copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf

# Expose port
EXPOSE 80

# Start nginx
CMD ["nginx", "-g", "daemon off;"]

# nginx.conf
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Handle React Router
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

# docker-compose.yml
version: '3.8'
services:
  react-app:
    build: .
    ports:
      - "80:80"
    environment:
      - NODE_ENV=production

Try It Yourself — Testing and Deployment

Try It Yourself — Testing and DeploymentHTML
HTML Editor
✓ ValidTab = 2 spaces
HTML|53 lines|2157 chars|✓ Valid syntax
UTF-8

Quick Quiz — Testing and Deployment

Additional Resources

Recommended Reading

  • Jest Documentation
  • React Testing Library Documentation
  • Deployment Best Practices

Online Resources

  • Jest Testing Tutorial
  • React Testing Library Guide
  • CI/CD Pipeline Examples
Chat on WhatsApp
Priygop - Leading Professional Development Platform | Expert Courses & Interview Prep