cesar
2a88b4a71b
- Backend migrado a estructura VPS (src/ subfolder) - Frontend con estructura Vite + React 19 + Tailwind - Configuración PostgreSQL con Pool - API service con interceptores JWT - Ambos servidores funcionando (backend:3001, frontend:5173)
111 lines
2.4 KiB
Markdown
111 lines
2.4 KiB
Markdown
# Desarrollo Local - Frontend
|
|
|
|
## 🚀 Inicio Rápido
|
|
|
|
### React + Vite
|
|
|
|
```bash
|
|
# Instalar dependencias
|
|
npm install
|
|
|
|
# Configurar variables de entorno
|
|
cp .env .env.local
|
|
nano .env.local # Ajustar API_URL a tu backend local
|
|
|
|
# Iniciar servidor de desarrollo
|
|
npm run dev
|
|
|
|
# Acceder a: http://localhost:5173
|
|
```
|
|
|
|
### Producción local
|
|
|
|
```bash
|
|
# Build para producción
|
|
npm run build
|
|
|
|
# Preview del build
|
|
npm run preview
|
|
```
|
|
|
|
## 📝 Configuración
|
|
|
|
### Variables de entorno (.env.local)
|
|
|
|
```env
|
|
# Backend local
|
|
VITE_API_URL=http://localhost:3000
|
|
|
|
# O backend en servidor
|
|
VITE_API_URL=https://api.tudominio.cl
|
|
```
|
|
|
|
## 🔧 Comandos útiles
|
|
|
|
```bash
|
|
npm install # Instalar dependencias
|
|
npm run dev # Desarrollo (hot reload)
|
|
npm run build # Build de producción
|
|
npm run preview # Preview del build
|
|
npm run lint # Linter
|
|
```
|
|
|
|
## 📦 Estructura del proyecto
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── components/ # Componentes reutilizables
|
|
│ │ ├── common/ # Componentes comunes
|
|
│ │ └── layout/ # Layout (Header, Footer)
|
|
│ ├── pages/ # Páginas (Home, About, NotFound)
|
|
│ ├── services/ # API clients (axios)
|
|
│ ├── hooks/ # Custom hooks
|
|
│ ├── utils/ # Utilidades
|
|
│ ├── assets/ # Imágenes, iconos
|
|
│ ├── App.jsx # Componente principal
|
|
│ └── main.jsx # Entry point
|
|
├── public/ # Archivos estáticos
|
|
├── index.html # HTML principal
|
|
├── package.json # Dependencias
|
|
├── vite.config.js # Configuración Vite
|
|
└── tailwind.config.js # Configuración Tailwind
|
|
```
|
|
|
|
## 🎨 Tailwind CSS
|
|
|
|
Este proyecto usa Tailwind CSS v3. Los estilos se configuran en:
|
|
|
|
- `tailwind.config.js` - Configuración principal
|
|
- `src/index.css` - Directivas de Tailwind
|
|
|
|
## 🔌 Integración con Backend
|
|
|
|
El proyecto está configurado para conectarse con:
|
|
- Express backend en `https://api.tudominio.cl`
|
|
- PHP backend en `https://api.tudominio.cl`
|
|
|
|
Para desarrollo local, ajusta `VITE_API_URL` en `.env.local`
|
|
|
|
## 📱 Responsive
|
|
|
|
El diseño es completamente responsive usando Tailwind CSS:
|
|
- Mobile first
|
|
- Breakpoints: sm, md, lg, xl, 2xl
|
|
|
|
## 🚀 Deploy
|
|
|
|
El proyecto se construye con:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Los archivos generados en `dist/` están listos para servir con:
|
|
- Nginx
|
|
- Apache
|
|
- Vercel
|
|
- Netlify
|
|
- GitHub Pages
|
|
|