Create a interprocess

Let's build something simple that can show you some of the interprocess' power!

First, create the following folders at src:

shared/ipcs (this folder structure is optional)

Then, create a file named as index.ts in the ipcs folder with the following content:

import { createInterprocess } from 'interprocess'
 
export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } =
  createInterprocess({
    main: {
      async getPing(_, data: 'ping') {
        const message = `from renderer: ${data} on main process`
 
        console.log(message)
 
        return message
      },
    },
 
    renderer: {
      async getPong(_, data: 'pong') {
        const message = `from main: ${data} on renderer process`
 
        console.log(message)
 
        return message
      },
    },
  })

On the main process:

import { BrowserWindow, app } from 'electron'
 
import { ipcMain } from 'shared/ipcs'
 
const { handle, invoke } = ipcMain
 
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      sandbox: false, // sandbox must be false
    },
  })
 
  handle.getPing()
 
  mainWindow.webContents.on('dom-ready', () => {
    invoke.getPong(mainWindow, 'pong')
  })
})

In the preload script:

import { exposeApiToGlobalWindow } from 'shared/ipcs'
 
const { key, api } = exposeApiToGlobalWindow({
  exposeAll: true, // expose handlers, invokers and removers
})
 
declare global {
  interface Window {
    [key]: typeof api
  }
}

On the renderer process:

const { invoke, handle } = window.api
 
invoke.getPing('ping')
handle.getPong()

This is a simple way to work with interprocess, but there's a lot of more cool features you can take advantage, like overrides, code splitting, invoker's response (for renderer and main process 🎉) and more. Keep reading the docs to get the knowledge to masterize interprocess!

Also, you can take a look the following examples:

Installation Introduction