From cdee65f3fa5f8e35637d1e777b675e4e73dd12d8 Mon Sep 17 00:00:00 2001
From: ericz <ericzh1616@gmail.com>
Date: Sun, 25 Aug 2024 22:17:19 -0400
Subject: [PATCH] dev setup

---
 api-server/Dockerfile           | 23 +++++++++++++++++++++++
 api-server/app.py               |  2 +-
 client/Dockerfile               | 15 +++++++++++++++
 client/package.json             |  1 +
 client/src/pages/HomePage.js    |  4 +++-
 client/src/pages/MeetingPage.js |  8 ++++----
 docker-compose.yml              | 28 ++++++++++++++++++++++++++++
 7 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 api-server/Dockerfile
 create mode 100644 client/Dockerfile
 create mode 100644 docker-compose.yml

diff --git a/api-server/Dockerfile b/api-server/Dockerfile
new file mode 100644
index 0000000..6ef4424
--- /dev/null
+++ b/api-server/Dockerfile
@@ -0,0 +1,23 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10.10
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install any needed packages specified in requirements.txt
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code to the container
+COPY . .
+
+# Make port 5000 available to the world outside this container
+EXPOSE 5000
+
+# Define environment variable
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=development
+ENV FLASK_DEBUG=1
+
+# Run Flask
+CMD ["flask", "run", "--host=0.0.0.0"]
\ No newline at end of file
diff --git a/api-server/app.py b/api-server/app.py
index 6e6a88b..e23ebcd 100644
--- a/api-server/app.py
+++ b/api-server/app.py
@@ -29,7 +29,7 @@ def log_message(level, message, meeting=''):
     
     color = color_map.get(level, RESET_COLOR)
     meeting = f"[{meeting}] " if meeting else ''
-    print(f"{color}{level} {meeting}- {message}{RESET_COLOR}")
+    print(f"{color}{level} {meeting}- {message}{RESET_COLOR}", flush=True)
 
 app = Flask(__name__)
 CORS(app)
diff --git a/client/Dockerfile b/client/Dockerfile
new file mode 100644
index 0000000..4043f00
--- /dev/null
+++ b/client/Dockerfile
@@ -0,0 +1,15 @@
+# Use an official Node.js runtime as a parent image
+FROM node:20.5.0
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install any needed packages specified in package.json
+COPY package*.json ./
+RUN npm install
+
+# Copy the rest of the application code to the container
+COPY . .
+
+# Start the React app in development mode
+CMD ["npm", "start"]
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index d1de62f..88c7659 100644
--- a/client/package.json
+++ b/client/package.json
@@ -2,6 +2,7 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:5000",
   "dependencies": {
     "@headlessui/react": "^2.1.3",
     "@heroicons/react": "^2.1.5",
diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js
index 602dc8f..6989f7f 100644
--- a/client/src/pages/HomePage.js
+++ b/client/src/pages/HomePage.js
@@ -3,6 +3,8 @@ import { useNavigate } from "react-router-dom";
 import { Input, Button } from "../components";
 import toast, { Toaster } from 'react-hot-toast';
 
+const apiUrl = process.env.REACT_APP_API_URL || 'http://localhost:5000';
+
 const HomePage = () => {
   const [meetCode, setMeetCode] = useState('');
   const [username, setUsername] = useState('');
@@ -26,7 +28,7 @@ const HomePage = () => {
       return;
     }
     try {
-      const response = await fetch('http://127.0.0.1:5000/api/create-meeting', {
+      const response = await fetch(`${apiUrl}/api/create-meeting`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
diff --git a/client/src/pages/MeetingPage.js b/client/src/pages/MeetingPage.js
index 7c23a16..3cfce14 100644
--- a/client/src/pages/MeetingPage.js
+++ b/client/src/pages/MeetingPage.js
@@ -4,7 +4,7 @@ import Button from '../components/Button';
 import io from 'socket.io-client';
 import toast, { Toaster } from 'react-hot-toast';
 
-const SERVER_URL = 'http://127.0.0.1:5000';
+const apiUrl = process.env.REACT_APP_API_URL || 'http://localhost:5000';
 
 const MeetingPage = () => {
   const { meeting_id } = useParams();
@@ -26,7 +26,7 @@ const MeetingPage = () => {
 
     console.log(`Joining meeting with ID: ${meeting_id}`);
 
-    const newSocket = io(SERVER_URL);
+    const newSocket = io(apiUrl);
     setSocket(newSocket);
 
     newSocket.on('connect', () => {
@@ -38,9 +38,9 @@ const MeetingPage = () => {
       console.log(`${data}`);
       console.log(`User ${data.username} joined the meeting`);
       toast.success(`User ${data.username} joined the meeting`);
-      if (data.username == username) {
+      if (data.username === username) {
         // get chat history with fetch
-        fetch(`${SERVER_URL}/api/chat_history/${meeting_id}`)
+        fetch(`${apiUrl}/api/chat_history/${meeting_id}`)
           .then((response) => response.json())
           .then((data) => {
             setMessages(data);
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..d6ddc0a
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,28 @@
+services:
+  backend:
+    build:
+      context: ./api-server
+    ports:
+      - "5000:5000"
+    volumes:
+      - ./api-server:/app
+    networks:
+      - app-network
+
+  frontend:
+    build:
+      context: ./client
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./client:/app
+    depends_on:
+      - backend
+    networks:
+      - app-network
+    environment:
+      - REACT_APP_API_URL=http://backend:5000
+
+networks:
+  app-network:
+    driver: bridge