🚀 Dockerizing and Deploying React App

This document outlines the steps to dockerize the React frontend and deploy it to Docker Hub.

📁 Step 1: Create Docker-related Files

1.1

# Build Stage: Install & build the app
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

Add .dockerignore

node_modules
build
.dockerignore
Dockerfile
nginx.conf
.git

🐳 Step 2: Login to Docker Hub

docker login

Enter your Docker Hub username and password. (once)

🛠️ Step 3: Build Docker Image

docker build -t sabberrahman/image-Name:Tag_name .

📤 Step 4: Push Image to Docker Hub

docker push sabberrahman/frontend_dashboard:latest

🔁 Step 5: Pull and Run Anywhere

docker pull sabberrahman/frontend_dashboard:latest
docker run -p 80:80 sabberrahman/frontend_dashboard:latest

📦 Optional: Use with Docker Compose

docker-compose.yml

version: '3'
services:
  frontend:
    image: sabberrahman/frontend_dashboard:latest
    ports:
      - "80:80"

Run

docker-compose up --build

🧠 Notes You can change the image name/tag as needed. Ensure you’re in the project root where your Dockerfile exists. Keep .env or secrets out of the image unless intentionally required.

🙌 Done! You have successfully dockerized, pushed, and deployed your React app.