Fix frontend build and serving process

Dockerfile

@@ -13,30 +13,39 @@ RUN apt-get update && \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
 
+# Create directories for temp files
+RUN mkdir -p temp_audio temp static
+
 # Copy the application code
 COPY . .
 
-# Make sure static directory exists and has the index.html file
-RUN mkdir -p ./static && \
-    if [ ! -f "./static/index.html" ]; then \
-    echo "WARNING: No index.html found in static directory"; \
-    else \
-    echo "Found index.html in static directory"; \
-    fi
-
-# Create directories for temp files
-RUN mkdir -p temp_audio temp
+# List directory contents
+RUN ls -la
 
 # Execute the build frontend script to prepare frontend code
-RUN chmod +x build_frontend.sh && ./build_frontend.sh || echo "Frontend build script failed but continuing"
+RUN chmod +x build_frontend.sh && \
+    ./build_frontend.sh && \
+    echo "Frontend build script completed successfully"
+
+# Verify the static files
+RUN echo "Checking static directory contents:" && \
+    ls -la ./static && \
+    if [ -f "./static/index.html" ]; then \
+    echo "Frontend index.html found"; \
+    else \
+    echo "WARNING: Frontend index.html not found in static directory"; \
+    exit 1; \
+    fi && \
+    if [ -d "./static/assets" ]; then \
+    echo "Frontend assets directory found"; \
+    ls -la ./static/assets; \
+    else \
+    echo "WARNING: Frontend assets directory not found"; \
+    fi
 
 # Install backend dependencies
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Verify the static files
-RUN ls -la ./static && \
-    if [ -f "./static/index.html" ]; then echo "Frontend index.html found"; else echo "WARNING: Frontend index.html not found"; fi
-
 # Default environment variables
 ENV PORT=7860
 ENV HOST=0.0.0.0

app.py

@@ -64,11 +64,14 @@ frontend_app.add_middleware(
     allow_headers=["*"],
 )
 
-# Mount static directory
+# Check if static directory exists with index.html
+static_index_exists = static_path.exists() and index_path.exists()
+logger.info(f"Static path exists: {static_path.exists()}")
 if static_path.exists():
-    frontend_app.mount("/static", StaticFiles(directory=str(static_path)), name="static")
+    logger.info(f"Static directory contents: {os.listdir(static_path)}")
+    logger.info(f"Static index exists: {index_path.exists()}")
 
-# Root route handler
+# Root route handler - must come before mounting static files
 @frontend_app.get("/", response_class=HTMLResponse)
 async def read_root():
     logger.info(f"Serving index.html from {index_path}")
@@ -85,12 +88,50 @@ async def read_root():
 async def status():
     return {"status": "ok", "message": "PodCraft API is running"}
 
-# Check if static directory exists with index.html
-static_index_exists = static_path.exists() and index_path.exists()
-logger.info(f"Static path exists: {static_path.exists()}")
+# Serve specific file types with correct Content-Type
+@frontend_app.get("/assets/{file_path:path}")
+async def serve_assets(file_path: str):
+    file_full_path = static_path / "assets" / file_path
+    
+    if not file_full_path.exists() or not file_full_path.is_file():
+        logger.warning(f"Asset file not found: {file_full_path}")
+        raise HTTPException(status_code=404, detail="Asset file not found")
+    
+    # Determine content type based on file extension
+    content_type = None
+    if file_path.endswith(".js"):
+        content_type = "application/javascript"
+    elif file_path.endswith(".css"):
+        content_type = "text/css"
+    elif file_path.endswith(".svg"):
+        content_type = "image/svg+xml"
+    elif file_path.endswith(".png"):
+        content_type = "image/png"
+    elif file_path.endswith(".jpg") or file_path.endswith(".jpeg"):
+        content_type = "image/jpeg"
+    
+    logger.info(f"Serving asset: {file_path} with content-type: {content_type}")
+    return FileResponse(file_full_path, media_type=content_type)
+
+# Now mount the static directory AFTER defining the root handler
 if static_path.exists():
-    logger.info(f"Static directory contents: {os.listdir(static_path)}")
-    logger.info(f"Static index exists: {index_path.exists()}")
+    frontend_app.mount("/static", StaticFiles(directory=str(static_path)), name="static")
+
+# Catch-all route to serve index.html for client-side routing
+@frontend_app.get("/{full_path:path}")
+async def catch_all(full_path: str):
+    # Skip API paths
+    if full_path.startswith("api/") or full_path.startswith("docs") or full_path.startswith("openapi.json"):
+        raise HTTPException(status_code=404, detail="Not found")
+    
+    logger.info(f"Catch-all route hit for path: {full_path}, serving index.html")
+    # For any other path, serve index.html to support client-side routing
+    if index_path.exists():
+        with open(index_path, "r") as f:
+            content = f.read()
+            return HTMLResponse(content=content)
+    else:
+        return HTMLResponse(content="Index file not found", status_code=404)
 
 try:
     # Try to import the backend app
@@ -99,9 +140,6 @@ try:
     # Now create a merged app that prioritizes frontend routes
     app = FastAPI(title="PodCraft")
     
-    # Add frontend app routes to the main app
-    app.mount("/", frontend_app)
-    
     # Add CORS middleware
     app.add_middleware(
         CORSMiddleware,
@@ -111,10 +149,21 @@ try:
         allow_headers=["*"],
     )
     
-    # Forward specific backend API routes
-    @app.get("/api/{path:path}")
-    async def api_route(request: Request, path: str):
-        return await backend_app.handle_request(request)
+    # Include the backend app routes
+    # This imports all routes from the backend_app into our main app
+    from fastapi import APIRouter
+    backend_router = APIRouter()
+    
+    # Import all routes from backend_app
+    for route in backend_app.routes:
+        backend_router.routes.append(route)
+    
+    # Add the backend routes
+    app.include_router(backend_router)
+    
+    # Mount the frontend app at the root - this should be last
+    # so that API routes take precedence but frontend handles all other routes
+    app.mount("/", frontend_app)
     
     app_to_run = app
     logger.info("Using merged application (frontend + backend)")

build_frontend.sh

@@ -1,12 +1,50 @@
 #!/bin/bash
 
-# This script is used to pull the latest frontend code during the build process
+# This script is used to build and prepare the frontend code during the Docker build process
 # It is called from the Dockerfile
 
 set -e  # Exit on error
 
+echo "Starting frontend build process..."
+
+# Clear the static directory but create it if it doesn't exist
+mkdir -p ./static
+rm -rf ./static/*
+
 if [ -d "frontend/podcraft" ]; then
-    echo "Frontend code already exists"
+    echo "Frontend code found, attempting to build..."
+    
+    # Navigate to the frontend directory
+    cd frontend/podcraft
+    
+    # Check if package.json exists
+    if [ -f "package.json" ]; then
+        echo "Installing frontend dependencies..."
+        npm install --quiet || { echo "npm install failed"; exit 1; }
+        
+        echo "Building frontend application..."
+        npm run build || { echo "npm build failed"; exit 1; }
+        
+        # Check if the build directory exists
+        if [ -d "dist" ]; then
+            echo "Build successful, copying files to static directory..."
+            cp -r dist/* ../../static/
+            echo "Frontend build files copied to static directory"
+            
+            # List the contents of the static directory to verify
+            echo "Static directory contents:"
+            ls -la ../../static/
+        else
+            echo "ERROR: Build directory 'dist' not found after build"
+            exit 1
+        fi
+    else
+        echo "ERROR: package.json not found in frontend/podcraft"
+        exit 1
+    fi
+    
+    # Return to the original directory
+    cd ../..
 else
     echo "Frontend code not found, creating a fallback UI"
     mkdir -p frontend/podcraft/public
@@ -356,7 +394,28 @@ EOF
 EOF
 
     echo "Created fallback frontend code"
+    
+    # Try to build and copy the fallback UI
+    cd frontend/podcraft
+    npm install --quiet || { echo "npm install failed for fallback UI"; exit 1; }
+    npm run build || { echo "npm build failed for fallback UI"; exit 1; }
+    
+    if [ -d "dist" ]; then
+        echo "Fallback UI build successful, copying files to static directory..."
+        cp -r dist/* ../../static/
+        echo "Fallback UI build files copied to static directory"
+    else
+        echo "ERROR: Fallback UI build directory 'dist' not found"
+        # Copy our static HTML directly as last resort
+        echo "Copying static HTML file as last resort..."
+        cp index.html ../../static/
+    fi
+    
+    # Return to the original directory
+    cd ../..
 fi
 
+echo "Frontend build process completed"
+
 # Make the script executable
 chmod +x $0