Hackforge Academy

Explanation

Jenkins is an open-source DevOps automation tool used for Continuous Integration (CI) and Continuous Deployment (CD). It helps automate building, testing, and deploying applications like React projects.

Code:

/* Jenkins Workflow */
1. Developer pushes code to GitHub
2. Jenkins detects changes
3. Jenkins installs dependencies
4. Jenkins builds React app
5. Jenkins deploys project automatically

Explanation

Jenkins is commonly used with React to automate project build and deployment after every code commit.

Code:

npm install
npm run build

Explanation

To use Jenkins with React, first create a React application.

Code:

npx create-react-app my-app
cd my-app
npm start

Explanation

Install Jenkins on your server or local machine. Jenkins usually runs on port 8080.

Code:

http://localhost:8080

Explanation

Connect Jenkins with GitHub repository so Jenkins can pull the latest React code automatically.

Code:

GitHub Repository URL:
https://github.com/username/react-app.git

Explanation

Create a Jenkins job (Freestyle Project or Pipeline Project) to automate React build process.

Code:

1. Open Jenkins Dashboard
2. Click 'New Item'
3. Select 'Pipeline'
4. Configure GitHub repository

Explanation

In Jenkins pipeline, install dependencies and build the React project using npm commands.

Code:

pipeline {
  agent any

  stages {
    stage('Install Dependencies') {
      steps {
        sh 'npm install'
      }
    }

    stage('Build React App') {
      steps {
        sh 'npm run build'
      }
    }
  }
}

Explanation

The React production build is generated inside the build folder after running npm run build.

Code:

npm run build

/* Output Folder */
/build

Explanation

Jenkins can deploy the React build to servers like AWS, Netlify, Vercel, Docker, or Nginx automatically.

Code:

scp -r build/* user@server:/var/www/html/

Explanation

Jenkins supports webhooks. GitHub webhooks automatically trigger Jenkins builds whenever code is pushed.

Code:

GitHub → Settings → Webhooks
Payload URL:
http://your-jenkins-url/github-webhook/

Explanation

Benefits of Jenkins with React include automated deployment, faster delivery, reduced manual work, continuous testing, and better DevOps workflow.

Code:

/* Benefits */
- Automatic Build
- Automatic Deployment
- CI/CD Pipeline
- Faster Release
- Reduced Human Errors