Tutorial Electron: Distribuir la aplicación con ejecutables e instaladores

En esta última ocasión, una vez hemos terminado de construir nuestra aplicación y de darle los últimos remates, más concretamente de añadirle la funcionalidad de notificaciones, como vimos en el artículo anterior, vamos a proceder a trabajar con la distribución de nuestra aplicación.

Para ello, vamos a trabajar con electron-forge, una alternativa construida por la comunidad de Electron que no es más que un CLI que, entre otras funcionalidades nos permitirá empaquetar nuestra aplicación así como crear instaladores para la misma. Durante esta parte iremos viendo como conseguir estos hechos así como unos pequeños problemas que pueden surgir durante estos procesos y cómo evitarlos.

Paso 1: Configuración de OpenChat y electron-forge

Una vez tengamos todo listo para comenzar a trabajar, como en ocasiones anteriores y como no podía ser de otra manera, instalaremos el paquete, con la peculiaridad de que esta vez lo haremos de manera global:

$ npm i -g electron-forge

Una vez lo tengamos, situados en la raíz del proyecto, moveremos los archivos de Electron(los que estén en la raíz que acaben en .js) a una carpeta. En mi caso la llamé /app. Esto nos evitará problemas a futuro con los archivos, pues el módulo no permite que estos estén en la raíz.

Con este cambio realizado usaremos la primera expresión del CLI que vamos a ver, la de importar, y situados de nuevo sobre la raíz ejecutamos el comando:

$ electron-forge import .

Si usaste Yarn o cualquier otro administrador de paquetes diferente de NPM deberás de actualizarlo a la última versión antes de importar el proyecto, de lo contrario, el proceso fallará.

Si todo sale bien deberás de ver un resultado similar al siguiente:

⬢  electron  master ⦿ electron-forge import .
✔ Checking your system
? WARNING: We will now attempt to import: "/Users/miguhruiz/MEGAsync/OpenWebinars/electron".  This will involve modifying some files, are you sur
e you want to continue? Yes
✔ Initializing Git Repository
? Do you want us to change the "main" attribute of your package.json?  If you are currently using babel and pointing to a "build" directory say y
es. No
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore
✔ Porting original babel config
NOTE: You might be able to remove your `.compilerc` file completely if you are only using the `es2016` and `react` presets


We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
Nothing much will have changed but we added the "electron-prebuilt-compile" dependency.  This is the dependency you must version bump to get newer versions of Electron.


We also tried to import any build tooling you already had but we can't get everything.  You might need to convert any CLI/gulp/grunt tasks yourself.

Also please note if you are using `preload` scripts you need to follow the steps outlined at https://github.com/electron-userland/electron-forge/wiki/Using-%27preload%27-scripts

Thanks for using "electron-forge"!!!

Esta importación traerá consigo algunos cambios en nuestro package.json:

"devDependencies": {
  "babel-plugin-transform-async-to-generator": "^6.24.1",
  "babel-preset-env": "1.2.2",
  "babel-preset-react": "^6.24.1",
  "electron-forge": "^4.2.0",
  "electron-prebuilt-compile": "1.8.2-beta.3"
},
"config": {
  "forge": {
    "make_targets": {
      "win32": [
        "squirrel"
      ],
      "darwin": [
        "zip"
      ],
      "linux": [
        "deb",
        "rpm"
      ]
    },
    "electronPackagerConfig": {
      "assar": true
    },
    "electronWinstallerConfig": {
      "name": "OpenChat"
    },
    "electronInstallerDebian": {},
    "electronInstallerRedhat": {},
    "github_repository": {
      "owner": "",
      "name": ""
    },
    "windowsStoreConfig": {
      "packageName": "",
      "name": "OpenChat"
    }
  }
}

También se crearán unos scripts, que usaremos en el siguiente paso:

"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"

Paso 2: Empaquetando OpenChat

Una vez tengamos importado el proyecto en electron-forge procederemos a usar el comando de empaquetado, usando el script que vimos en el paso anterior. Esto, sin ningún tipo de parámetro nos empaquetará nuestra aplicación para el sistema operativo y arquitectura desde el que instanciemos el comando.

$ npm run package

Esto nos devolverá nuestra aplicación empaquetada en la carpeta out/.

Podemos usar parámetros a esta instrucción para compilar para otras plataformas. Desde cualquier sistema operativo podremos compilar para el resto aunque sólo desde Darwin(osX) podremos compilar para este.

Paso 3: Creando instaladores para OpenChat

Una vez hemos probado a empaquetar nuestra aplicación podremos distribuirla como instalador. El comando make nos ayudará con esto.

¡Importante! Deberemos de configurar la manera en la que queremos que se creen los instaladores en el package.json. Por ejemplo, para Mac crea un instalador en .zip por defecto pero si añadimos la opción, podremos crear el instalador en .dmg, algo más común para los usuarios de esta plataforma.

$ electron-forge make

Como resultado, obtendremos algo similar a lo siguiente:

⬢  electron  master ⦿ npm run make

> OpenChat@1.0.0 make /Users/miguhruiz/MEGAsync/OpenWebinars/electron
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
⠏ Compiling Application[BABEL] Note: The code generator has deoptimised the styling of "/var/folders/0d/fdm867hj4xj5zpz3vg9bxp3h0000gn/T/electron-packager/darwin-x64/OpenChat-darwin-x64/Electron.app/Contents/Resources/app/build/index.js" as it exceeds the max of "500KB".
✔ Compiling Application
✔ Preparing native dependencies: 2 / 2
✔ Packaging Application
Making for the following targets:
✔ Making for target: zip - On platform: darwin - For arch: x64

Extra: ¿Debo firmar las aplicaciones que distribuyo?

Una vez comiences a distribuir tu aplicación te vas a encontrar con que ciertos sistemas operativos ponen bastante énfasis en la seguridad y que incluso, calificarán de no-segura a tu aplicación por el mero hecho de no tener un certificado de seguridad. Esto dependerá mucho del tipo de aplicación que estés llevando a cabo y lo lejos a lo que quieras llegar con ella pero si quieres trabajar con la aplicación de un cliente o simplemente te preocupas por el futuro de tu próxima idea revolucionaria con Electron debes de tener en cuenta que deberás de añadir el costo de estos certificados a los gastos. En el caso de Apple pasan por adherirte al programa de desarrolladores y en el caso de Microsoft se compra directamente el certificado, el cual puede llegar a costarte unos 500USD.

Conclusiones

Cualquier problema que tengas durante el proceso de empaquetado y creación de instaladores puedes dejarlo abajo, en el proceso toca adaptar muchas cosas y es altamente probable que todo no te funcione a la primera. Te recomiendo ejecutar los comandos que hemos visto hoy en la máquina más potente que tengas, para que pierdas el menor tiempo posible.