From 1b10f006f93ad2f9c773a43d843c1b4dd473c9d4 Mon Sep 17 00:00:00 2001
From: b1rdmania <102524336+b1rdmania@users.noreply.github.com>
Date: Thu, 18 Dec 2025 19:09:23 +0000
Subject: [PATCH] Fix iOS zoom and production API configuration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix iOS auto-zoom on input focus (set font-size: 16px)
- Lock viewport to prevent manual zoom (maximum-scale=1.0)
- Make API URL configurable via VITE_API_URL environment variable
- Add TypeScript types for Vite environment variables
- Create deployment guide with Vercel/backend setup instructions
- Add .env.example for local development configuration
- Add vercel.json for unified frontend/backend deployment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .env.example                |   4 ++
 DEPLOYMENT.md               | 102 ++++++++++++++++++++++++++++++++++++
 index.html                  |   3 +-
 src/services/MIDIService.ts |   5 +-
 src/vite-env.d.ts           |   9 ++++
 vercel.json                 |  27 ++++++++++
 6 files changed, 147 insertions(+), 3 deletions(-)
 create mode 100644 .env.example
 create mode 100644 DEPLOYMENT.md
 create mode 100644 src/vite-env.d.ts
 create mode 100644 vercel.json

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..3e60aac
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+# API URL for MIDI search/fetch backend
+# Development: http://localhost:3001
+# Production: Your deployed backend URL (e.g., https://your-api.vercel.app)
+VITE_API_URL=http://localhost:3001
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
new file mode 100644
index 0000000..f057411
--- /dev/null
+++ b/DEPLOYMENT.md
@@ -0,0 +1,102 @@
+# Deployment Guide for Motif
+
+## iOS Fixes Applied
+- ✓ Fixed auto-zoom on input focus (font-size: 16px, viewport locked)
+- ✓ Prevented zoom on touch (maximum-scale=1.0, user-scalable=no)
+
+## Backend Deployment
+
+The MIDI search requires a backend server to be running. You have two options:
+
+### Option 1: Deploy Backend Separately (Recommended for Production)
+
+1. Deploy the backend to a service like Render, Railway, or Heroku:
+   ```bash
+   cd server
+   npm install
+   npm run build
+   npm start
+   ```
+
+2. Set the `VITE_API_URL` environment variable in your frontend deployment to point to your backend:
+   ```
+   VITE_API_URL=https://your-backend-url.com
+   ```
+
+### Option 2: Run Backend Locally (Development Only)
+
+1. In one terminal, start the backend:
+   ```bash
+   npm run dev:backend
+   ```
+
+2. In another terminal, start the frontend:
+   ```bash
+   npm run dev
+   ```
+
+## Vercel Deployment
+
+### Deploy Frontend to Vercel:
+
+1. Build the project:
+   ```bash
+   npm run build
+   ```
+
+2. Deploy to Vercel:
+   ```bash
+   vercel --prod
+   ```
+
+3. Set environment variable in Vercel dashboard:
+   - Variable name: `VITE_API_URL`
+   - Value: Your deployed backend URL (e.g., `https://motif-backend.onrender.com`)
+
+### Deploy Backend to Render/Railway:
+
+1. Create a new Web Service
+2. Connect your GitHub repository
+3. Set build command: `cd server && npm install && npm run build`
+4. Set start command: `cd server && npm start`
+5. Add environment variable `PORT` (usually auto-set)
+6. Deploy
+
+## Environment Variables
+
+Create a `.env` file in the root directory for local development:
+
+```bash
+VITE_API_URL=http://localhost:3001
+```
+
+For production, set this in your deployment platform (Vercel, Netlify, etc.):
+
+```bash
+VITE_API_URL=https://your-backend-api-url.com
+```
+
+## Testing the Deployment
+
+1. Open the deployed URL on iOS Safari
+2. Search for a song (e.g., "Hotel California")
+3. You should see MIDI results load
+4. Select a result and play it
+5. The page should NOT zoom when touching the search input
+
+## Troubleshooting
+
+### No search results on production:
+- Check that backend is running (visit `https://your-backend-url.com/health`)
+- Verify `VITE_API_URL` environment variable is set correctly in Vercel
+- Check browser console for CORS errors
+- Rebuild frontend after setting environment variables
+
+### iOS zoom issue persists:
+- Clear Safari cache
+- Hard reload the page
+- Check that the latest build is deployed
+
+### CORS errors:
+- Backend must allow requests from your frontend domain
+- Check server CORS configuration in `server/src/server.ts`
diff --git a/index.html b/index.html
index 5a75c35..79eef0b 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Motif - Procedural Music Synthesis</title>
     <style>
         body {
@@ -79,6 +79,7 @@
             padding: 8px 12px;
             margin: 0 10px;
             font-family: inherit;
+            font-size: 16px; /* Prevent iOS auto-zoom */
         }
         
         .results-section {
diff --git a/src/services/MIDIService.ts b/src/services/MIDIService.ts
index 4e1bfac..1423591 100644
--- a/src/services/MIDIService.ts
+++ b/src/services/MIDIService.ts
@@ -34,8 +34,9 @@ interface MIDISearchResponse {
 export class MIDIService {
   private baseUrl: string;
 
-  constructor(baseUrl = 'http://localhost:3001') {
-    this.baseUrl = baseUrl;
+  constructor(baseUrl?: string) {
+    // Use environment variable or fallback to localhost for development
+    this.baseUrl = baseUrl || import.meta.env.VITE_API_URL || 'http://localhost:3001';
   }
 
   async search(query: string): Promise<MIDISearchResult[]> {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..c57d674
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..e877135
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,27 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "dist/index.html",
+      "use": "@vercel/static"
+    },
+    {
+      "src": "server/src/server.ts",
+      "use": "@vercel/node"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/api/(.*)",
+      "dest": "server/src/server.ts"
+    },
+    {
+      "src": "/health",
+      "dest": "server/src/server.ts"
+    },
+    {
+      "src": "/(.*)",
+      "dest": "/dist/$1"
+    }
+  ]
+}