Aprende a crear un instalador de Windows para una aplicación creada con Electron con winstaller.


Si desea crear en lugar de un instalador basado en Squirrel, una configuración de MSI (Microsoft Installer), siga este tutorial .

Como desarrollador, es posible que sepa que Linux tiene administradores de paquetes, por lo que los desarrolladores no "necesitan" hacer los instaladores. Los desarrolladores solo necesitan proporcionar un paquete para una distribución, cada distribución tiene una forma de instalar este paquete y de esta manera puede ser en una terminal ( apt-get) o mediante una interfaz gráfica, por ejemplo, el Centro de software de Ubuntu. Sin embargo, Windows no es Linux.

You don't say

Casi todos los instaladores son creados por una herramienta (por ejemplo , WiX , Nsis , Inno Setup y muchos otros). En este artículo, aprenderá cómo crear un instalador para Windows usando el módulo electron-winstaller que usa Squirrel, el marco de instalación y actualización para aplicaciones de escritorio de Windows.

1. Prepare su área de trabajo

Y con esto, no queremos decir que debas limpiar tu computadora. Para que este tutorial sea fácil de entender, vamos a crear una carpeta en el escritorio con el nombre electron-workspace, esta carpeta contendrá dentro de una carpeta que contiene el código fuente de su Proyecto Electron:

Source code project electron

En este caso, la carpeta se ubicará en  C:\Users\sdkca\Desktop\electron-workspace y el código fuente del proyecto electrónico estará dentro de ella ( myapp-source).

2. Instale el módulo winstaller de Electron

Ahora, necesitamos instalar el módulo que nos ayudará a crear el instalador, en este caso usaremos electron-winstaller . Este módulo de NPM crea instaladores de Windows para aplicaciones de Electron utilizando Squirrel. Inicie el símbolo del sistema de NodeJS y navegue al espacio de trabajo usando ( tenga en cuenta que el módulo debe instalarse en el espacio de trabajo, no en su proyecto ):

cd C:\Users\sdkca\Desktop\electron-workspace

Y luego instale el módulo con:

npm install electron-winstaller

Después de la instalación del módulo, nuestro espacio de trabajo tendrá ahora 2 carpetas:

Electron Source Code Folder and Node Modules

3. Administre los accesos directos del escritorio (instale, actualice y desinstale eventos)

Una aplicación que se puede instalar, pero no se puede encontrar el ejecutable para iniciarla una vez cerrada, no funciona en vano. Por lo tanto, vamos a utilizar el módulo de inicio de electrón-ardilla que lo ayudará a lograr nuestro objetivo. Maneja los comandos más comunes, como la administración de accesos directos del escritorio (evento de instalación, evento de actualización y evento de desinstalación).

Este módulo debe instalarse dentro de su proyecto, no en el espacio de trabajo , por lo tanto, navegue a la carpeta del código fuente de su proyecto Electron con el símbolo del sistema NodeJS, en este caso vamos a usar:

cd C:\Users\sdkca\Desktop\electron-workspace\myapp-source

Y luego instale el módulo usando:

npm install electron-squirrel-startup

Después de la instalación del módulo, necesitamos instruir con algún código lo que vamos a hacer. Vamos a agregar algún código, específicamente en el archivo main.js de su Proyecto Electron. Al comienzo de su archivo (después de la declaración de la variable de la aplicación) agregue las siguientes líneas:

// Módulo para controlar la vida de la aplicación. (esta variable ya debería existir)
const app = electron.app

// esto debe colocarse en la parte superior de main.js para manejar los eventos de configuración rápidamente
if (handleSquirrelEvent(app)) {
    // evento de squirrel manejado y la aplicación se cerrará en 1000 ms, así que no hagas nada más
    return;
}

La función handleSquirrelEvent espera como primer argumento la variable de la aplicación, esta función se puede agregar al final de su archivo main.js:

Nota

El siguiente código solo se ejecutará si la aplicación está dentro de un instalador, por lo que este código no se ejecutará mientras trabaja en su proyecto.

function handleSquirrelEvent(application) {
    if (process.argv.length === 1) {
        return false;
    }

    const ChildProcess = require('child_process');
    const path = require('path');

    const appFolder = path.resolve(process.execPath, '..');
    const rootAtomFolder = path.resolve(appFolder, '..');
    const updateDotExe = path.resolve(path.join(rootAtomFolder, 'Update.exe'));
    const exeName = path.basename(process.execPath);

    const spawn = function(command, args) {
        let spawnedProcess, error;

        try {
            spawnedProcess = ChildProcess.spawn(command, args, {
                detached: true
            });
        } catch (error) {}

        return spawnedProcess;
    };

    const spawnUpdate = function(args) {
        return spawn(updateDotExe, args);
    };

    const squirrelEvent = process.argv[1];
    switch (squirrelEvent) {
        case '--squirrel-install':
        case '--squirrel-updated':
            // Opcionalmente, haga cosas como:
            // - Agregue su .exe a la RUTA
            // - Escriba en el registro para cosas como asociaciones de archivos y
            //   menús contextuales del explorador

            // Instalar accesos directos del menú de inicio y del escritorio
            spawnUpdate(['--createShortcut', exeName]);

            setTimeout(application.quit, 1000);
            return true;

        case '--squirrel-uninstall':
            // Deshace todo lo que hiciste en el --squirrel-install y
            // --squirrel-updated handlers

            // Eliminar los accesos directos del escritorio y del menú de inicio
            spawnUpdate(['--removeShortcut', exeName]);

            setTimeout(application.quit, 1000);
            return true;

        case '--squirrel-obsolete':
             // Esto se llama en la versión saliente de su aplicación antes
             // Actualizamos a la nueva versión - es lo contrario de
             // --update squirrel

            application.quit();
            return true;
    }
};

El código anterior debe manejar las cosas básicas que suceden cuando se instala una nueva aplicación en su sistema, por ejemplo, el acceso directo se agregará al menú Inicio y al escritorio y eliminará el acceso directo cuando se ejecute el desinstalador, además debería funcionar sin ninguna modificación. . No dude en agregar más código si lo necesita.

4. Cree su aplicación

Se realizaron las modificaciones necesarias para realizar las tareas básicas de una aplicación instalada, ahora proceda a construir su aplicación. Suponemos que sabe cómo crear su aplicación utilizando herramientas como electron-packager . Si no lo hace, lea el siguiente artículo sobre cómo crear una distribución desde su aplicación utilizando electron Packager en Windows .

Después de saber cómo construir su aplicación, proceda a hacerlo. Navegue al espacio de trabajo (para construir el proyecto dentro de él):

cd C:\Users\sdkca\Desktop\electron-workspace\myapp-source

Y construimos el proyecto, por ejemplo, vamos a construir nuestro proyecto usando el siguiente comando:

electron-packager C:\Users\sdkca\Desktop\electron-workspace\myapp-source --platform=win32 --arch=x64 myapp-source-built

Eso creará la carpeta myapp-source-built-win32-x64 dentro de la carpeta  electron-workspace que tiene la siguiente estructura:

Electron Built Project Structure

5. Cree un instalador desde su aplicación

Una vez que se haya creado su proyecto, puede crear un instalador a partir de él. Crea una carpeta donde se crearán los instaladores , específicamente en nuestro espacio de trabajo ( C:\Users\sdkca\Desktop\electron-workspace) con el nombre que quieras, en este caso será myapp-source-built-installers. No tocará esta carpeta ya que los instaladores se crearán en el siguiente paso automáticamente. En este paso, debe tener 4 carpetas ( myapp-source-built-installers está vacío):

Electron Workspace Folders

Ahora cree un script que creará nuestros instaladores, cree el build.jsarchivo en nuestro espacio de trabajo de electron (C:\Users\sdkca\Desktop\electron-workspace) con el siguiente código dentro:

Nota

Si no se siente cómodo trabajando con rutas relativas, puede utilizar rutas absolutas en su primer intento para saber qué está sucediendo.

// C:\Users\sdkca\Desktop\electron-workspace\build.js
var electronInstaller = require('electron-winstaller');

// En este caso, podemos usar rutas relativas
var settings = {
    // Especifique la carpeta donde se encuentra la aplicación construida
    appDirectory: './myapp-source-built-win32-x64',
    // Especifique la carpeta existente donde
    outputDirectory: './myapp-source-built-installers',
    // El nombre del autor de la aplicación (el nombre de su empresa)
    authors: 'Our Code World Inc.',
    // El nombre del ejecutable de tu ejecutable
    exe: './myapp-source-built.exe'
};

resultPromise = electronInstaller.createWindowsInstaller(settings);
 
resultPromise.then(() => {
    console.log("¡Los instaladores de su aplicación se crearon con éxito!");
}, (e) => {
    console.log(`Bueno, a veces no tienes tanta suerte: ${e.message}`)
});

Nota

Puede cambiar el icono y otras propiedades en la configuración del script anterior. Consulta todas las opciones admitidas aquí .

Para crear un instalador desde su aplicación, solo necesita ejecutar este script. Sin embargo, en caso de que encuentre este error:

El valor del atributo Component / @ Id, 'your-app-exe-name.exe', no es un identificador legal. Los identificadores pueden contener caracteres ASCII AZ, az, dígitos, guiones bajos (_) o puntos (.). Cada identificador debe comenzar con una letra o un guión bajo.

Es necesario editar la propiedad del nombre de su proyecto en el /your-built-project/resources/app/package.jsonarchivo y eliminar o reemplazar todo el guión ( -símbolo), por ejemplo, si se package.jsonve como:

{
  "name": "electron-quick-start"
}

Cámbielo a:

{
  "name": "electron_quick_start"
}

Si ya verificó esto, proceda a ejecutar el build.jsscript navegando al espacio de trabajo con el símbolo del sistema de NodeJS:

cd C:\Users\sdkca\Desktop\electron-workspace

Y ejecuta el script:

node build.js

Se crearán los archivos del instalador y tardará un poco. Una vez que se crean los instaladores, verá el siguiente mensaje en la consola:

Installers Succesfully Created Electron App

Finalmente, abra la carpeta de instaladores (en este caso ubicada en C:\Users\sdkca\Desktop\electron-workspace\myapp-source-built-installers) y encontrará allí 3 instaladores (instalador msi, instalador ejecutable y un paquete nuGET):

Electron App Installers

Puedes intentar instalar tu app de forma local ejecutando como administrador el Setup.exearchivo. Luego, una mini configuración instalará la aplicación en su sistema y podrá verla en el menú de inicio de Windows y como un acceso directo en el Escritorio:

Nota

La animación de carga de la configuración se puede cambiar si proporciona la ruta de un archivo gif para mostrar durante la instalación en la  loadingGifopción de su script build.js.

Electron App Desktop

Tenga en cuenta que el nombre del ejecutable, la descripción y otras propiedades se pueden cambiar en el package.jsonde su aplicación y en las opciones del módulo winstaller, para obtener más información, visite el repositorio para ver la documentación .

Notas importantes

Para desarrollo o uso interno, la creación de instaladores sin una firma está bien, pero para una aplicación de producción debe firmar su aplicación . El filtro SmartScreen de Internet Explorer bloqueará la descarga de su aplicación, y muchos proveedores de antivirus considerarán su aplicación como malware a menos que obtenga un certificado válido.

Cualquier certificado válido para "Firma de código Authenticode" funcionará aquí, pero si obtiene el tipo correcto de certificado de código, también puede optar por el Informe de errores de Windows . Esta página de MSDN tiene los enlaces más recientes sobre dónde obtener un certificado compatible con WER. El certificado "Standard Code Signing" es suficiente para este propósito.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores