loreal-video-optimizer/MAMP_SETUP.md

MAMP Setup Guide

Overview

This guide explains how to run the Video Optimizer with MAMP hosting the frontend while the Python backend runs separately.

Architecture

MAMP (Port 8888)          Python Flask (Port 5000)
    ↓                              ↓
Frontend (HTML/JS)  ←→ API Calls → Backend (Video Processing)

The frontend runs on MAMP, but makes API calls to the Python backend for video processing.

---

Step 1: Setup Python Backend

1.1 Activate Virtual Environment

cd /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction
source venv/bin/activate

1.2 Start Backend Server

cd backend
python app.py

You should see:

Starting Video Optimization Server...
Upload folder: .../backend/uploads
Output folder: .../backend/outputs
 * Running on http://0.0.0.0:5000

Keep this terminal running! The backend must stay active.

---

Step 2: Configure MAMP

2.1 Open MAMP Preferences

1. Open MAMP application
2. Go to Preferences > Ports
3. Verify Apache Port (usually 8888 or 80)

2.2 Set Document Root

1. Go to Preferences > Web Server
2. Click "Select" next to Document Root
3. Navigate to: /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/frontend
4. Click "Select"

2.3 Start MAMP

1. Click "Start Servers"
2. Wait for Apache and MySQL to turn green

---

Step 3: Configure API Endpoint

3.1 Edit config.js

Open frontend/config.js and ensure it points to your Python backend:

const CONFIG = {
    // Python Flask backend URL - MUST be running!
    API_BASE: 'http://localhost:5000/api',

    MAX_FILE_SIZE: 500 * 1024 * 1024,
    DEBUG: true
};

3.2 Verify Configuration

The default port 5000 should work. If your Python backend is on a different port, update this line.

---

Step 4: Access the Application

Open in Browser

Navigate to: http://localhost:8888/index.html

Or if MAMP is on port 80: http://localhost/index.html

---

Step 5: Test the Connection

5.1 Check Backend Health

Open browser console (F12) and run:

fetch('http://localhost:5000/api/health')
    .then(r => r.json())
    .then(d => console.log(d))

Should return:

{
    "status": "ok",
    "ffmpeg_installed": true,
    "timestamp": "2025-..."
}

5.2 Upload a Test Video

1. Drag and drop a video file
2. Check browser console for any errors
3. Verify backend terminal shows upload activity

---

Common Issues & Solutions

Issue 1: "Failed to fetch" Error

Problem: Frontend can't reach backend

Solutions:

1. Check backend is running:

   ps aux | grep "python.*app.py"
   

2. Test backend directly:

   curl http://localhost:5000/api/health
   

3. Check CORS settings in backend/app.py:

   CORS(app)  # Should be present
   

4. Verify port 5000 is not blocked:

   lsof -i :5000
   

---

Issue 2: CORS Errors

Symptom: Console shows "CORS policy" errors

Solution: Ensure backend/app.py has:

from flask_cors import CORS
app = Flask(__name__)
CORS(app)

Already included! If still having issues, try:

CORS(app, resources={r"/api/*": {"origins": "*"}})

---

Issue 3: Backend Not Starting

Error: Port 5000 already in use

Solution:

# Find process using port 5000
lsof -ti:5000

# Kill it
lsof -ti:5000 | xargs kill

# Or use a different port
python app.py --port 5001

Then update frontend/config.js:

API_BASE: 'http://localhost:5001/api'

---

Issue 4: File Upload Fails

Symptom: Upload shows error or times out

Check:

1. File size limit (default 500MB):

   // In config.js
   MAX_FILE_SIZE: 500 * 1024 * 1024
   

2. Backend upload folder exists:

   ls -la backend/uploads/
   

3. Permissions:

   chmod 755 backend/uploads
   chmod 755 backend/outputs
   

---

Alternative: Direct File Access

If you prefer not to use MAMP, you can open the HTML directly:

# Open with default browser
open frontend/index.html

# Or
# Just drag index.html into your browser

Important: Some browsers restrict file:// protocol. Chrome/Safari should work fine.

---

Development Workflow

Typical Setup:

Terminal 1 - Backend:

cd /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction
source venv/bin/activate
cd backend
python app.py

MAMP:

• Document Root: .../frontend
• Apache running on port 8888
• Access: http://localhost:8888/index.html

Browser:

• Open http://localhost:8888/index.html
• Open DevTools (F12) to monitor API calls

---

Debugging Tips

Enable Debug Mode

In frontend/config.js:

DEBUG: true

In backend/app.py:

app.run(debug=True, host='0.0.0.0', port=5000)

Monitor Network Requests

1. Open browser DevTools (F12)
2. Go to Network tab
3. Upload a file
4. Check API calls to localhost:5000

Check Backend Logs

Watch the terminal running python app.py for:

• Upload confirmations
• Conversion progress
• Error messages

---

Production Considerations

For production deployment:

1. Change API_BASE in config.js to your production URL
2. Disable DEBUG mode
3. Use production WSGI server (Gunicorn, uWSGI)
4. Set up proper CORS restrictions
5. Configure SSL/HTTPS
6. Implement authentication if needed

---

Quick Troubleshooting Commands

# Check if backend is running
curl http://localhost:5000/api/health

# Check if MAMP is serving files
curl http://localhost:8888/index.html

# Test backend upload endpoint
curl -X POST http://localhost:5000/api/platforms

# View backend logs
cd backend
python app.py  # Watch terminal output

# Check FFmpeg
ffmpeg -version

# List processes
ps aux | grep -E "(python|httpd)"

---

File Structure for MAMP

MAMP Document Root → /frontend/
├── index.html          ← Entry point
├── style.css
├── app.js
└── config.js           ← Configure API endpoint here

Python Backend → /backend/
├── app.py              ← Must be running (port 5000)
├── video_processor.py
├── platform_specs.py
├── uploads/            ← Auto-created
└── outputs/            ← Auto-created

---

Success Checklist

• Python backend running on port 5000
• MAMP Apache running
• MAMP Document Root set to frontend/ folder
• config.js has correct API_BASE URL
• Can access http://localhost:8888/index.html
• Browser console shows no CORS errors
• Test upload works
• FFmpeg installed and detected

---

Need Help?

1. Check backend terminal for errors
2. Check browser console (F12) for JavaScript errors
3. Test backend directly: curl http://localhost:5000/api/health
4. Verify MAMP is serving files: curl http://localhost:8888/index.html

The key: Python backend MUST be running for video processing to work!