CI/CD Setup

Complete guide to setting up robust CI/CD pipelines for React Kickstart development, including unit tests, coverage, QA automation, and deployment workflows.

🎯 CI/CD Architecture

🚀 GitHub Actions Workflows

Minimal CI Pipeline:

# .github/workflows/ci.yml
name: CI Pipeline
 
on: 
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]
 
jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Run linting
        run: npm run lint
        
      - name: Run tests with coverage
        run: npm run test:coverage
        
      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v3
        with:
          file: ./coverage/lcov.info
          flags: unittests
          name: codecov-umbrella

🔧 Quality Gates

Code Quality Gate

Enforce code quality standards:

# Quality gate configuration
quality-gate:
  runs-on: ubuntu-latest
  steps:
    - name: Code Quality Checks
      run: |
        # ESLint - zero errors, zero warnings
        npm run lint 2>&1 | tee lint-output.txt
        if grep -q "error\|warning" lint-output.txt; then
          echo "❌ Linting failed"
          exit 1
        fi
 
        # Prettier - code must be formatted
        if ! npm run format:check; then
          echo "❌ Code formatting failed"
          exit 1
        fi
 
        # TypeScript - no type errors
        if ! npm run type-check; then
          echo "❌ Type checking failed"
          exit 1
        fi
 
        echo "✅ Code quality gate passed"

Test Coverage Gate

Ensure adequate test coverage:

coverage-gate:
  runs-on: ubuntu-latest
  steps:
    - name: Coverage Gate
      run: |
        npm run test:coverage
 
        # Extract coverage percentages
        STATEMENTS=$(jq '.total.statements.pct' coverage/coverage-summary.json)
        BRANCHES=$(jq '.total.branches.pct' coverage/coverage-summary.json)
        FUNCTIONS=$(jq '.total.functions.pct' coverage/coverage-summary.json)
        LINES=$(jq '.total.lines.pct' coverage/coverage-summary.json)
 
        # Check minimum thresholds
        MIN_COVERAGE=80
 
        if (( $(echo "$STATEMENTS < $MIN_COVERAGE" | bc -l) )); then
          echo "❌ Statement coverage $STATEMENTS% < $MIN_COVERAGE%"
          exit 1
        fi
 
        if (( $(echo "$BRANCHES < $MIN_COVERAGE" | bc -l) )); then
          echo "❌ Branch coverage $BRANCHES% < $MIN_COVERAGE%"
          exit 1
        fi
 
        echo "✅ Coverage gate passed: $STATEMENTS% statements, $BRANCHES% branches"

QA Automation Gate

Validate generated projects:

qa-gate:
  runs-on: ubuntu-latest
  steps:
    - name: QA Automation Gate
      run: |
        # Run critical QA tests
        node qa-automation/test-runner.js critical
 
        # Analyze results
        LATEST_REPORT=$(ls -t qa-automation/reports/test-report-*.json | head -1)
        SUCCESS_RATE=$(jq '.summary.successRate' $LATEST_REPORT)
        FAILED_COUNT=$(jq '.summary.failed' $LATEST_REPORT)
 
        echo "QA Results: $SUCCESS_RATE% success rate, $FAILED_COUNT failures"
 
        # Release gate: 98% success rate
        if (( $(echo "$SUCCESS_RATE < 98" | bc -l) )); then
          echo "❌ QA gate failed: $SUCCESS_RATE% < 98%"
          
          # Show failed tests
          jq -r '.results[] | select(.success == false) | 
            "FAILED: \(.testName) - \(.error)"' $LATEST_REPORT
          
          exit 1
        fi
 
        echo "✅ QA gate passed: $SUCCESS_RATE% success rate"

📊 Monitoring & Reporting

Performance Monitoring

performance-monitoring:
  runs-on: ubuntu-latest
  steps:
    - name: CLI Performance Benchmarks
      run: |
        # Measure CLI startup time
        time node bin/react-kickstart.js --version
 
        # Measure project generation time
        time node bin/react-kickstart.js benchmark-test --yes --framework vite
 
        # Measure QA test execution time
        time node qa-automation/test-runner.js critical --silent
 
    - name: Track Performance Metrics
      run: |
        # Store metrics in time series database
        echo "cli_startup_time:$(date +%s):$CLI_TIME" >> metrics.log
        echo "generation_time:$(date +%s):$GEN_TIME" >> metrics.log
        echo "qa_execution_time:$(date +%s):$QA_TIME" >> metrics.log

Quality Metrics Dashboard

metrics-collection:
  runs-on: ubuntu-latest
  steps:
    - name: Collect Quality Metrics
      run: |
        # Test metrics
        TOTAL_TESTS=$(jq '.numTotalTests' test-results.json)
        PASSED_TESTS=$(jq '.numPassedTests' test-results.json)
        TEST_COVERAGE=$(jq '.total.statements.pct' coverage/coverage-summary.json)
 
        # QA metrics
        QA_SUCCESS_RATE=$(jq '.summary.successRate' qa-report.json)
        QA_DURATION=$(jq '.summary.duration' qa-report.json)
 
        # Code quality metrics
        LINT_WARNINGS=$(npm run lint 2>&1 | grep -c "warning" || echo "0")
        LINT_ERRORS=$(npm run lint 2>&1 | grep -c "error" || echo "0")
 
        # Create metrics payload
        cat > metrics.json << EOF
        {
          "timestamp": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
          "tests": {
            "total": $TOTAL_TESTS,
            "passed": $PASSED_TESTS,
            "coverage": $TEST_COVERAGE
          },
          "qa": {
            "successRate": $QA_SUCCESS_RATE,
            "duration": $QA_DURATION
          },
          "codeQuality": {
            "lintWarnings": $LINT_WARNINGS,
            "lintErrors": $LINT_ERRORS
          }
        }
        EOF
 
    - name: Send to monitoring system
      run: |
        # Send to your monitoring system (e.g., DataDog, New Relic)
        curl -X POST "$MONITORING_ENDPOINT" \
          -H "Content-Type: application/json" \
          -H "Authorization: Bearer $MONITORING_TOKEN" \
          -d @metrics.json

🚨 Alerting & Notifications

Slack Notifications

slack-notifications:
  runs-on: ubuntu-latest
  if: failure()
  steps:
    - name: Notify on failure
      uses: 8398a7/action-slack@v3
      with:
        status: failure
        channel: "#react-kickstart-alerts"
        webhook_url: ${{ secrets.SLACK_WEBHOOK }}
        fields: repo,message,commit,author,action,eventName,ref,workflow
        custom_payload: |
          {
            "text": "❌ React Kickstart CI Failed",
            "attachments": [{
              "color": "danger",
              "fields": [{
                "title": "Repository",
                "value": "${{ github.repository }}",
                "short": true
              }, {
                "title": "Branch", 
                "value": "${{ github.ref }}",
                "short": true
              }, {
                "title": "Commit",
                "value": "${{ github.sha }}",
                "short": true
              }, {
                "title": "Author",
                "value": "${{ github.actor }}",
                "short": true
              }]
            }]
          }

Email Notifications

email-notifications:
  runs-on: ubuntu-latest
  if: failure() && github.ref == 'refs/heads/main'
  steps:
    - name: Send failure notification
      uses: dawidd6/action-send-mail@v3
      with:
        server_address: smtp.gmail.com
        server_port: 587
        username: ${{ secrets.EMAIL_USERNAME }}
        password: ${{ secrets.EMAIL_PASSWORD }}
        subject: "❌ React Kickstart CI Failure on Main Branch"
        to: maintainers@react-kickstart.com
        from: ci@react-kickstart.com
        body: |
          The React Kickstart CI pipeline has failed on the main branch.
 
          Repository: ${{ github.repository }}
          Commit: ${{ github.sha }}
          Author: ${{ github.actor }}
          Workflow: ${{ github.workflow }}
 
          Please investigate and fix the issues immediately.
 
          View the failed run: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}

📚 Best Practices

Pipeline Efficiency: Optimize CI/CD pipelines for speed while maintaining thorough validation.

Performance Optimization

Parallel Jobs - Run independent checks in parallel
Caching - Cache dependencies and build artifacts
Conditional Execution - Skip unnecessary steps based on changes
Matrix Strategies - Test multiple configurations efficiently

Security Considerations

Secret Management - Use GitHub Secrets for sensitive data
Dependency Scanning - Regular security audits
Access Control - Limit who can trigger deployments
Audit Logging - Track all CI/CD activities

Reliability Patterns

Retry Logic - Retry flaky tests and network operations
Timeout Handling - Set appropriate timeouts for all steps
Graceful Degradation - Continue with warnings when possible
Rollback Capability - Quick rollback for failed deployments

📚 Next Steps

Related Documentation:

Automated Release → - Semantic release configuration
QA Automation → - Quality assurance and testing
Contributing → - Development workflow and guidelines

Robust CI/CD: A well-configured CI/CD pipeline ensures React Kickstart maintains high quality and reliability while enabling rapid development and deployment.

Automated Release Nightly Operations