Implementar Angular en App de Electron
Está claro que a partir del uso de TypeScript y de la potencia de aplicaciones producidas íntegramente con Angular dicha tecnología se encuentre en una especie de vanguardia dentro de la producción de aplicaciones webs. De la mano de Atom (los desarrolladores de GitHub) hace un tiempo que se nos permite la producción de aplicaciones de escritorio empleando la tecnología web, mediante una instancia de Chromium, paquete al que han bautizado como Electron. Aquí se presenta un claro interrogante a la masa de desarrolladores que desean aprovechar al máximo las prestaciones del desarrollo web: ¿Se pueden implementar los recursos de Angular en una App de Electron?
Puede responderse de forma sencilla: Sí, ya que, mediante Angular-CLI, es posible compilar una app de Angular para que funcione de forma local y de ahí pasarla a una app de Electron previamente generada. El problema es que la app no podrá ser modificada directamente, teniendo que recurrir a la misma enroscada y poco productiva forma de poder visualizar Angular en Electron. La siguiente solución solo requiere unos ligeros ajustes y permitirá generar un entorno de desarrollo con posibilidades de ejecutar la app en un server local, en una app de Electron y compilarla en una app de escritorio.
En principio se da por sentado que se tiene
instalada una versión estable de node.js y npm, así como también la
recomendación de trabajar sobre una distribución de Linux. A partir de
aquí es necesario instalar una app de Electron para comenzar a
desarrollar sobre ella. Opciones existen muchas, pero en este caso es
casi obligado usar un método que utilice los paquetes de Node.js,
ampliamente recomendado el electron-quickstart. Simplemente hace falta clonar el repositorio (git instalado necesario) y hacer npm install
.
Para integrar Angular haremos uso del sistema proporcionado por Angular-CLI, cuya instalación se detalla perfectamente en el propio repositorio. Se deberá instalar de forma global, y acto seguido ejecutaremos en el directorio de la app de Electron el siguiente comando: ng new ng2
.
Ahora nos queda simplemente modificar el archivo package.json
(el del root, es decir, el de Electron, no el de Angular), agregando unos scripts:
"scripts": {
"install_all": "npm install && cd ng2 && npm install && cd ..",
"start": "cd ng2 && ng build -prod -bh ./ && cd .. && electron .",
"electron": "electron .",
"serve": "cd ng2 && ng serve && cd ..",
"build": "cd ng2 && ng build -prod -bh ./ && cd .."
}
npm start
para tener el conjunto de Angular y Electron funcionando. Este script incluye, además, la posibilidad de hacer npm run serve
para ejecutarlo en un localhost y npm run build
para hacer un compilado de Angular posterior a utilizar en un paquete
compilado de Electron. Como extra, puede compartirse sin los módulos de
node e instalarlos mediante npm run install_all
(de otra forma habría que instalarlos de manera independiente).Acerca de:
Ignacio Buioli
Licenciado en Artes Multimediales. Ha desarrollado numerosos proyectos de Multimedia así como también escrito artículos y traducido textos del mencionado tema. En Moldeo Interactive es Socio y Programador; encargándose, además, de gran parte de las redes y los cursos online.