File size: 4,265 Bytes
9e4bb05 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | # ✨ API Auto-Detection System
## Cómo Funciona
El frontend detecta automáticamente dónde está alojado y conecta al backend correcto:
```
┌─────────────────────────────────────────────────────────────┐
│ FRONTEND ALOJADO EN │
└─────────────────────────────────────────────────────────────┘
│
┌─────────────┼─────────────┐
│ │ │
▼ ▼ ▼
LOCALHOST HUGGING FACE VERCEL/GITHUB
(Desarrollo) SPACES (Producción)
│ │ │
▼ ▼ ▼
localhost:8000 Auto-detect Configurable
```
## 📋 Matriz de Configuración
| Plataforma | Frontend URL | Backend URL | Auto-Detect | Config |
|-----------|--------------|-------------|-------------|--------|
| **Local Dev** | `localhost:3000` | `localhost:8000` | ✅ Automático | `.env.local` |
| **HF Spaces** | `username-andesai-frontend.hf.space` | `username-andesai-backend.hf.space` | ✅ Automático | Sin config |
| **Vercel** | `andesai.vercel.app` | `andesai-api.vercel.app` | ✅ Automático | Sin config |
| **GitHub Pages** | `username.github.io/andesai` | URL externa (Fly.io) | ⚙️ Manual | `.env.production` |
## 🔍 Cómo se Detecta (Orden de Prioridad)
```javascript
1. NEXT_PUBLIC_API_BASE env var explícita
↓ (Si no existe)
2. ¿Estoy en huggingface.co?
→ Auto-generar: https://{spaceName}-backend.hf.space
↓ (Si no)
3. ¿Estoy en vercel.app?
→ Auto-generar: https://{hostname-reemplazar-andesai-api}
↓ (Si no)
4. ¿Estoy en github.io o github.dev?
→ Usar env var REACT_APP_API_BASE o fallback a fly.dev
↓ (Si no)
5. ¿Estoy en localhost?
→ http://localhost:8000
```
## 🚀 Para tu Hackathon
### ✅ Opción 1: Hugging Face Spaces (SIN CONFIG)
```
1. Creas 2 spaces: andesai-frontend, andesai-backend
2. Subes Dockerfiles
3. Agargas variables de entorno en backend
4. ¡LISTO! Frontend auto-detecta backend
5. URLs finales compartidas con jurado
```
**NO NECESITAS configurar URLs manualmente.**
### ⚙️ Opción 2: GitHub + Fly.io (CON CONFIG)
```
1. Deploy backend a Fly.io → https://andesai-backend.fly.dev
2. Configuras .env.production:
NEXT_PUBLIC_API_BASE=https://andesai-backend.fly.dev
3. Deploy frontend a GitHub Pages
4. ¡LISTO!
```
**NECESITAS configurar la URL del backend.**
## 📝 Archivos de Configuración
```
frontend/
├── .env.local ← DEV: http://localhost:8000
├── .env.production ← PROD: vacío (auto-detect) o URL explícita
├── .env.huggingface ← HF: vacío (auto-detect)
└── lib/api.ts ← Contiene la lógica de auto-detect
```
## 🎯 Mi Recomendación para Hackathon
**Usa Hugging Face Spaces:**
1. Menos configuración
2. Todo funciona automáticamente
3. Muy fácil de compartir
4. URL profesional
5. Free tier generoso
**Pasos:**
```bash
1. git push al repo (tu GitHub)
2. Creas 2 Spaces en HF
3. Conectas repo → HF Space (webhook)
4. Ambos deployan automáticamente
5. ¡Listo! Funciona sin tocar nada
```
## 🔗 Resultado Final
```
GitHub Repo
└── Conectado a HF via Webhooks
├── andesai-frontend space → https://user-andesai-frontend.hf.space
└── andesai-backend space → https://user-andesai-backend.hf.space
Frontend auto-detecta:
"Estoy en huggingface.co" → Conecta a backend en HF ✨
```
---
## ⚡ TL;DR
**Lo que cambié:**
- ❌ Antes: hardcoded `localhost:8000`
- ✅ Ahora: auto-detecta según plataforma
**Para ti:**
- ✅ Local: No cambies nada, usa `http://localhost:8000`
- ✅ HF Spaces: No configures nada, funciona automático
- ✅ Otra plataforma: Configura NEXT_PUBLIC_API_BASE si es necesario
**No te afecta la hackathon**, solo **mejora** la portabilidad.
|