🐳 Docker Crash Course

A hands-on guide to Dockerizing a Frontend React App.

📺 Learned from: JavaScript Mastery

---

📝 Notes

---

📑 Table of Contents

• Getting Started
• Building & Running Images
• Working with Volumes
• Managing Containers
• Publishing to Docker Hub
• Docker Compose

---

🚀 Getting Started

Fetch and Run a Base Image

docker run -it ubuntu

This pulls the Ubuntu image and runs it in interactive mode.

---

🏗️ Building & Running Images

Create a Docker Image

docker build -t hello-docker .

List All Images

docker images

Run an Image

docker run hello-docker

Run with Interactive Shell

docker run -it hello-docker sh

Run with Port Mapping

Expose Docker's internal ports to your host system:

docker run -p 5173:5173 react-docker

---

📂 Working with Volumes

Mount the container to your local codebase for live development:

docker run -p 5173:5173 -v "$(pwd):/app" -v /app/node_modules react-docker

Flag	Description
-v "$(pwd):/app"	Mounts current directory to /app in container
-v /app/node_modules	Preserves container's node_modules (avoids conflicts)

💡 Tip: This is especially useful during development for hot-reloading.

---

🧹 Managing Containers

List Running Containers

docker ps

List All Containers (including stopped)

docker ps -a

Remove All Inactive Containers

docker container prune

Remove a Specific Container

docker rm <container_id>

Force remove a running container:

docker rm <container_id> --force

---

🌐 Publishing to Docker Hub

Step 1: Login to Docker

docker login

Step 2: Tag Your Image

docker tag react-docker developerjunaid/react-docker

Step 3: Push to Docker Hub

docker push developerjunaid/react-docker

---

🎼 Docker Compose

Docker Compose simplifies multi-container workflows using a YAML configuration file.

Initialize a New Project

docker init

Follow the interactive prompts to generate Dockerfile and compose.yaml.

Build and Run with Compose

docker compose up

Run in Detached Mode

docker compose up -d

Stop and Remove Containers

docker compose down

---

📁 Project Structure

docker-crash-course/
├── hello-docker/        # Simple Node.js Docker example
├── react-docker/        # React app with manual Docker setup
├── react-docker-compose/ # React app with Docker Compose
└── Readme.md

---

📚 Quick Reference

Command	Description
docker build -t <name> .	Build an image
docker run <image>	Run a container
docker run -p <host>:<container> <image>	Run with port mapping
docker ps	List running containers
docker images	List images
docker rm <id>	Remove container
docker rmi <image>	Remove image
docker compose up	Start services from compose.yaml
docker compose down	Stop and remove services

---

Made with ❤️ while learning Docker