---

React + TypeScript + Vite (with Docker)

This project uses React, TypeScript, and Vite to create a fast and modern frontend development environment. It also includes instructions for running the application inside a Docker container with live reload support using mounted volumes.

---

🛠 Features

• ⚡️ Fast development with Vite
• ⚛️ React + TypeScript support
• 🔁 Hot Module Replacement (HMR)
• 🐳 Dockerized development environment
• ✅ ESLint rules for clean code

---

📦 Setup

1. Install Dependencies

npm install

---

🚀 Development

Modify package.json

Update the dev script to allow access from external hosts (required inside Docker):

"scripts": {
  "dev": "vite --host",
  "build": "vite build",
  "preview": "vite preview"
}

---

🐳 Running in Docker

1. Build Docker Image

docker build -t react-docker .

2. Run Container (basic)

docker run -p 5173:5173 react-docker

Explanation:

• -p 5173:5173 maps host port 5173 to container port 5173 (Vite default port)

---

💻 Live Development with Local Files

To develop with hot reload from your local filesystem:

docker run -p 5173:5173 \
  -v "${pwd}:/app" \
  -v /app/node_modules \
  react-docker

docker run -p 5173:5173 -v "${pwd}:/app" -v /app/node_modules react-docker

Explanation:

• -v "${pwd}:/app" mounts your current local directory into /app inside the container (so changes on your machine immediately reflect in the container)
• -v /app/node_modules creates an anonymous volume for node_modules inside the container (this prevents overwriting node_modules from your local machine, which might be incompatible with the container)

---

📝 Docker Hub

docker tag react-docker visitha2001/react-docker
docker push visitha2001/react-docker

📂 Project Structure

.
├── src/            # React + TypeScript source files
├── public/         # Static assets
├── package.json
├── tsconfig.json
├── vite.config.ts
└── Dockerfile

---

✅ Available Vite Plugins

• @vitejs/plugin-react — uses Babel for Fast Refresh
• @vitejs/plugin-react-swc — uses SWC for Fast Refresh

---

📌 Notes

• Vite runs on port 5173 by default
• Make sure to use vite --host to make the dev server accessible from outside the container

---

📝 License

MIT

---