Cómo crear un instalador de MSI en Windows para una aplicación de Electron Framework

La forma más común de crear un instalador de Windows para una aplicación basada en Electron es a través del módulo de instalador de Windows, que no requiere privilegios de administrador y viene con un actualizador automático. Sin embargo, si necesita crear un MSI tradicional de la forma en que Microsoft pretendía instalar el software, este módulo es su amigo. Crea un MSI independiente que instala su aplicación en Archivos de programa o en cualquier directorio definido por el usuario, al igual que los instaladores de Office, Node.js u otras aplicaciones populares. Permite subir y bajar calificaciones.

En este artículo, le explicaremos cómo crear la versión de Windows de un instalador para su aplicación Electron Framework fácilmente usando el paquete Electron WiX MSI.

1. Empaquete (construya) su aplicación de Electron

Como primer paso, debe tener un proyecto electrónico que esté listo para empaquetarse. Puede crear la versión de lanzamiento de su aplicación Electron utilizando el módulo Electron Packager. Electron Packager es una herramienta de línea de comandos y una biblioteca Node.js que agrupa el código fuente de la aplicación basada en Electron con un archivo ejecutable y de soporte de Electron renombrado en carpetas listas para su distribución.

Para generar esta versión de su aplicación, instale el módulo Electron Packager en su computadora globalmente con:

npm install electron-packager -g

Puede encontrar un tutorial más detallado sobre cómo empaquetar una aplicación electrónica desde cero aquí . En nuestro caso, empaquetaremos rápidamente nuestra aplicación con el siguiente comando:

electron-packager . --platform=win32 --arch=x64 OurCodeWorld

Esto creará la versión distribuible de su aplicación, creando un directorio completo con el contenido que necesita para ejecutar:

Electron Application Content

Este será el directorio que empaquetaremos en el archivo MSI en este tutorial.

2. Instale el conjunto de herramientas WiX

Para crear los instaladores, usaremos herramientas nativas. Este módulo se basa en las herramientas de construcción de WiX Toolset que incluyen todo lo que necesita para crear instalaciones en sus máquinas de desarrollo y construcción. Puede descargar la última versión de la página de lanzamientos del proyecto en el repositorio de Github aquí . En esta página encontrarás una opción para descargar:

  • wix311.exe es el instalador de las herramientas de compilación de WiX Toolset.
  • wix311exe.zip contiene el instalador wix311.exe dentro de un archivo .zip, útil si su departamento de TI impide la descarga directa de archivos .exe.
  • wix311-binaries.zip contiene los archivos que componen el conjunto de herramientas de WiX y es útil si no desea instalar el conjunto de herramientas, por ejemplo, si solo está comprobando WiX en el control de fuente.
  • wix311-debug.zip contiene una copia de referencia del código fuente de WiX y archivos de símbolos (.pdb), los cuales son útiles para depurar problemas con WiX.

De nuestro interés es la primera opción, el instalador para el conjunto de herramientas de WiX, un ejecutable que se ve así:

Wix Install

Haga clic en instalar y espere hasta que finalice la instalación, cuando haya terminado, encontrará los archivos de la instalación en  C:\Program Files (x86)\WiX Toolset v3.11\. Después de instalar WiX, deberá exponer la ruta de los binarios del conjunto de herramientas de WiX a la variable de entorno PATH de Windows. Esto se puede hacer fácilmente, buscando variables de entorno en el menú de inicio de Windows:

Environment Variables Windows

Luego haga clic en Variables de entorno:

System Properties Environment Variables

En la nueva ventana, busque las variables del sistema y busque la variable Path, selecciónela y edítela:

WiX Environment Variable Windows

Una vez que la ruta de los binarios del conjunto de herramientas de WiX se haya expuesto en la Ruta, podrá ejecutar los ejecutables de Candle and Light desde la CLI (y también el módulo electron-wix-msi).

3. Configure el script de compilación

Después de instalar el conjunto de herramientas de WiX, podrá utilizar el módulo Electron Wix para crear el instalador. La lógica a implementar con este módulo es la siguiente, necesitarás crear un script que generará el instalador. Puede hacer esto realmente dentro del proyecto, así que instale el módulo con NPM usando el siguiente comando:

npm install electron-wix-msi --save-dev

Para obtener más información sobre este paquete, visite el repositorio oficial en Github . Una vez que el módulo está instalado en su proyecto, puede continuar con la creación del script que construirá el archivo MSI con su proyecto.

Cree un script build_installer.jsen el directorio raíz de su proyecto electrónico y agregue el siguiente contenido dentro:

// ./build_installer.js

// 1. Importar módulos
const { MSICreator } = require('electron-wix-msi');
const path = require('path');

// 2. Definir directorio de entrada y salida.
// Importante: los directorios deben ser absolutos, no relativos, p. Ej.
// appDirectory: "C:\\Users\sdkca\Desktop\OurCodeWorld-win32-x64", 
const APP_DIR = path.resolve(__dirname, './OurCodeWorld-win32-x64');
// outputDirectory: "C:\\Users\sdkca\Desktop\windows_installer", 
const OUT_DIR = path.resolve(__dirname, './windows_installer');

// 3. Instancia de MSICreator
const msiCreator = new MSICreator({
    appDirectory: APP_DIR,
    outputDirectory: OUT_DIR,

    // Configurar metadatos
    description: 'Esta es una aplicación de demostración',
    exe: 'OurCodeWorld',
    name: 'Our Code World Desktop App',
    manufacturer: 'Our Code World Inc',
    version: '1.0.0',

    // Configurar la interfaz de usuario del instalador
    ui: {
        chooseDirectory: true
    },
});

// 4. Cree un archivo de plantilla .wxs
msiCreator.create().then(function(){

    // Paso 5: compile la plantilla en un archivo .msi
    msiCreator.compile();
});

En este script, básicamente, para crear su primer instalador sin personalización, cambiará solo appDirectoryoutputDirectory, donde respectivamente deberá proporcionar la ruta absoluta a la versión empaquetada de electron y el directorio donde se almacenará el archivo MSI. El objeto de configuración que recibe la clase MSICreator como primer argumento puede contener las siguientes propiedades:

  • appDirectory (cadena): el directorio de origen del instalador, generalmente la salida de electron-packager . 

  • outputDirectory (cadena): el directorio de salida. Contendrá tanto los archivos terminados como los intermedios. y . msi wxs  .wixobj

  • exe (cadena): el nombre del archivo exe.

  • description (cadena): descripción de la aplicación.

  • version (cadena): la versión de la aplicación.

  • name (cadena): el nombre de la aplicación.

  • manufacturer (cadena): nombre del fabricante.

  • appUserModelId (cadena, opcional): cadena para establecer como en el acceso directo. Si no se pasa ninguno, se configurará en , que debe coincidir con la identificación que Squirrel le dio a su aplicación. appUserModelId  com.squirrel.(Name).(exe)

  • shortName (opcional, cadena): un nombre corto para la aplicación, que se usa cuando no se permiten espacios ni caracteres especiales. Utilizará el nombre si no se define.

  • shortcutFolderName (cadena, opcional): nombre de la carpeta de acceso directo en el menú Inicio de Windows. Utilizará el campo del fabricante si no se define.

  • shortcutName (cadena, opcional): nombre del acceso directo en el menú Inicio de Windows. Utilizará el campo de nombre de la aplicación si no se define.

  • programFilesFolderName (cadena, opcional): nombre de la carpeta en la que vivirá su aplicación. Utilizará el nombre de la aplicación si no se define.

  • upgradeCode (cadena, opcional): un UUID único que usa su aplicación para identificarse. Este módulo generará uno para usted, pero es importante reutilizarlo para permitir actualizaciones sin conflictos.

  • language (número, opcional): el identificador del código de idioma de Microsoft Windows que utiliza el instalador. Utilizará 1033 (inglés, Estados Unidos) si no se define.  

  • certificateFile (cadena, opcional): la ruta a un certificado de firma de código Authenticode.

  • certificatePassword (cadena, opcional): la contraseña para descifrar el certificado proporcionado en . certificateFile

  • signWithParams (cadena, opcional): parámetros a los que pasar . Anula y . signtool.exe certificateFile  certificatePassword

  • extensions (matriz, opcional): especifique las extensiones de WiX para usar, por ejemplo ['WixUtilExtension', 'C:\My WiX Extensions\FooExtension.dll']

  • ui (UIOptions, opcional): habilita la configuración de la interfaz de usuario. Vea abajo para más información.

  • arch (cadena, opcional): define la arquitectura para la que se compila el MSI. Los valores pueden ser o . El valor predeterminado es si se deja sin definir. x86  x64 x86

Configuración de la interfaz de usuario (opcional)

La propiedad en las opciones pasadas a la instancia del instalador permite una configuración más detallada de la IU. Tiene las siguientes propiedades opcionales: ui 

  • enabled (booleano, opcional): si mostrar una interfaz de usuario típica. Por defecto es . Si se establece en , Windows mostrará una interfaz mínima "Windows está configurando NAME_OF_APP". true false
  • template (cadena, opcional): sustituya su propio XML que se insertará en el archivo final antes de compilar el instalador para personalizar las opciones de la interfaz de usuario. .wxs 
  • chooseDirectory (booleano, opcional): si se establece en , el usuario final podrá elegir el directorio de instalación. Establecer como predeterminado. Sin efecto si se utiliza una costumbre . true false  template 
  • images (Opcional): sobrescribe las imágenes predeterminadas del instalador con archivos personalizados. Recomiendo JPG.
    • background - (opcional, cadena) 493 x 312 Mapa de bits de fondo utilizado en los diálogos de bienvenida y finalización. Se utilizará como . WixUIDialogBmp
    • banner - (opcional, cadena) 493 × 58 Banner superior utilizado en la mayoría de los diálogos que no se utilizan . Se utilizará como . background WixUIBannerBmp
    • exclamationIcon - (opcional, cadena) 32 x 32 Icono de exclamación en el cuadro de diálogo. Se utilizará como . WaitForCostingDlg  WixUIExclamationIco
    • infoIcon - (opcional, cadena) 32 x 32 Icono de información en los cuadros de diálogo de cancelación y error. Se utilizará como . WixUIInfoIco
    • newIcon - (opcional, cadena) 16 x 16 Icono "Nueva carpeta" para el cuadro de diálogo "Examinar". Se utilizará como . WixUINewIco
    • upIcon - (opcional, cadena) 16 x 16 icono "Arriba" para el cuadro de diálogo "examinar". Se utilizará como . WixUIUpIco

4. Creando instalador

Finalmente, solo necesita ejecutar el script que genera el archivo MSI. Ejecútelo con el nodo fácilmente con:

node build_installer.js

Esto comenzará a compilar el instalador y llevará un tiempo, siempre que tenga los ejecutables de velas y luces disponibles en el directorio PATH del símbolo del sistema de Windows. Producirá la siguiente cadena en la ventana:

Build MSI Installer for an Electron Application for Windows

El instalador, en este caso OurCodeWorld se generará en el directorio windows_installer:

Wix MSI Generated Installer MSI

Si lo ejecutas, tendrá una configuración básica que todos conocen:

WiX Setup MSI File

En nuestro caso con la configuración le permitirá al usuario cambiar el directorio de instalación:

Change Installation Directory WIX

Y eso es todo, allí tiene un instalador de Windows normal para su aplicación Electron Framework. Como consejo importante, la versión empaquetada del directorio Electron tiene aproximadamente 142 MB, pero con el instalador MSI tiene un tamaño de 60 MB.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable