Skip to content

README_ES.md

Latest commit

 

History

History
282 lines (200 loc) · 8.16 KB

README_ES.md

File metadata and controls

282 lines (200 loc) · 8.16 KB
Raw

Plantilla Electron + Next.js + Vite + HeroUI + Tailwind CSS

Una plantilla de aplicación de escritorio moderna y lista para producción que combina las mejores tecnologías web. Construye aplicaciones de escritorio multiplataforma con la experiencia de desarrollo web.

Electron React Next.js TypeScript Vite Tailwind CSS

Captura de pantalla de la aplicación

✨ Características

🚀 Stack Tecnológico Moderno

  • Electron 40 - Última versión estable para aplicaciones de escritorio multiplataforma
  • React 18 - Último React con características concurrentes
  • TypeScript 5 - Modo estricto habilitado para seguridad de tipos
  • Vite 6 - HMR ultrarrápido y builds de producción optimizados
  • HeroUI v2 - Biblioteca de componentes React hermosos y accesibles
  • Tailwind CSS v4 - CSS utility-first con las últimas características

🛠️ Experiencia de Desarrollo

  • Reemplazo de Módulos en Caliente (HMR) - Actualizaciones instantáneas durante el desarrollo
  • Seguridad de Tipos - Soporte completo de TypeScript con modo estricto
  • Herramientas Modernas - ESLint, Prettier configurados de fábrica
  • Alias de Rutas - Importaciones limpias con prefijo @/
  • Límites de Error - Manejo elegante de errores

🎨 UI/UX

  • Modo Oscuro - Soporte integrado para cambio de temas
  • Diseño Responsivo - Funciona en todos los tamaños de pantalla
  • Animaciones Suaves - Integración de Framer Motion
  • Accesible - Componentes compatibles con WCAG
  • Personalizable - Tematización fácil con Tailwind CSS

📦 Listo para Producción

  • Generación de Instaladores - Construye para Windows, macOS y Linux
  • Multiplataforma - Base de código única para todas las principales plataformas de escritorio

📋 Requisitos Previos

Antes de comenzar, asegúrate de cumplir con los siguientes requisitos:

  • Node.js >= 18.0.0
  • Yarn >= 1.22.0 (recomendado) o npm/pnpm
  • Git

Nota: Si necesitas construir dependencias nativas (opcional), es posible que necesites herramientas de compilación específicas de la plataforma (Visual Studio Build Tools para Windows, o Xcode Command Line Tools para macOS).

🚀 Inicio Rápido

1. Clonar el Repositorio

git clone https://github.com/LingChen-tsjmdlc/electron-vite-heroui-template.git my-electron-app
cd my-electron-app

2. Instalar Dependencias

yarn install

3. Iniciar Servidor de Desarrollo

# Ejecutar en Electron con recarga en caliente
yarn dev

# O solo vista previa en navegador
yarn dev:web

4. Compilar para Producción

# Compilar para la plataforma actual
yarn build

# Compilar para plataformas específicas
yarn build:win    # Windows
yarn build:mac    # macOS
yarn build:linux  # Linux
yarn build:all    # Todas las plataformas

📂 Estructura del Proyecto

my-electron-app/
├── electron/                 # Proceso principal de Electron
│   ├── main.ts              # Entrada del proceso principal
│   └── preload.ts           # Script de precarga para IPC
├── src/
│   ├── components/          # Componentes React reutilizables
│   ├── config/              # Archivos de configuración
│   ├── layouts/             # Diseños de página
│   ├── pages/               # Páginas de la aplicación
│   ├── styles/              # Estilos globales
│   └── types/               # Tipos TypeScript
├── docs/                    # Documentación
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js

🔧 Configuración

Personalizar la Compilación

Edita la sección build en package.json:

{
  "build": {
    "appId": "com.yourcompany.yourapp",
    "productName": "Nombre de tu App",
    "directories": {
      "output": "release"
    }
  }
}

📝 Guía de Desarrollo

Crear Nuevas Páginas

  1. Crea un nuevo archivo en src/pages/:
// src/pages/my-page.tsx
export default function MyPage() {
  return <div>Mi Nueva Página</div>;
}
  1. Agrega la ruta en src/App.tsx:
import MyPage from "./pages/my-page";

<Route path="/my-page" element={<MyPage />} />

Estilizar con Tailwind CSS

Usa clases de utilidad de Tailwind directamente:

<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-primary-500 to-secondary-500">
  <h1 className="text-4xl font-bold text-white">Hola Mundo</h1>
</div>

Usar Componentes HeroUI

import { Button, Card, CardBody } from "@heroui/react";

<Card>
  <CardBody>
    <Button color="primary" size="lg">
      Haz Clic
    </Button>
  </CardBody>
</Card>;

⚠️ Importante: Uso de Link

Al usar enlaces en esta plantilla, debes distinguir entre navegación interna y enlaces externos:

Para navegación interna (React Router):

import { Link } from "react-router-dom";

// ✅ Correcto - Sin actualización de página
<Link to="/docs">Documentación</Link>
<Link to="/about">Acerca de</Link>

Para sitios web externos:

import { Link } from "@heroui/link";

// ✅ Correcto - Se abre en el navegador
<Link href="https://github.com" isExternal>GitHub</Link>

❌ Error Común:

import { Link } from "@heroui/link";

// ¡Incorrecto! Esto causa actualización de página y rompe el enrutamiento
<Link href="/docs">Documentación</Link>

🔐 Comunicación IPC

Del Renderizador al Principal

Script de Precarga (electron/preload.ts):

contextBridge.exposeInMainWorld("electronAPI", {
  sendMessage: (channel: string, data: any) => {
    ipcRenderer.send(channel, data);
  },
  onMessage: (channel: string, callback: Function) => {
    ipcRenderer.on(channel, (event, ...args) => callback(...args));
  },
});

Uso en React:

window.electronAPI.sendMessage("custom-event", { data: "value" });

🐛 Solución de Problemas

Problemas Comunes

¿Pantalla en blanco después de la compilación?

  • Asegúrate de usar HashRouter para Electron (ya configurado)
  • Verifica que todos los activos estén incluidos en la matriz files de package.json

¿La recarga en caliente no funciona?

  • Asegúrate de ejecutar yarn dev y no yarn build
  • Verifica que HMR esté habilitado en vite.config.ts

🤝 Contribuir

¡Las contribuciones son bienvenidas! Siéntete libre de enviar un Pull Request.

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.

🙏 Agradecimientos

  • Electron - Framework multiplataforma
  • HeroUI - Biblioteca de componentes hermosos
  • Vite - Herramienta de compilación ultrarrápida
  • Tailwind CSS - CSS utility-first
  • React - Biblioteca UI

📞 Soporte

Si encontraste útil esta plantilla, ¡considera darle una ⭐ en GitHub!

Para preguntas o problemas:

Construido con ❤️ usando Electron, React, Vite y HeroUI