set cors/fetch request config conditionally based on environment variables

Author: Woozl

.devcontainer/devcontainer.json

@@ -15,6 +15,12 @@
 	// Use 'postCreateCommand' to run commands after the container is created.
 	"postCreateCommand": "cd frontend && npm install",
 
+	"containerEnv": {
+		"UVICORN_HOST": "localhost",
+		"UVICORN_PORT": "3000",
+		"VITE_LOCAL_DOWNLOAD_SERVER": "http://localhost:3000"
+	},
+
 	// Configure tool-specific properties.
 	"customizations": {
 		"vscode": {

frontend/src/App.tsx

@@ -1,19 +1,21 @@
 import { useState } from "react"
 
-const DOWNLOAD_API = "http://localhost:3000/download";
+// For development, the Vite devserver is a separate process/host than the download server,
+// so we set this env var in the devcontainer config. Basically this var becomes: 
+//     dev  -> http://localhost:3000/download   // fetch on separate server
+//     prod -> /download                        // fetch on same origin
+const download_server_url = `${import.meta.env.VITE_LOCAL_DOWNLOAD_SERVER ?? ''}/download`;
 
 function App() {
   const [url, setUrl] = useState("");
 
   const handleDownload: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
-    console.log("submit")
 
     const params = new URLSearchParams({
       url
     });
-
-    const res = await fetch(`${DOWNLOAD_API}?${params}}`);
+    const res = await fetch(`${download_server_url}?${params}}`);
     const blob = await res.blob();
 
     // pull file name out of header

main.py

@@ -1,20 +1,26 @@
 from yt_dlp import YoutubeDL
 from fastapi import FastAPI, BackgroundTasks
+from fastapi.staticfiles import StaticFiles
 from starlette.responses import FileResponse
 from starlette.middleware.cors import CORSMiddleware
 from tempfile import TemporaryDirectory
 from copy import deepcopy
-from os import path
+from os import path, environ
 
 app = FastAPI()
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-    expose_headers=["Content-Disposition"],
-)
+
+# If we're in development, allow CORS to let Vite dev server communicate.
+# If we're in production, we don't need it as the static frontend is hosted
+# by this server and all requests are same-origin
+if environ.get("PYTHON_ENV") != "production":
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=["*"],
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+        expose_headers=["Content-Disposition"],
+    )
 
 DEFAULT_OPTIONS = {
     "format": "best",
@@ -27,7 +33,6 @@
     "outtmpl": "%(title)s.%(ext)s",
 }
 
-
 @app.get("/download")
 def download(url: str, background_tasks: BackgroundTasks):
     tempdir = TemporaryDirectory()