Comenzando con angular 5 y electron

tl;dr

En este post vamos a realizar una instalación estandar de Angular 5 y vamos a conectar un contenedor de electron a esa instancia de Angular, se configurará para producción y para desarrollo, de manera que podamos mantener el live-reload del ng-cli de angular en desarrollo y utilizemos los archivos “build” de angular para producción.

Instalando todo… que no se quede nadie

Hola amigos, comencemos con la instalación de angular 5 (latest) y de electron (latest) en nuestro sistema, para esto primero vamos a comenzar con el @angular/cli que es un cliente que nos ayuda a crear de manera “rapida” y sencilla toda una configuración muy robusta para trabajar con angular, para esto vamos a utilizar “yarn” que es un manejador de paquetes como NPM, pero un poco mejorado, y de hecho se alimenta de la base de datos de paquetes de NPM para buscar e instalar paquetes.

$yarn global add @angular/cli@latest

 

Una vez instalado angular cli, vamos a crear un nuevo proyecto de angular con el cliente, para esto vamos a utilizar el comando.

$ng new :projectName: && cd :projectName:

esto creara todo lo necesario para nuestro primer proyecto de angular, e instalará todos los paquetes necesarios para correr nuestro proyecto. Una vez finalizado vamos a correr nuestro proyecto “boilerplate” con el comando.

$ng serve

Al finalizar el inicio del servidor de desarrollo de Angular, debemos ir a nuestro navegador y en la URL debemos escribir localhost:4200 esto hará que entremos al proyecto inicial de Angular, y veremos algo así :

Screen Shot 2017-12-30 at 12.02.07 AM

Perfecto nuestro proyecto de angular esta corriendo 🙂 vamos ahora por electron.

Proton, neutron… electron

Para instalar electron debemos utilizar nuevamente nuestro manejador de paquetes Yarn, y lo instalaremos de la siguiente manera.

$yarn add electron --dev

De esta manera instalamos electron y guardamos dentro de nuestro “package.json” como una dependencia de desarrollo, una vez instalado debemos crear un nuevo archivo index.js donde crearemos toda nuestra solución de electron.


const electron = require("electron")
const { app, BrowserWindow } = electron
let mainWindow

app.on("ready", () => {
    mainWindow = new BrowserWindow({});
    mainWindow.loadURL("http://localhost:4200");
})

una vez hemos hecho esto vamos a configurar yarn para correr nuestra instancia de electron, es necesario hacerlo desde los scripts que se definen dentro del archivo package.json ya que la instalación de electron se hizo de manera local en el proyecto y no de manera global (lo cual no recomiendo por cuestiones de compatibilidad si tienen varios proyectos). Así que añadiremos lo siguiente al archivo package.json que generó nuestro cli de angular :

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron ." // <= nueva linea
},

(Solo por advertir, debemos eliminar "// <= nueva linea" o el package.json no nos funcionará debido que el formato json NO permite comentarios)

perfecto, ahora para crear una instancia de electron con angular, vamos a utilizar el comando :

$yarn electron

al hacerlo veremos esto :

Screen Shot 2017-12-30 at 12.19.45 AM

Excelente, ya tenemos nuestra ventana de electron corriendo angular 2 dentro de nuestra ventana 🙂

Ahora hagamos unos cuantos cambios que nos ayudarán mas adelante en la puesta en marcha de nuestra aplicación, como ya dijimos antes, actualmente en electron estamos mostrando el servidor de desarrollo de Angular, pero en producción tendremos que servir html estatico que será construido por angular. Por esto debemos tener una ejecución de electron para desarrollo y para producción, para eso tendremos que hacer los siguientes pasos :

  • Definiremos una variable de entorno dentro de nuestro sistema operativo, en ella colocaremos una cadena de texto que diga "PRODUCTION" si estamos en producción o colocaremos "DEVELOPMENT" o una cadena vacia si estamos en desarrollo.
    • Windows :
      set NODE_ENV="PRODUCTION"
    • GNU/LINUX o OSX
      $export NODE_ENV="PRODUCTION"
  • Leeremos esta variable dentro de nuestro index.js de electron, lo recuperaremos con la linea de código
    const NODE_ENV = process.env.NODE_ENV
  • Por ultimo debemos revisar en nuestro archivo angular-cli.json (Archivo de configuración de angular-cli) donde se estará generando nuestros archivos al momento de construir nuestro proyecto para producción, para ello buscaremos la llave "outDir" dentro de nuestro archivo, en caso por defecto para la versión utilizada en este tutorial es el directorio "dist".Para evitar un error de angular que explicare brevemente es necesario modificar el archivo package.json para cambiar un poco la manera como angular construye nuestros archivos de producción, buscaremos el script de llave "build" que quedará de la siguiente manera : "ng build --base-href ."La explicación para esto lo encontramos en el index.html, en las tags de meta angular coloca una tag especial si construimos con esto, electron intentará buscar los archivos estaticos en base a un url "http:" y no "file://" como se configuró para usar con angular, para cambiar este comportamiento sin alterar el archivo index.html utilizamos la bandera --base-href con el valor punto ( . ), incluso aconsejaría copiar el par llave/valor "build" para crear uno nuevo llamado build-electron para no "alterar" la construcción de angular para Web

De esta manera queda nuestra segunda versión de nuestro archivo index.js


const electron = require("electron")
const { app, BrowserWindow } = electron
let mainWindow

const NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV.toLowerCase() : "development"
app.on("ready", () => {
    mainWindow = new BrowserWindow({});
    if(NODE_ENV == "production"){
        mainWindow.loadURL(`file://${__dirname}/dist/index.html`)
    }
    else{
        mainWindow.loadURL("http://localhost:4200");
    }
})

para hacer las pruebas debemos correr los comandos para producción y para pruebas.

En dos consolas vamos a escribir los siguientes comandos (utilizaré los comandos para LINUX/Mac) :

Construir los archivos estaticos de Angular :

$ng build --base-href .

Luego  corremos electron, si todo quedo OK debemos ver la aplicación de angular corriendo en nuestro entorno de electron.

$export NODE_ENV="PRODUCTION"
$yarn electron

De esta manera tenemos un entorno de desarrollo de Angular + Electron en el cual podemos crear nuestra aplicación, espero que sea de mucha ayuda y no duden en dejar un comentario y un like si les gusto el POST.

Estare recibiendo sugerencias para realizar mas post como estos, solo comenten que les gustaría aprender.

¡Hasta la proxima!