How do I seperate ipcMain.on() functions in different file from main.js

Question

I'm creating an electron app with vuejs as frontend. How can I create all the ipcMain.on() functions in a separate file from the main.js. I want this for a more clean code structure.

The app has to work offline so I need to store the data in a local database. So when I create an object in the frontend, I send it with ipcMain to the electron side. Electron can then write it to the local database.

I want something like this:

main.js:

import { app, protocol, BrowserWindow } from "electron";
import {
  createProtocol,
  installVueDevtools
} from "vue-cli-plugin-electron-builder/lib";

require("./ipcListeners.js");

ipcListeners.js:

import { ipcMain } from "electron";

ipcMain.on("asynchronous-message", (event, arg) => {
  console.log(arg);
  event.reply("asynchronous-reply", "pong");
});

ipcMain.on("random-message", (event, arg) => {
  console.log(arg);
  event.reply("random-reply", "random");
});

The problem here is that only the first ipcMain.on() functions works but the second,... doesn't

If first one works correctly second one should also work, please check with your code — Sharvin K, Jun 10 '19 at 09:34

score 2 · Answer 1 · answered Feb 22 '21 at 08:38

What I did in my project is, I arranged all the IPCs in different folders according to their categories and in every file, I exported all the IPCs like the example below

products.js

module.exports = {
products: global.share.ipcMain.on('get-products', (event, key) => {
    getProducts()
        .then(products => {
            event.reply('get-products-response', products)
        })
        .catch(err => {
            console.log(err)
        })
})
}

then I created a new file which imported all the exported IPCs

index.js

const {products} = require('./api/guestIpc/products')

module.exports = {
    products
}

then finally I imported this file into the main.js file.

main.js

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

global.share = {ipcMain} #this is only for limiting the number of ipcMain calls in all the IPC files

require('./ipc/index') #require the exported index.js file

That's it, now all the external IPCs are working as if they were inside the main.js file

score 1 · Answer 2 · answered Apr 24 '20 at 12:58

i don't know this going to help any way i am going to post what i did. now your implementation worked for me but still i had problem if i am requiring 100 files now in all those requires i have to import ipcMain repeatedly so that's going to be a performances issue so what i did is created global object by inserting electon and IpcMain then it's worked perfectly

my Main.js file

    const { app, BrowserWindow } = require('electron')
const electron = require('electron');
const { ipcMain } = require('electron')
global.share= {electron,ipcMain};
function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // and load the index.html of the app.
  win.loadFile('./views/index.html')

  // Open the DevTools.
  win.webContents.openDevTools()
}


app.whenReady().then(createWindow);


// Quit when all windows are closed.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {

  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

require('./test.js');

test.js

global.share.ipcMain.on('synchronous-message', (event, arg) => {
    console.log(arg) // prints "ping"
    event.returnValue = 'pong'
  })

this is my html call

const { ipcRenderer } = require('electron')
document.querySelector('.btn').addEventListener('click', () => {
    console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"
})

Now this one worked me perfectly so no more messy and long main.js resources

score 0 · Answer 3 · answered Apr 27 '23 at 01:52

you can also do that by simply exporting a function. i am using module based typescript.

here is my dbCalls.ts

import { ipcMain } from 'electron'

export function DbCalls() {
  ipcMain.handle('setDB', (event, args) => {
    console.log("setting data in DB")
  })

  ipcMain.handle('getDB', (event, args) => {
    console.log("getting data from DB")
  })

  // more ipc calls here
}

them import them in main.ts

import { app, BrowserWindow } from 'electron'
import path from 'path'
import {dbCalls} from "./dbCalls"

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

dbCalls(); // this function set all the ipc calls in main process

How do I seperate ipcMain.on() functions in different file from main.js

3 Answers3

products.js

index.js

main.js