Habilitar la integración con Node en Electron.js

▶

La integración de Node.js en Electron se refiere a la capacidad de acceder a todas las APIs y módulos de Node.js directamente desde el proceso de renderizado (el frontend, tus archivos HTML/JS). Esto significa que puedes usar funcionalidades como require('fs') para leer y escribir archivos o importar cualquier otro módulo de Node.js desde tu página web, como si estuvieras en un entorno de backend.

Antes vimos una característica de Electron que es el Debug (devTools) de la aplicación en Chrome Electron.js

¿Por qué es importante y cuándo usarlo?

Poder usar Node.js desde la página web es una de las características más potentes de Electron. Permite realizar operaciones que un navegador web normal no podría por razones de seguridad, como:

• Acceder al sistema de archivos del usuario.
• Ejecutar scripts o procesos del sistema.
• Comunicarse directamente con bases de datos.
• Utilizar librerías nativas de Node.js.

Esta capacidad es fundamental para construir aplicaciones de escritorio complejas que van más allá de ser simples sitios web empaquetados.

Advertencia de seguridad: Habilitar la integración de Node.js (nodeIntegration: true) es una práctica que debe manejarse con cuidado. Si tu aplicación carga contenido de sitios web remotos, un script malicioso podría usar esta integración para acceder al sistema de archivos del usuario. Para aplicaciones en producción, se recomienda encarecidamente deshabilitar esta opción y usar scripts de precarga (preload) en su lugar.

Método 1: Habilitar nodeIntegration (El enfoque antiguo)

En versiones antiguas de Electron, la integración con Node.js estaba habilitada por defecto. Ahora, por seguridad, viene deshabilitada. Para habilitarla, necesitas configurar dos opciones en las webPreferences de tu BrowserWindow.

• nodeIntegration: true: Permite el uso de require, process y otras APIs de Node.js en el proceso de renderizado.
• contextIsolation: false: Elimina la separación de contextos entre el JavaScript de tu página web y el JavaScript interno de Electron. Sin esta opción, nodeIntegration no funcionará como se espera en versiones recientes.

Poder usar Node desde la página web (y con esto, poder importar y usar cualquier paquete), es fundamental para llevar a cabo varias operaciones que en resumen, como por ejemplo, la comunicación entre los procesos que veremos en el siguiente apartado; para habilitar la integración con Node, colocamos lo siguiente.

Aquí tienes un ejemplo completo en tu archivo principal (generalmente main.js o index.js):

const { app, BrowserWindow } = require('electron');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // Habilitar la integración de Node.js
            nodeIntegration: true,
            // Deshabilitar el aislamiento de contexto
            contextIsolation: false 
        }
    });

    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
    

Con esta configuración, en tu archivo index.html (o el JavaScript que cargues desde él), podrías hacer algo como esto:

// renderer.js
const fs = require('fs');
const os = require('os');

console.log(Este es el directorio home: ${os.homedir()});

// ¡Cuidado! Esto podría ser peligroso si el contenido es dinámico.
fs.writeFileSync('hola.txt', '¡Hola desde Electron!'); 
    

Método 2: Usar Scripts de Precarga (Preload) - El enfoque moderno y seguro

La forma recomendada y más segura de conectar tu frontend con las capacidades de Node.js es a través de un script de precarga (preload). Este script se ejecuta en un entorno que tiene acceso tanto al window del navegador como a las APIs de Node.js, pero mantiene los contextos aislados (contextIsolation: true).

El script de precarga actúa como un puente, exponiendo de forma selectiva y segura las funcionalidades que tu frontend necesita.

Paso 1: Configurar la BrowserWindow para usar un preload

En tu main.js, mantén contextIsolation en su valor por defecto (true) y especifica la ruta a tu script de precarga.

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // El valor por defecto es true, pero es bueno ser explícito
            contextIsolation: true, 
            // nodeIntegration se mantiene en false (valor por defecto)
            // Se especifica el script de precarga
            preload: path.join(__dirname, 'preload.js') 
        }
    });

    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

Paso 2: Crear el script preload.js

Este script expondrá una API segura al proceso de renderizado a través del objeto contextBridge.

// preload.js
const { contextBridge, ipcRenderer } = require('electron');
const fs = require('fs');

// Exponer de forma segura un método 'readFile' al proceso de renderizado
contextBridge.exposeInMainWorld('myAPI', {
    readFile: (filePath, callback) => {
        fs.readFile(filePath, 'utf-8', (err, data) => {
            callback(err, data);
        });
    },
    // También puedes exponer variables, no solo funciones
    platform: process.platform 
});

Paso 3: Usar la API expuesta en el frontend

Ahora, en el JavaScript de tu frontend, no puedes usar require, pero sí puedes acceder a la API que has expuesto en el objeto window.

// renderer.js

// myAPI fue expuesto por el preload script en window
console.log(Estamos corriendo en la plataforma: ${window.myAPI.platform});

// Llamar a la función segura para leer un archivo
window.myAPI.readFile('./package.json', (err, data) => {
    if (err) {
        console.error("Hubo un error al leer el archivo:", err);
        return;
    }
    console.log("Contenido de package.json:", data);
});

Este segundo método, aunque requiere un poco más de configuración, es mucho más seguro y es la práctica recomendada para todas las aplicaciones de Electron modernas.

El siguiente paso aprende a crear Menús multiplataforma en Electron js