Fix Vercel deploy: build dist and run Express as serverless.

server/src/server.ts

@@ -83,6 +83,12 @@ app.get('/health', (req, res) => {
   res.json({ status: 'ok', timestamp: new Date().toISOString() });
 });
 
-app.listen(port, () => {
+// Vercel serverless runtime expects an exported handler (Express apps are handlers).
+// Locally, we still want to run a dev server with `app.listen`.
+export default app;
+
+if (!process.env.VERCEL) {
+  app.listen(port, () => {
     console.log(`🎵 Motif backend running on port ${port}`);
-});
+  });
+}

src/services/MIDIService.ts

@@ -35,8 +35,20 @@ export class MIDIService {
   private baseUrl: string;
 
   constructor(baseUrl?: string) {
-    // Use environment variable or fallback to localhost for development
-    this.baseUrl = baseUrl || import.meta.env.VITE_API_URL || 'http://localhost:3001';
+    // Production (Vercel): prefer same-origin API (no env var needed)
+    // Dev: default to local backend on :3001
+    const envUrl = (import.meta as any).env?.VITE_API_URL as string | undefined;
+    const isDev = Boolean((import.meta as any).env?.DEV);
+
+    if (baseUrl) {
+      this.baseUrl = baseUrl;
+    } else if (envUrl) {
+      this.baseUrl = envUrl;
+    } else if (isDev) {
+      this.baseUrl = 'http://localhost:3001';
+    } else {
+      this.baseUrl = '';
+    }
   }
 
   async search(query: string): Promise<MIDISearchResult[]> {

vercel.json

@@ -2,8 +2,11 @@
   "version": 2,
   "builds": [
     {
-      "src": "dist/index.html",
-      "use": "@vercel/static"
+      "src": "package.json",
+      "use": "@vercel/static-build",
+      "config": {
+        "distDir": "dist"
+      }
     },
     {
       "src": "server/src/server.ts",
@@ -19,9 +22,10 @@
       "src": "/health",
       "dest": "server/src/server.ts"
     },
+    { "handle": "filesystem" },
     {
       "src": "/(.*)",
-      "dest": "/dist/$1"
+      "dest": "/index.html"
     }
   ]
 }