Updated headline

Dockerfile

@@ -1,27 +1,29 @@
-# Stage 1: Build the React app
-FROM node:18 AS build
+# Use Node.js as the base image
+FROM node:18-alpine AS builder
 
 # Set working directory
 WORKDIR /app
 
-# Install dependencies
-COPY package.json package-lock.json ./
+# Copy package.json and install dependencies
+COPY package*.json ./
 RUN npm install
 
-# Copy the rest of the application code
+# Copy all files and build the React app
 COPY . .
-
-# Build the React app
 RUN npm run build
 
-# Stage 2: Serve the React app with nginx
-FROM nginx:alpine
+# Use a lightweight web server to serve the static files
+FROM node:18-alpine
+WORKDIR /app
+
+# Install serve globally
+RUN npm install -g serve
 
-# Copy the built files from Stage 1
-COPY --from=build /app/dist /usr/share/nginx/html
+# Copy the build folder from the previous step
+COPY --from=builder /app/dist /app
 
-# Expose port 80
-EXPOSE 80
+# Expose port 8000 inside the container
+EXPOSE 8000
 
-# Start nginx server
-CMD ["nginx", "-g", "daemon off;"]
+# Serve the app on port 8000
+CMD ["serve", "-s", "/app", "-l", "8000"]

README.md

@@ -1,8 +1,64 @@
-# React + Vite
+# React.js Application with Docker and Jenkins Deployment
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Project Overview
 
-Currently, two official plugins are available:
+This project is a React.js application that demonstrates how to set up a development environment using Docker and Docker Compose. The application is deployed on an AWS EC2 instance using Jenkins for Continuous Integration and Continuous Deployment (CI/CD).
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Technologies Used
+
+- **React.js**: A JavaScript library for building user interfaces.
+- **Docker**: A platform for developing, shipping, and running applications in containers.
+- **Docker Compose**: A tool for defining and running multi-container Docker applications.
+- **Jenkins**: An open-source automation server used to automate the deployment process.
+- **AWS EC2**: A web service that provides resizable compute capacity in the cloud.
+
+![aws react1](https://github.com/user-attachments/assets/fce03360-2c2c-458e-b50c-7cf9e3ff9e05)
+![ip aws re1](https://github.com/user-attachments/assets/53920b88-1b25-4734-9c3f-4ffe5e28b82a)
+![react js s1](https://github.com/user-attachments/assets/612a258d-63ed-4aab-84db-4a2a2cf811fa)
+![j2](https://github.com/user-attachments/assets/abdc9cf3-d197-49bf-b190-30f98096930d)
+![jenkins 1](https://github.com/user-attachments/assets/80ed1462-a229-4db5-9980-075641ef2928)
+
+
+## Setup & Installation
+
+1. Clone the repository:
+   ```sh
+   git clone https://github.com/deepanshub9/reactjs-app.git
+   cd reactjs-app
+   ```
+
+2. Build the Docker image:
+   ```sh
+   docker build -t reactjs-app .
+   ```
+
+3. Run the application using Docker Compose:
+   ```sh
+   docker-compose up
+   ```
+
+## Deployment Process
+
+1. **Dockerize the Application**: The Dockerfile is used to create a Docker image for the React application. It includes all necessary dependencies and configurations.
+
+2. **Docker Compose**: The `docker-compose.yml` file defines the services required to run the application. It simplifies the process of managing multiple containers.
+
+3. **Jenkins CI/CD Pipeline**:
+   - Jenkins is configured to monitor the Git repository for changes.
+   - Upon detecting a change, Jenkins triggers a build process that includes:
+     - Building the Docker image.
+     - Deploying the Docker container to an AWS EC2 instance.
+
+4. **Accessing the Application**: Once deployed, the application can be accessed via the public IP address of the EC2 instance.
+
+## Future Enhancements
+
+- Implement automated testing for the application.
+- Add monitoring and logging for the deployed application.
+- Explore using AWS services for scaling and load balancing.
+
+## Contact
+
+For any questions or support, please contact:
+
+- **Deepanshu** - deepanshu.b096@gmail.com

docker-compose.yml

@@ -0,0 +1,7 @@
+version: "3"
+services:
+  react-app:
+    image: react-app:latest # Name of the image
+    ports:
+      - "8000:8000" # Map container's port 8000 to EC2's port 8000
+    restart: always # Restart the container if it crashes

src/components/HelloWorld.jsx

@@ -1,9 +1,8 @@
-import React from 'react';
-
 const HelloWorld = () => {
   return (
     <div className="hello-container">
-      <h1 className="hello-text">ReactJS CI/CD Java Home Cloud</h1>
+      <h1 className="hello-text">React Application Deploy with Jenkins Server</h1>
+
     </div>
   );
 };

vite.config.js

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    port: 8000, // Change this to your desired port
+  },
 })