Files

cesar 2a88b4a71b Initial commit: Estructura backend y frontend con estándar VPS

- 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)

2025-12-09 00:35:46 -03:00

2.4 KiB

Raw Permalink Blame History

Desarrollo Local - Frontend

🚀 Inicio Rápido

React + Vite

# 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

# Build para producción
npm run build

# Preview del build
npm run preview

📝 Configuración

Variables de entorno (.env.local)

# Backend local
VITE_API_URL=http://localhost:3000

# O backend en servidor
VITE_API_URL=https://api.tudominio.cl

🔧 Comandos útiles

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:

npm run build

Los archivos generados en dist/ están listos para servir con:

Nginx
Apache
Vercel
Netlify
GitHub Pages

2.4 KiB Raw Permalink Blame History