Feat: Integrate Frontend Service with Docker

- Add docker-compose.yml for orchestrating multi-container Docker applications.
- Introduce a new Dockerfile in the frontend directory for building the frontend service.
- Initialize Python package by adding __init__.py in the frontend directory.
- Move frontend_app.py to the new frontend directory.
- Add dedicated poetry.lock and pyproject.toml for frontend service dependencies.
- Update the root poetry.lock and pyproject.toml files to not include streamlit dependencies.

The frontend service is now dockerized and integrated with the backend service using Docker Compose. The frontend and backend services are defined and configured in the docker-compose.yml file, allowing them to be built and run together, ensuring seamless interaction between the two.

docker-compose.yml

@@ -0,0 +1,20 @@
+version: '3'
+
+services:
+  backend:
+    build: 
+      context: . # Directory containing the backend Dockerfile and source code
+      dockerfile: Dockerfile  # Path to backend Dockerfile
+      args:
+        API_KEY: ${API_KEY} 
+    ports:
+      - "8000:8000"  # Expose the port the backend service runs on
+    env_file:
+      - .env
+
+  frontend:
+    build: 
+      context: ./frontend  # Directory the frontend Dockerfile and source code
+      dockerfile: Dockerfile  # Path to your frontend Dockerfile
+    ports:
+      - "8501:8501"  # Expose the port the frontend service runs on

frontend/Dockerfile

@@ -0,0 +1,27 @@
+# Use the official Python image 
+FROM python:3.10
+
+# Set the working directory in the container to /app
+WORKDIR /frontend
+
+# Copy the poetry files
+COPY pyproject.toml poetry.lock /frontend/
+
+# Install poetry
+RUN pip install poetry
+
+# Install the dependencies globally within the container.
+RUN poetry config virtualenvs.create false
+
+# Install project dependencies
+RUN poetry lock
+RUN poetry install
+
+# Copy the frontend application file to the working directory
+COPY frontend_app.py .
+
+# Expose the port the app runs on
+EXPOSE 8501
+
+# Execute the script when the container starts
+CMD ["streamlit", "run", "frontend_app.py"]

app/frontend_app.py → frontend/frontend_app.py

@@ -1,8 +1,8 @@
 import streamlit as st
-import requests  # Import requests library
+import requests 
 
 # FastAPI server URL
-SERVER_URL = "http://localhost:8000/recommendations/"  # Replace with your FastAPI server URL
+SERVER_URL = "http://backend:8000/recommendations/" # Replace with localhost if running locally
 
 st.title('Movie Recommendation System')
 
@@ -11,8 +11,8 @@
 num_rec = st.number_input('Number of Recommendations:', min_value=1, value=10)  # Number of recommendations
 
 # Get Recommendations Button
-if st.button('Get Recommendations'):  # If the button is pressed
-    if query:  # If a query is entered
+if st.button('Get Recommendations'):
+    if query:
         st.subheader('Recommendations for "{}":'.format(query))
 
         # Prepare payload

frontend/pyproject.toml

@@ -0,0 +1,15 @@
+[tool.poetry]
+name = "movie-rec-system-frontend"
+version = "0.1.0"
+description = "Frontend for Movie Recommendation System"
+authors = ["Magnus <[email protected]>"]
+readme = "README.md"
+
+[tool.poetry.dependencies]
+python = "^3.10"
+streamlit = "^1.25.0"
+requests = "^2.31"
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api"

pyproject.toml

@@ -1,7 +1,7 @@
 [tool.poetry]
 name = "movie-rec-system"
 version = "0.1.0"
-description = ""
+description = "Backend for Movie Recommendation System"
 authors = ["Magnus <[email protected]>"]
 readme = "README.md"
 
@@ -21,7 +21,6 @@ pytest = "7.4.0"
 uvicorn = "0.23.2"
 httpx = "^0.24.1"
 seaborn = "^0.12.2"
-streamlit = "^1.25.0"
 
 [tool.jupysql.SqlMagic]
 autopandas = true