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

Answer: 
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
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](https://discuss.atom.io/t/how-to-set-global-variable-of-main-process/24833)