Automating CI/CD Pipeline for React App Deployment in Kubernetes Cluster using Jenkins and Docker

This project, titled Jenkins-Kubernetes-Docker-React, is a containerized React Todo application that exemplifies a comprehensive CI/CD workflow using Jenkins, Docker, and Kubernetes. The objective is to automate the entire process of building, pushing, and deploying the application, thereby reducing manual interventions and ensuring consistent deployments.

Project Overview

The project is a single-file React Todo application built with Vite. It is containerized using Docker and deployed to a Kubernetes cluster (via Minikube). This initiative demonstrates how to integrate modern CI/CD practices into everyday development, thus streamlining operations and enhancing deployment reliability.

A Quick brief on Jenkins and Kubernetes

• Jenkins: Think of Jenkins as your friendly neighborhood automation server. It takes care of building your app, running tests, and deploying your code automatically. Once you set up the pipeline, it does the heavy lifting every time you push changes to GitHub.
• Kubernetes: Kubernetes is like the master orchestrator for your containers. It manages, scales, and deploys containerized applications. In my case, it takes the Docker image built by Jenkins and runs it on my Minikube cluster.

How CI/CD Changed My Workflow

Before:

-> Manually build the app
-> Push code to GitHub
-> Build the Docker image locally
-> Push the image to Docker Hub
-> Run a series of commands to deploy to Kubernetes

After:

-> Set up Jenkins pipeline once
-> Simply push your code to GitHub
-> Jenkins automatically builds, pushes, and deploys your app to Kubernetes

This change has drastically simplified my workflow, reducing manual steps and minimizing the risk of errors in the deployment process.

Technical Flow of the Project

Here’s a bird’s eye view of what happens in my CI/CD pipeline:

1. Checkout Stage: Jenkins pulls the latest code from my GitHub repo (Jenkins-Kubernetes-Docker-React).
2. Build Stage: A Docker image is built using a Dockerfile designed for a Vite-powered React app.
3. Push Stage: The image is tagged and pushed to Docker Hub.
4. Deploy Stage: Using a Kubernetes manifest, the app is deployed (or updated) on my Minikube cluster.

I’ve detailed all the commands and configurations in my repository, so if you’re curious about the project, check it out there!

Screenshots

• Docker Hub Screenshot: This shows the freshly pushed image (saisamarth21/jenkins-kubernetes-docker-react:latest) along with its size and creation time.

• Jenkins Dashboard Screenshot: Here you can see the pipeline run — from code checkout to successful deployment. It’s super satisfying to see that “Deployment succeeded!” message.

• Terminal Output Screenshot: A snapshot of the terminal logs during the Kubernetes deployment phase, highlighting the smooth rollout of the new version.
• Before Pipeline build:

• After Pipeline build:

Wrapping Up

The integration of Jenkins, Docker, and Kubernetes has transformed the deployment workflow for the React Todo application. By automating repetitive tasks and centralizing the build and deployment processes, the CI/CD pipeline not only enhances efficiency but also ensures consistency across deployments. This project serves as a practical demonstration of how modern automation tools can simplify complex development and operational tasks. For a complete technical setup and further details, please visit the GitHub repository.