85 lines
2.1 KiB
Markdown
85 lines
2.1 KiB
Markdown
# 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)
|
|
```bash
|
|
python run.py
|
|
# O
|
|
uvicorn app.main:app --reload
|
|
```
|
|
|
|
Backend: http://localhost:8000
|
|
API Docs: http://localhost:8000/docs
|
|
|
|
### Frontend (Puerto 3000)
|
|
```bash
|
|
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`:
|
|
```javascript
|
|
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/*`
|
|
|