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">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<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>
|
<title>Motif - Procedural Music Synthesis</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
@@ -79,6 +79,7 @@
|
|||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
font-size: 16px; /* Prevent iOS auto-zoom */
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-section {
|
.results-section {
|
||||||
|
|||||||
@@ -34,8 +34,9 @@ interface MIDISearchResponse {
|
|||||||
export class MIDIService {
|
export class MIDIService {
|
||||||
private baseUrl: string;
|
private baseUrl: string;
|
||||||
|
|
||||||
constructor(baseUrl = 'http://localhost:3001') {
|
constructor(baseUrl?: string) {
|
||||||
this.baseUrl = baseUrl;
|
// 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[]> {
|
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