Empaquetado y distribución para plataformas de escritorio
Cree instaladores para macOS, Windows y Linux con electron-builder, firma de código y actualización automática.
Empaquetado y distribución para plataformas de escritorio es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
Configuración de electron-builder
electron-builder es la herramienta estándar para empaquetar aplicaciones Electron en instaladores distribuibles. Su configuración se encuentra en package.json, bajo la clave "build", donde se especifican los metadatos de la aplicación (appId, productName), las rutas de los iconos y los formatos de destino específicos de cada plataforma.
Destinos de compilación por plataforma
electron-builder es compatible con macOS (dmg y zip), Windows (instalador nsis) y Linux (AppImage y deb). Puede dirigirse a varias plataformas con un solo comando de compilación o configurar CI para compilar cada plataforma en su propio runner nativo y obtener la mejor compatibilidad.
Firma de código para macOS
macOS requiere firmar el código con un certificado de Apple Developer para que Gatekeeper permita a los usuarios abrir la aplicación sin mostrar una advertencia de seguridad. electron-builder lee el certificado del Keychain de macOS durante el proceso de compilación y firma automáticamente todos los binarios.
Notarización para macOS
Además de la firma de código, las versiones modernas de macOS también requieren notarización: enviar la aplicación al servicio de notarización de Apple, que busca malware y emite un ticket. electron-builder puede automatizar la notarización mediante electron-notarize, y los usuarios de macOS 10.15 o posterior no podrán abrir la aplicación sin ella.
Firma de código para Windows
Windows requiere un certificado Authenticode de una Autoridad de certificación (CA) de confianza para que SmartScreen confíe en su instalador. Sin firma, los usuarios verán la advertencia "Windows protected your PC". Los certificados de Validación extendida (EV) eliminan la advertencia de inmediato, mientras que los certificados OV estándar generan confianza con el tiempo.
Estructura de salida de la compilación
Después de una compilación correcta, electron-builder escribe los instaladores específicos de cada plataforma en el directorio dist/. Allí encontrará el DMG o zip para macOS, el .exe de NSIS para Windows y el AppImage o .deb para Linux, junto con un manifiesto de actualización automática latest.yml (o latest-mac.yml).
Iconos de la aplicación
Las aplicaciones Electron necesitan iconos en formatos específicos de cada plataforma: un PNG de 512x512 para Linux, un archivo ICNS (multirresolución) para macOS y un archivo ICO (multirresolución) para Windows. electron-builder puede generar todos los formatos a partir de un único PNG de 1024x1024 mediante la opción --icon.
Actualización automática con electron-updater
El paquete electron-updater se integra con electron-builder para proporcionar actualizaciones automáticas. Publique sus compilaciones en GitHub Releases o S3 y electron-updater podrá comprobar si hay actualizaciones al iniciar, descargar la actualización diferencial en segundo plano y solicitar al usuario que reinicie.
Comprobar actualizaciones al iniciar
Llame a autoUpdater.checkForUpdatesAndNotify() en main.js después de que la aplicación esté lista. electron-updater obtiene el manifiesto latest.yml del destino de publicación, compara las versiones y, si hay una actualización disponible, la descarga y muestra una notificación nativa cuando está lista para instalarse.
El archivo ASAR
electron-builder empaqueta los archivos JavaScript de su aplicación en un único archivo ASAR (similar a un archivo tar) para distribuirla. Esto mejora el rendimiento del inicio al reducir las búsquedas en el sistema de archivos y dificulta, aunque no imposibilita, inspeccionar directamente el código fuente.
Extraer módulos nativos del archivo ASAR
Los módulos nativos de Node.js (archivos .node) no se pueden cargar desde dentro de un archivo ASAR: deben extraerse al sistema de archivos. Configure asarUnpack en electron-builder para indicar los patrones de los módulos nativos; estos se colocarán en el directorio app.asar.unpacked junto al archivo.
Requisito de notarización de macOS
¿Por qué se requiere la notarización para distribuir aplicaciones en macOS además de la simple firma de código?
Resumen de la lección
Distribuir una aplicación Electron implica configurar los destinos de electron-builder, firmar el código tanto para macOS (con notarización) como para Windows (con Authenticode) y, opcionalmente, configurar actualizaciones automáticas con electron-updater. El archivo ASAR empaqueta la aplicación para distribuirla, mientras que los módulos nativos se extraen por separado. Un proceso sólido de CI/CD gestiona automáticamente estos pasos para cada plataforma.
Preguntas frecuentes
¿La lección «Empaquetado y distribución para plataformas de escritorio» es gratis?
Sí — el texto completo de «Empaquetado y distribución para plataformas de escritorio» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Empaquetado y distribución para plataformas de escritorio»?
Cree instaladores para macOS, Windows y Linux con electron-builder, firma de código y actualización automática. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Empaquetado y distribución para plataformas de escritorio»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Arquitectura de Electron: procesos principal y de renderizado
- Configuración de React con Electron
- Comunicación IPC entre procesos
- Empaquetado y distribución para plataformas de escritorio