pedidosClientes/SEPARACION_FRONTEND_BACKEND.md

Separación Frontend/Backend

El proyecto ahora está completamente separado en frontend y backend.

Estructura

pedidosClientesAyutec/
├── app/                    # Backend FastAPI
│   ├── main.py            # API REST
│   ├── api/               # Endpoints
│   └── services/          # Lógica de negocio
│
└── frontend/              # Frontend separado
    ├── index.html         # Kanban
    ├── proveedores.html   # Vista proveedores
    ├── upload.html        # Subir albaranes
    ├── admin.html         # Panel admin
    ├── css/               # Estilos
    └── js/                # JavaScript

Ejecutar

Backend (Puerto 8000)

python run.py
# O
uvicorn app.main:app --reload

Backend: http://localhost:8000 API Docs: http://localhost:8000/docs

Frontend (Puerto 3000)

cd frontend
python -m http.server 3000

Frontend: http://localhost:3000

Configuración

Backend

• CORS configurado para permitir todas las origenes (cambiar en producción)
• API disponible en /api/*
• Media files en /media/*

Frontend

• Configurar URL de API en frontend/js/config.js:

const API_CONFIG = {
    BASE_URL: 'http://localhost:8000/api',
};

Ventajas de la Separación

1. Desarrollo Independiente: Frontend y backend pueden desarrollarse por separado
2. Despliegue Independiente: Pueden desplegarse en servidores diferentes
3. Escalabilidad: Escalar frontend y backend independientemente
4. Tecnologías Diferentes: Fácil migrar frontend a React/Vue/Angular
5. CDN: Frontend puede servirse desde CDN

Producción

Backend

• Usar Gunicorn/Uvicorn con Nginx
• Configurar CORS para dominios específicos
• Variables de entorno seguras

Frontend

• Servir con Nginx
• O usar un CDN
• Configurar proxy reverso si es necesario

Comunicación

El frontend se comunica con el backend vía API REST:

• Todas las peticiones van a http://localhost:8000/api/*
• CORS está habilitado para permitir peticiones desde el frontend
• Los archivos de media se sirven desde /media/*