← Volver

Crear aplicación Electron

Publicado el 5 de diciembre de 2025

Electron

Crear proyecto

npm create electron-app@latest mi-app2
npm install --save-dev electronmon

Añadir el auto-reload

"start": "electronmon ."

preload.js

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
    sumar: async (a, b) => {
    const resultado = await ipcRenderer.invoke('sumar', a, b);
    return resultado;
    },
    crearCarpeta: async (ruta) => {
    return await ipcRenderer.invoke('crear-carpeta', ruta);
  }
});

renderer.js

const boton1 = document.querySelector("#boton1");
const boton2 = document.querySelector("#boton2");

boton1.addEventListener("click", async(e)=> {
    alert("Botón 1");
   const ruta = './miNuevaCarpeta';
  const res = await window.api.crearCarpeta(ruta);
  console.log(res.mensaje);
});

boton2.addEventListener("click", async (e)=> {
    alert("Botón 2");
    const resultado = await window.api.sumar(5, 7);
    console.log(resultado); 
});

index.js

ipcMain.handle('sumar', (event, a, b) => {
  return a+b;
});

ipcMain.handle('crear-carpeta', (event, ruta) => {
  return crearCarpeta(ruta);
});