b1rdmania
1b10f006f9
- 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>
103 lines
2.5 KiB
Markdown
103 lines
2.5 KiB
Markdown
# 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`
|