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…


This content originally appeared on DEV Community and was authored by Shashank Trivedi

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.

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 5: 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.


This content originally appeared on DEV Community and was authored by Shashank Trivedi


Print Share Comment Cite Upload Translate Updates
APA

Shashank Trivedi | Sciencx (2024-09-17T05:44:44+00:00) Jenkins CI/CD implementation in React + Node Application. Retrieved from https://www.scien.cx/2024/09/17/jenkins-ci-cd-implementation-in-react-node-application/

MLA
" » Jenkins CI/CD implementation in React + Node Application." Shashank Trivedi | Sciencx - Tuesday September 17, 2024, https://www.scien.cx/2024/09/17/jenkins-ci-cd-implementation-in-react-node-application/
HARVARD
Shashank Trivedi | Sciencx Tuesday September 17, 2024 » Jenkins CI/CD implementation in React + Node Application., viewed ,<https://www.scien.cx/2024/09/17/jenkins-ci-cd-implementation-in-react-node-application/>
VANCOUVER
Shashank Trivedi | Sciencx - » Jenkins CI/CD implementation in React + Node Application. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/17/jenkins-ci-cd-implementation-in-react-node-application/
CHICAGO
" » Jenkins CI/CD implementation in React + Node Application." Shashank Trivedi | Sciencx - Accessed . https://www.scien.cx/2024/09/17/jenkins-ci-cd-implementation-in-react-node-application/
IEEE
" » Jenkins CI/CD implementation in React + Node Application." Shashank Trivedi | Sciencx [Online]. Available: https://www.scien.cx/2024/09/17/jenkins-ci-cd-implementation-in-react-node-application/. [Accessed: ]
rf:citation
» Jenkins CI/CD implementation in React + Node Application | Shashank Trivedi | Sciencx | https://www.scien.cx/2024/09/17/jenkins-ci-cd-implementation-in-react-node-application/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.