Programando con Node-Webkit. 2: build

nodewebkitEn el artículo anterior sobre node-webkit nos habíamos quedado con una aplicación de prueba sin más contenido que una cadena de texto, pero que ya podíamos ejecutar a través de nw y ver que efectivamente la cosa funcionaba.

Bien, pongamos que ya le hemos echado unas horas a nuestro programa y queremos distribuirlo a más gente… lo de decirles que se descarguen el node-webkit y usen “nw ./” desde la carpeta no es muy atractivo, mucho mejor si les damos un ejecutable sobre el que sólo necesitan hacer click para arrancarlo, verdad?

Para ayudarnos con esto está Grunt.

Lo que queremos conseguir:

  • Obtener ejecutables para las plataformas que queramos lanzando un único comando.

Lo que necesitamos:

  • Grunt-cli
  • Grunt-node-webkit

Instalando grunt-cli

Usaremos npm para instalar grunt-cli de forma global, de manera que esté disponible desde cualquier ruta:

sudo npm install -g grunt-cli

Usando grunt-node-webkit

Lo que haremos con Grunt para crear el ejecutable de nuestro proyecto se parece mucho a crear un proyecto dentro de otro proyecto.

Me explico: vamos a crear una nueva carpeta donde pondremos entre otras cosas también un package.json en la carpeta raíz, y este package.json contendrá los datos de la aplicación Grunt que hará el “build” de nuestro proyecto.

Dentro de la carpeta de la aplicación Grunt tendremos otra carpeta llamada “src” donde meteremos todos los archivos de nuestra aplicación.

Si recordáis el ejemplo del artículo anterior, teníamos una aplicación de prueba con esta estructura de carpetas dentro de ~/code/node-webkit/testproject:

 html
 css
 images
 fonts
 js
 node_modules

Vamos a crear en ~/code/node-webkit/ una nueva carpeta llamada “testproject_build”, con este contenido:

dist
src
 Gruntfile.js
 package.json

Dentro de la carpeta “src” copiamos todo el contenido de la carpeta ~/code/node-webkit/testproject donde habíamos creado nuestro proyecto. Nos quedaría algo como esto:

dist
src
 html
 css
 images
 fonts
 js
 node_modules
 package.json
 Gruntfile.js
 package.json

Abrimos el nuevo package.json en la raíz de esta nueva carpeta testproject_build que hemos creado, y ponemos lo siguiente:

{
"name": "testproject-build",
"version": "0.0.1",
"description": "Building testproject",
"author": "Alguien <[email protected]>",
"private": true,
"dependencies": {
"grunt": "~0.4.2",
"grunt-node-webkit-builder": "~0.1.14"
}
}

Como veis se parece mucho al package.json que habíamos creado para nuestro programa. Aquí estamos indicando que depende de “grunt” y “grunt-node-webkit-builder”, lo que como veremos después nos permitirá instalar estos paquetes automáticamente con npm.

Abrimos el Gruntfile.js y ponemos esto:

[code language=”javascript”]module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘src/package.json’),
nodewebkit: {
options: {
build_dir: ‘./dist’,
// specifiy what to build
mac: false,
win: true,
linux32: true,
linux64: true
},
src: ‘./src/**/*’
},
});

grunt.loadNpmTasks(‘grunt-node-webkit-builder’);

grunt.registerTask(‘default’, [‘nodewebkit’]);
};[/code]

En este archivo estamos indicando entre otras cosas dónde está la fuente de nuestro programa (directorio “src”), dónde queremos que nos deje los builds (directorio “dist”) y para qué plataformas queremos que nos haga el build.

Podemos poner a “true” una, varias o todas las plataformas que aparecen debajo de la línea “specify what to build”.

Haciendo el build

Nos vamos a la carpeta de nuestro proyecto Grunt:

cd ~/code/node-webkit/testproject_build/

Instalamos las dependencias (en este caso grunt y grunt-node-webkit-builder):

npm install

Lanzamos el build:

grunt

Esperamos… porque tardará un buen ratillo en descargar los node-webkit para las plataformas que hayamos seleccionado, extraerlas y crear nuestros ejecutables.

Una vez terminado, tendremos las aplicaciones para las plataformas que hayamos elegido en ~code/node-webkit/testproject_build/dist/releases/testproject

El contenido de cada una de estas carpetas podemos cogerlo y empaquetarlo de la forma que más nos guste para distribuirlo (zip, deb, rpm, msi…).

  • elpila

    Felicidades! excelente método para distribuír ejecutables de las aplicaciones. Tengo una duda, la aplicación empaquetada en el ejecutable no puede procesar solicitudes de contraseña por .htpasswd de apache, mientras que corriendo la aplicación sin empaquetar si lo hace. Tendrás alguna idea de si est ose resuelve por configuración o algo así?

    • Nunca he usado .htpasswd con node-webkit, pero si funciona de forma diferente después de empaquetar la aplicación puede ser problema de rutas relativas/absolutas. Con rutas relativas no debería haber problema, las absolutas en cambio no estarán disponibles ya.
      Si no es por eso, también puedes echar un vistazo a los módulos de htpasswd para node que hay en npmjs.com.

  • elpila

    Hola, me tocó usar sudo a la hora de usar “npm install” y al usar el comando “grunt” me marcaba este error: “/usr/bin/env: node: No existe el archivo o el directorio” lo cual se corrige haciendo un link simbólico: “sudo ln -s /usr/bin/nodejs /usr/bin/node” aquí la fuente: http://stackoverflow.com/questions/26320901/cannot-install-nodejs-usr-bin-env-node-no-such-file-or-directory Saludos!!!

  • Marcos Ramos

    Muy bueno, excelente artículo. Mi pregunta es: ¿Esto compila el ejecutable a binario o solo lo empaqueta como si fuera un .rar? Porque estoy con un proyecto que necesita mucha seguridad y, si bien hasta me estoy enamorando de node-webkit, todavía me deja todo el código fuente expuesto. Si ésto no lo pasa a binario, ¿existe alguna otra opción?

  • Marcos Ramos

    Perdón por mi ignorancia! Ya pude empaquetar todo pero, ahora no puedo ejecutarlo. No funciona el doble Click, ni comando por consola. Cómo se puede ejecutar?

    • Para qué sistema operativo?

      Debería ejecutarse haciendo click en el binario con el nombre de tu aplicación (dentro de la ruta /dist/releases). Si es para linux comprueba en las propiedades del binario que tenga permisos de ejecución.

  • Miguelangel Molero

    Buenas, disculpa amigo no se si me salte un paso, pero me arroja un error y no me crea la aplicación ejecutable, me puedes ayudar.

    • Qué error te da?

      • Miguelangel Molero

        Buenas Amigo, no se si escribí alguna linea mal, pero no me ejecuta la aplicación si hay alguna posibilidad de que te muestre mis lineas de código y me indique que debo cambiar.