Configure multi-stage Docker build to serve frontend and fix API URL

Dockerfile

@@ -1,7 +1,17 @@
 # ==============================================================
-# Tech Disciples AI Backend — Dockerfile (for Hugging Face Spaces)
+# Tech Disciples AI — Dockerfile (for Hugging Face Spaces)
 # ==============================================================
 
+# Stage 1: Build the React frontend
+FROM node:18-alpine AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+# Clean install to ensure all dependencies are properly resolved
+RUN npm install --legacy-peer-deps
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Set up the FastAPI backend
 FROM python:3.10-slim
 
 # Environment setup
@@ -23,6 +33,9 @@ RUN pip install --no-cache-dir -r requirements.txt
 # Copy all source files
 COPY . .
 
+# Copy the built frontend from Stage 1
+COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
+
 # Define Hugging Face token env var (Spaces injects the secret automatically)
 ENV HUGGINGFACEHUB_API_TOKEN=""
 

frontend/src/App.tsx

@@ -28,8 +28,8 @@ const App: React.FC = () => {
         setIsLoading(true);
 
         try {
-            // Note: In development, make sure to point to your FastAPI backend URL if different
-            const response = await axios.post('http://localhost:7860/ai-chat', {
+            // Note: Use relative path for Hugging Face deployment so it hits the same origin backend
+            const response = await axios.post('/ai-chat', {
                 query: userMessage,
                 session_id: sessionId,
             }, {
@@ -105,8 +105,8 @@ const App: React.FC = () => {
                                     {msg.role === 'user' ? <User size={16} /> : <Bot size={16} />}
                                 </div>
                                 <div className={`p-4 rounded-2xl ${msg.role === 'user'
-                                        ? 'bg-purple-600/30 text-white rounded-tr-none border border-purple-500/20'
-                                        : 'bg-white/5 text-white/90 rounded-tl-none border border-white/10 backdrop-blur-md'
+                                    ? 'bg-purple-600/30 text-white rounded-tr-none border border-purple-500/20'
+                                    : 'bg-white/5 text-white/90 rounded-tl-none border border-white/10 backdrop-blur-md'
                                     }`}>
                                     <div className="markdown-content prose prose-invert prose-sm max-w-none">
                                         <ReactMarkdown>{msg.content}</ReactMarkdown>

main.py

@@ -5,7 +5,9 @@
 import os
 import logging
 from typing import List, Optional
-from fastapi import FastAPI, HTTPException, Header
+from fastapi import FastAPI, HTTPException, Header, Request
+from fastapi.responses import HTMLResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
 from dotenv import load_dotenv
@@ -99,12 +101,25 @@ class QueryInput(BaseModel):
     query: str
     session_id: Optional[str] = "default"
 
-# =====================================================
-# ROUTES
-# =====================================================
-@app.get("/")
+# Mount the frontend directory as static files
+# In a typical Vite React app, the build output is in 'dist'.
+# If it's just raw HTML/JS/CSS we point to 'frontend'.
+frontend_dir = os.path.join(os.path.dirname(__file__), "frontend")
+dist_dir = os.path.join(frontend_dir, "dist")
+
+if os.path.isdir(dist_dir):
+    serve_dir = dist_dir
+else:
+    serve_dir = frontend_dir
+
+app.mount("/assets", StaticFiles(directory=os.path.join(serve_dir, "assets"), html=True), name="assets")
+
+@app.get("/", response_class=HTMLResponse)
 async def root():
-    return {"message": "✅ Theo AI (TechDisciples CLCC) is online and ready for ministry."}
+    index_path = os.path.join(serve_dir, "index.html")
+    if os.path.exists(index_path):
+        return FileResponse(index_path)
+    return {"message": "✅ Theo AI (TechDisciples CLCC) API is online. Frontend not built yet."}
 
 @app.post("/ai-chat")
 async def ai_chat(data: QueryInput, x_api_key: str = Header(None)):
@@ -157,4 +172,12 @@ async def ai_chat(data: QueryInput, x_api_key: str = Header(None)):
 
     except Exception as e:
         logger.error(f"⚠️ Model runtime error: {e}")
-        raise HTTPException(status_code=500, detail=f"Theo encountered an issue: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Theo encountered an issue: {str(e)}")
+
+# Catch-all route to serve the SPA index.html for unknown paths
+@app.exception_handler(404)
+async def custom_404_handler(request: Request, exc: HTTPException):
+    index_path = os.path.join(serve_dir, "index.html")
+    if os.path.exists(index_path) and not request.url.path.startswith("/api"):
+        return FileResponse(index_path)
+    return HTMLResponse(content="Not Found", status_code=404)