Setting Up CI/CD for Node.js and React on GitHub

Step-by-Step Guide: Setting Up CI/CD for Node.js and React Apps on GitHub Actions

This guide explains how to configure CI/CD pipelines for your Node.js or React applications using GitHub Actions to automate linting, testing, building, and deploying on every push or pull request.

1. Project Structure

Your project might look like this:

my-app/
├── .github/
│   └── workflows/      ← GitHub Actions YAML files
├── src/                ← Application source code
├── package.json
└── ...

2. Create GitHub Actions Workflow

Inside .github/workflows/, create a file named ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Run Tests
        run: npm test

      - name: Build Project
        run: npm run build

      - name: Deploy
        if: github.ref == 'refs/heads/main'
        run: echo "Deploying..."

3. Linting and Formatting

Ensure you have linting scripts in your package.json:

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write .",
  "test": "jest",
  "build": "react-scripts build"
}

This will ensure your code is clean before testing and building.

4. Running Tests

Use jest or your preferred test runner. Example test script:

npm run test

Configure test coverage thresholds if needed for quality enforcement.

5. Build and Deploy

During CI, your React app or Node.js project will be built using:

npm run build

For deployment, you can:

• Deploy to Vercel/Netlify using CLI
• Use FTP or SSH to upload files to your server
• Publish to a VPS automatically using rsync or GitHub Actions deploy actions

6. Secrets Management

Use GitHub Secrets to store FTP credentials, API keys, or SSH keys securely. Access them in your workflow:

env:
  DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}

7. Optional: Version Bumping

You can automatically bump the package.json version upon successful deployment using GitHub Actions or the npm version command combined with git tagging.

Summary

This CI/CD pipeline setup for Node.js and React projects ensures your application is linted, tested, built, and deployed automatically on every push, improving code quality and speeding up your delivery workflow.