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>
This commit is contained in:
b1rdmania
@@ -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
|
||||
+102
@@ -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`
|
||||
+2
-1
@@ -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 {
|
||||
|
||||
@@ -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[]> {
|
||||
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL?: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
+27
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user