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 8963b70..0b65035 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/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