Automated React Web App Deployment with Jenkins and Netlify CLI

2024-11-19

Overview

This project showcases how I automated the deployment of a React web application by leveraging Jenkins, Docker-in-Docker (DIND), and the Netlify CLI. The pipeline was designed to demonstrate my ability to integrate containerized CI/CD workflows with modern deployment tools.

Objectives

  • Automate the React app deployment process.
  • Leverage Jenkins to orchestrate the CI/CD pipeline.
  • Utilize DIND to create isolated build environments.
  • Configure a seamless deployment process using the Netlify CLI.

Tools and Technologies

  • Jenkins: For orchestrating the CI/CD pipeline.
  • Docker: For containerizing the Jenkins setup and providing isolated environments via DIND.
  • Ubuntu: The host operating system for Jenkins.
  • React: The framework for the front-end application.
  • Netlify CLI: For deploying the application to Netlify.

Steps

1. Set Up Jenkins on Ubuntu

I started by setting up Jenkins on an Ubuntu virtual machine, which acted as the CI/CD orchestrator. This included installing Jenkins and configuring it with essential plugins for managing builds, integrating version control systems, and automating deployments. For a more intuitive experience, I added a visual pipeline management tool to simplify pipeline creation and debugging.

2. Configure Docker-in-Docker (DIND)

To enable containerized build environments, I configured Docker-in-Docker (DIND) within Jenkins. This setup allowed the build processes to run in isolated Docker containers, ensuring consistency and minimizing dependency conflicts. DIND provided an efficient way to manage containerized environments directly within Jenkins pipeline jobs.

3. Retrieve React Project from GitHub

Once Jenkins was fully configured, I linked it to a public GitHub repository hosting the React web application. The pipeline was designed to clone the latest version of the repository during each build, ensuring that the deployment always used the most up-to-date codebase. This integration enabled seamless continuous integration as changes pushed to the repository triggered automated builds.

4. Set Up the CI/CD Pipeline

With Jenkins and DIND in place, I created and defined a CI/CD pipeline. This involved specifying stages to check out the code, install dependencies, build the project, and prepare it for deployment. The pipeline ensured every step, from code retrieval to application deployment, was automated and repeatable.

5. Deploy the Application Using Netlify CLI

Finally, I integrated Netlify CLI into the pipeline for deployment. By connecting the CLI with the hosting platform, I ensured that the React application was automatically deployed to a production environment once the build process was completed successfully. This step streamlined the release process and made deployments fast, efficient, and reliable.

Outcome

By combining Jenkins, DIND, and Netlify CLI, I successfully created a robust automated workflow to build and deploy a React web application. This project highlights my ability to set up modern CI/CD pipelines, utilize containerized build environments, and deploy applications seamlessly to production.