Merge pull request #6 from SimerusM/4-dockerize-everything

dockerize

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"]

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)

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"]

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',

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);

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