Generar una aplicación para producción en Electron.js

vamos a aprender a generar una aplicación a producción lista para usar mediante un ejecutable; para ello, usaremos el siguiente paquete:

https://www.electron.build/

Es importante notar que, este paquete, debes de instalarlo en cada proyecto de Electron.js cuando te interese generar los ejecutables de las aplicaciones, ya que, no es una dependencia que se instala a nivel global si no a nivel local.

Vamos a instalar el paquete en el proyecto de chat que generamos en el capítulo anterior:

$ npm install electron-builder -D

Una vez instalado, configuramos los siguientes comandos para MacOS:

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "start": "DEBUG=true electron .",
  "dev:macos": "electron-builder --macos --dir",
  "pro:macos": "electron-builder --macos"
},

Para Linux:

package.json

"scripts": {
  ***
  "dev:linux": "electron-builder --linux --dir",
  "pro:linux": "electron-builder --linux"
},

Y para Windows:

package.json

"scripts": {
  ***
  "dev:windows": "electron-builder --win --dir",
  "pro:windows": "electron-builder --win"
},

Luego es posible ejecutar cualquiera de los comandos según tu sistema operativo; por ejemplo:

$ npm run dev:macos

Para solamente generar la carpeta del paquete sin realmente empaquetarlo; esto es útil para fines de prueba

$ npm run pro:macos

Para empaquetar en un formato distribuible (por ejemplo, dmg, windows installer, deb package).

Al ejecutar el comando anterior, tendremos generado el proyecto como ejecutable:

<proyect>/dist

Y unos archivos como los siguientes:

Al ejecutar el ejecutable, que en el caso de MacOS sería el DMG, en el caso de Windows, sería el EXE y en el caso de Linux, depende del sabor que estés usando, veremos la aplicación:

Otro detalle muy importante es que, dependiendo del proyecto que estés llevando a cabo, tengas que realizar modificaciones adicionales ya que, el espacio de trabajo es distinto; sobre todo con la integración con archivos externos cuyo directorio especificado al momento de desarrollar la aplicación no corresponde con la usada en producción, a lo largo del libro, veremos algunos ejemplos.

Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy