Files

T

b1rdmania 1b10f006f9 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

2.5 KiB

Raw Blame History

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)

Deploy the backend to a service like Render, Railway, or Heroku:
```
cd server
npm install
npm run build
npm start
```
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)

In one terminal, start the backend:
```
npm run dev:backend
```
In another terminal, start the frontend:
```
npm run dev
```

Vercel Deployment

Deploy Frontend to Vercel:

Build the project:
```
npm run build
```
Deploy to Vercel:
```
vercel --prod
```
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:

Create a new Web Service
Connect your GitHub repository
Set build command: cd server && npm install && npm run build
Set start command: cd server && npm start
Add environment variable PORT (usually auto-set)
Deploy

Environment Variables

Create a .env file in the root directory for local development:

VITE_API_URL=http://localhost:3001

For production, set this in your deployment platform (Vercel, Netlify, etc.):

VITE_API_URL=https://your-backend-api-url.com

Testing the Deployment

Open the deployed URL on iOS Safari
Search for a song (e.g., "Hotel California")
You should see MIDI results load
Select a result and play it
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

2.5 KiB Raw Blame History