Jenkins CI/CD implementation in React + Node Application

Step-1: Install jenkins on server (Virtual machine)

• Install Jenkins on your server (e.g., cloud VM or local machine). This could be through Docker, AWS EC2, or another platform.

brew install jenkins-lts

Choose the default plugin while installing.

• Once Jenkins is installed you can access it via http://your_server_ip:8080

Step-2: Install Plugins

• Goto Manage Jenkins -> plugin ->search

• Search & install GitHub Integration Plugin

• Search & install Node.js Plugin

Step-3: Create Job for Backend (Node Js)

• Go to "New Item" in Jenkins, select "Pipeline type", and name it something like node-backend-ci.

• Pipeline Configuration:

• Choose "Pipeline script from SCM".

• Select "Git" and enter the repository URL of your GitHub repository.

• Add the credentials (your GitHub token) to connect Jenkins to your repository.

• _In the pipeline script section, create a Jenkinsfile to automate the steps: follow the sample file given below _
  

pipeline {
  agent any
  environment {
    NODE_ENV = 'production'
  }
  stages {
    stage('Checkout') {
      steps {
        // Clone the repository
        git branch: 'main', url: 'https://github.com/your-repo-url.git'
      }
    }
    stage('Install Dependencies') {
      steps {
        sh 'cd backend && npm install'
      }
    }
    stage('Run Tests') {
      steps {
        sh 'cd backend && npm test'
      }
    }
    stage('Build') {
      steps {
        sh 'cd backend && npm run build'
      }
    }
    stage('Deploy') {
      steps {
        // Deployment script or commands, e.g., using SCP, Docker, AWS CLI
        sh 'scp -r backend/* user@your-server:/var/www/backend'
      }
    }
  }
}

Step-4: Create Job for Frontend

• Go to "New Item", select “Pipeline” type, and name it react-frontend-ci

Pipeline Configuration:

• Follow similar steps as for the backend, but focus on the frontend directory.

• Create another Jenkinsfile to automate the frontend build and deployment process: follow the sample file
  

pipeline {
  agent any
  environment {
    NODE_ENV = 'production'
  }
  stages {
    stage('Checkout') {
      steps {
        git branch: 'main', url: 'https://github.com/your-repo-url.git'
      }
    }
    stage('Install Dependencies') {
      steps {
        sh 'cd frontend && npm install'
      }
    }
    stage('Run Tests') {
      steps {
        sh 'cd frontend && npm test'
      }
    }
    stage('Build') {
      steps {
        sh 'cd frontend && npm run build'
      }
    }
    stage('Deploy') {
      steps {
        // Deploying static assets, for example, to an S3 bucket, or web server
        sh 'scp -r frontend/build/* user@your-server:/var/www/frontend'
      }
    }
  }
}

Step 5: Webhooks and Automation with GitHub

• Go to your GitHub repository settings, and under Webhooks, add a new webhook with the Jenkins server URL in this format:

bash
http://your-server-ip:8080/github-webhook/

• Select the trigger events (e.g., push, pull requests) that will cause Jenkins to start the build automatically.

Step 6: Jenkins Github trigger

• In each of your Jenkins jobs, go to “Build Triggers” and enable GitHub hook trigger for GITScm polling. This ensures Jenkins listens for changes from GitHub and runs the pipelines when there are new commits or pull requests.

Step 7: Deployment Strategy

• Depending on your infrastructure, you can deploy in different ways:

For Static Assets (React Frontend):

• If your app is static (after running npm run build), you can deploy it to:_

1. AWS S3 (for static site hosting)
2. FTP or SCP to a web server
3. Netlify or Vercel (these platforms can handle React app deployments easily).

For Backend (Node.js):

1._ SSH/SCP: Transfer files to the server and restart the application (use PM2 or a similar tool to manage Node.js processes)._

1. Docker: Build Docker images as part of the pipeline, and push them to Docker Hub or a private registry, then deploy using Docker Compose or Kubernetes.

Example of Docker Integration:

stage('Build Docker Image') {
  steps {
    sh 'cd backend && docker build -t your-backend-image:latest .'
    sh 'docker push your-docker-registry/your-backend-image:latest'
  }
}
stage('Deploy Docker Container') {
  steps {
    // On your server, run docker commands to pull and restart containers
    sh 'ssh user@your-server "docker pull your-backend-image:latest && docker-compose up -d"'
  }
}

Step 8: Notifications and Feedback

Slack/Email Notifications:

1. Use Jenkins plugins like Email Extension or Slack Notification to send build status (success or failure) to your team. Configure these in the "Post-build Actions" section of the Jenkins job configuration.
   Monitoring:

2. Monitor builds in Jenkins. Failed builds will show up as red, and you can set up thresholds for retries or to stop builds if too many fail.

This setup ensures that every time you commit or push changes to GitHub, Jenkins will automatically trigger the build, run tests, and deploy your application.