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:

⚠️ Don't forget to add sandbox: false to the BrowserWindow because it's required to load the preload script properly!

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:

• Executable
• CodeSandbox (simple)
• CodeSandbox (advanced)