Fix iOS zoom and production API configuration

- 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>
2025-12-18 19:09:23 +00:00
parent 593bbd7032
commit 1b10f006f9
6 changed files with 147 additions and 3 deletions
@@ -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`