Add Docker and docker-compoese

README.md

@@ -4,4 +4,9 @@ Tinder like Flashcard App
 # Environment
 ## frontend
 - React
-- Vite
+- Vite
+
+# Run Locally
+```
+docker compose up --build
+```

docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3.8'
+
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    volumes:
+      - ./frontend:/app
+      - node_modules_volume:/app/node_modules
+    command: sh -c "pnpm run start"
+    ports:
+      - "5173:5173"
+    environment:
+      - CHOKIDAR_USEPOLLING=true      
+      - NODE_ENV=development
+volumes:
+  node_modules_volume:

frontend/Dockerfile

@@ -0,0 +1,14 @@
+# Use official Node.js image as the base image
+FROM node:20.13.1
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and pnpm-lock.yaml files
+COPY package.json pnpm-lock.yaml ./
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Install dependencies
+RUN pnpm install

frontend/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "start": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",