README

Resumen rápido: Para usar el proyecto tienes que hacer deploy del backend en app.py usando las variables correctas necesarias para el proyecto. Para el front es únicamente index.html, y debe tener la conexión con la URL del back.

---

📦 Requisitos

• Python 3.10+ (recomendado 3.11)
• pip y (opcional) venv
• Un servidor estático simple para el front (puede ser abrir el index.html en el navegador o servir con python -m http.server)

🔐 Variables de entorno

Configura las variables necesarias para el backend. Crea un archivo .env en la raíz (o usa tu proveedor de hosting) con, por ejemplo:

# URL pública donde se servirá el backend (útil para CORS/logs)
APP_BASE_URL=https://tu-dominio-o-render

# Clave secreta / tokens (ejemplos, ajusta según tu app)
SECRET_KEY=super-secreto
API_KEY_EXTERNA=

# Config de CORS (separa por comas)
CORS_ORIGINS=https://tu-front.com,http://localhost:5500

# Puerto y host (si los usas)
HOST=0.0.0.0
PORT=8000

Importante: Las variables exactas dependen de tu app.py. Revisa las lecturas de os.environ[...] dentro del código y completa lo que corresponda.

---

🚀 Deploy del backend (app.py)

1. Crear entorno e instalar dependencias

   python -m venv .venv
   source .venv/bin/activate  # Windows: .venv\Scripts\activate
   pip install -r requirements.txt

2. Configurar variables de entorno

   • Crea .env (o configura variables en tu proveedor de hosting).

3. Correr en local para probar

   • Si es Flask:

     export FLASK_APP=app.py      # Windows: set FLASK_APP=app.py
     flask run --host=0.0.0.0 --port=8000

   • O directamente:

     python app.py

   • Producción (opcional):

     # Flask (gunicorn)
     gunicorn -w 2 -b 0.0.0.0:8000 app:app
     
     # FastAPI/Starlette (si aplica)
     # uvicorn app:app --host 0.0.0.0 --port 8000 --workers 2

4. Deploy en un hosting (ejemplos)

   • Render / Railway / Fly.io / VPS: sube el repo, define variables de entorno y comando de start.
   • Asegúrate de exponer el puerto configurado (ej.: 8000).

Recordatorio: “para usar el proyecto tienes que hacer deploy en app.py, usando las variables correctas necesarias para el proyecto”.

---

🌐 Frontend (index.html)

El front es un único archivo index.html que debe apuntar a la URL pública del backend.

1. Define la URL del back dentro del index.html (o en un config.js). Por ejemplo:

<script>
  // Cambia esto por la URL real de tu backend en producción
  const BACKEND_URL = "https://tu-backend-publico.com";

  // En desarrollo, podrías usar:
  // const BACKEND_URL = "http://localhost:8000";
</script>

2. Ejemplo de consumo (fetch):

<script>
async function ping() {
  const r = await fetch(`${BACKEND_URL}/ping`, { method: 'GET' });
  const data = await r.json();
  console.log('Ping:', data);
}

async function enviarFormulario(payload){
  const r = await fetch(`${BACKEND_URL}/api/endpoint`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  if (!r.ok) throw new Error('Error en la solicitud');
  return await r.json();
}

ping();
</script>

3. Servir el front

   • Abre index.html directamente en el navegador o

   • Sirve la carpeta con:

     python -m http.server 5500
     # Navega a: http://localhost:5500/index.html

Recordatorio: “para el front es únicamente el index, este debe tener la conexión con la URL del back”.

---

🧭 Flujo recomendado

1. Configura variables → 2. Levanta backend (app.py) → 3. Ajusta BACKEND_URL en index.html → 4. Prueba fetch desde el front.

---

🗂️ Estructura sugerida del repo

.
├─ app.py
├─ requirements.txt
├─ .env               # (no commitear)
├─ index.html         # Front mínimo
├─ static/            # (opcional) assets estáticos
└─ README.md

---

🧪 Desarrollo local

• Backend local: http://localhost:8000
• Front local: abre index.html o sirve con http.server
• Asegúrate de que BACKEND_URL apunte al backend local cuando desarrolles.

---

❗ Solución de problemas

• CORS: si el navegador bloquea la solicitud, agrega el origen del front en CORS_ORIGINS o configura CORS en app.py.
• Variables faltantes: verifica el .env y los print()/logs de inicialización.
• Ruta del backend: confirma que BACKEND_URL termina sin / para evitar dobles //.
• Puerto/host: el puerto expuesto del host debe coincidir con el que escucha tu app.

---

📄 Licencia

Elige tu licencia (MIT/Apache-2.0/GPL-3.0). Añade el archivo LICENSE si corresponde.

---

Nota final

Si necesitas que deje plantillas exactas de index.html o un app.py base (Flask o FastAPI) con CORS listo, avísame y lo sumo aquí.