Step-by-Step Guide: Pushing a Dockerized React App to Docker Hub

This guide will help you and your students dockerize a React application and push the Docker container to Docker Hub. We will use an 8 GB RAM and 30 GB SSD server accessible via SSH.

Prerequisites

A cloud server with SSH access.
Docker Hub account.
Basic understanding of Docker and React.

Step 1: Connect to Your Server via SSH

Open your terminal and connect to the server:
```
 ssh username@your-server-ip
```
Ensure that your server has the required resources: 8 GB RAM and 30 GB SSD.

Step 2: Install Docker

Update the package index and install Docker:

 sudo apt update
 sudo apt install -y docker.io

Give the current user permission to manage Docker:
```
 sudo chown $USER /var/run/docker.sock
```
Verify the Docker installation:
```
 docker --version
```

Step 3: Log in to Docker Hub

Use the following command to log in:
```
 docker login
```
Enter your Docker Hub username and password.

Step 4: Clone the React App Repository

Clone the repository containing the React app:

 git clone https://github.com/ShakirFarhan/Youtube-Clone.git

Navigate to the project directory:
```
 cd Youtube-Clone
```
Remove any pre-existing Dockerfile:
```
 rm Dockerfile
```

Step 5: Create a Dockerfile

Open the text editor to create a new Dockerfile:
```
 nano Dockerfile
```

Copy and paste the following content into the Dockerfile:

 # Use an official Node runtime as a base image for building the app
 FROM node:14-alpine AS builder

 # Set the working directory in the container
 WORKDIR /usr/src/app/frontend

 # Copy package.json and package-lock.json to the container
 COPY package*.json ./

 # Install frontend dependencies
 RUN npm install

 # Copy the rest of the application files to the container
 COPY . .

 # Build the frontend app
 RUN npm run build

 # Use NGINX as a lightweight base image to serve the app
 FROM nginx:alpine

 # Copy the built app from the previous stage
 COPY --from=builder /usr/src/app/frontend/build /usr/share/nginx/html

 # Expose port 80 to the outside world (default for HTTP)
 EXPOSE 80

Save the file and exit.

Step 6: Build and Test the Docker Image

Build the Docker image:
```
 docker build -t youtube-clone .
```
Run the container:
```
 docker run -d -p 80:80 youtube-clone
```
Test the application by visiting the server's IP address in your browser:
```
 http://your-server-ip
```

Step 7: Tag and Push the Docker Image to Docker Hub

Tag the Docker image:

 docker tag youtube-clone siddhantbhattarai/youtube-clone

Push the image to Docker Hub:

 docker push siddhantbhattarai/youtube-clone

Conclusion

You have successfully dockerized a React application and pushed the Docker image to Docker Hub. Your students can now pull and use the image from Docker Hub on any machine by running:

docker pull siddhantbhattarai/youtube-clone
docker run -d -p 80:80 siddhantbhattarai/youtube-clone

This exercise provides hands-on experience with Docker, builds understanding of deployment pipelines, and prepares students for modern software development workflows.