fixed cookies and CORS

Dockerfile

@@ -28,6 +28,7 @@ RUN if [ -n "$SPACE_HOST" ]; then \
         VITE_BACKEND_URL="$SPACE_HOST" pnpm build; \
     else \
         echo "Building without SPACE_HOST"; \
+        VITE_BACKEND_URL="http://127.0.0.1:9481" \
         pnpm build; \
     fi
 
@@ -80,7 +81,7 @@ ENV FRONTEND_PATH=/app/frontend/dist
 USER appuser
 
 # Expose port (adjust if needed)
-EXPOSE 8000
+EXPOSE 9481
 
 # Run FastAPI via uvicorn
-CMD ["uvicorn", "backend.src.app:app", "--host", "0.0.0.0", "--port", "8000"]
+CMD ["uvicorn", "backend.src.app:app", "--host", "0.0.0.0", "--port", "9481"]

Makefile

@@ -10,3 +10,9 @@ style:
 quality:
 	cd $(BACKEND_DIR) && make quality
 	cd $(FRONTEND_DIR) && pnpm quality
+
+docker-build:
+	docker build -t docker-space-fastapi-react .
+
+docker-run:
+	docker run -e HF_TOKEN -p 9481:9481 docker-space-fastapi-react

README.md

@@ -4,7 +4,7 @@ emoji: 💻
 colorFrom: blue
 colorTo: green
 sdk: docker
-app_port: 8000
+app_port: 9481
 pinned: false
 license: mit
 short_description: Template to vibe code a demo running on FastAPI + React
@@ -68,7 +68,7 @@ If you want to run it on your own, you can use Docker:
 
 ```bash
 docker build -t fastapi-react-space .
-docker run -p 8000:8000 fastapi-react-space
+docker run -e HF_TOKEN -p 9481:9481 fastapi-react-space
 ```
 
 Note that when running in Docker, the app runs in production mode without hot-reloading.

backend/src/app.py

@@ -23,14 +23,15 @@ async def lifespan(app: FastAPI):
 app = FastAPI(lifespan=lifespan)
 
 
-# Lax on CORS headers (Spaces take care of security issues)
+# Set CORS headers
 app.add_middleware(
     CORSMiddleware,
     allow_origins=[
-        "http://0.0.0.0:8000",
+        # Can't use "*" because frontend doesn't like it with "credentials: true"
         "http://localhost:5173",
-        "https://huggingface.co",
-        "https://*.hf.space/",
+        "http://0.0.0.0:9481",
+        "http://localhost:9481",
+        "http://127.0.0.1:9481",
     ],
     allow_credentials=True,
     allow_methods=["*"],

frontend/src/App.tsx

@@ -6,7 +6,7 @@ import huggingfaceLogo from "./assets/huggingface.svg";
 function App() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white flex flex-col">
-      <BackendHealthCheck />
+      {!import.meta.env.PROD && <BackendHealthCheck />}
 
       <div className="text-center pt-8 pb-6">
         <div className="flex items-center justify-center space-x-3 mb-4">

frontend/src/components/BackendHealthCheck.tsx

@@ -42,11 +42,6 @@ export function BackendHealthCheck({
     return () => clearInterval(interval);
   }, [healthCheckUrl, checkInterval]);
 
-  // Only render in development mode
-  if (import.meta.env.PROD) {
-    return null;
-  }
-
   const handleCopyCode = async () => {
     const codeText = `cd backend/\nmake install\nmake backend`;
     try {