Make RPC calls between the renderer and main pracess simpler by having typing. This also enables for safe and easy refactoring
npm install electron-typed-rpc
Start by defining your methods in a file. Ideally a separate file from your main processes entry point because we are going to import types from this file in the client later.
export const methods = {
foo(someData: string): string { return "hi from server. received " + someData }
}
export type MethodDefs = typeof methods
import { registerRpcServer } from 'electron-typed-rpc'
import { ipcMain } from 'electron'
import { methods } from './api'
registerRpcServer(ipcMain, methods)
The call to registerRpcServer
will setup 'handle' callbacks and
call the methods you have defined.
First create a file where you create your rpc client. The reason for doing this is so that it can be imported in various places in your application and be easily reused.
import type { MethodDefs } from './api'
import { createRpcClient } from 'electron-typed-rpc'
const { ipcRenderer } = require('electron')
export const client = createRpcClient<MethodDefs>(ipcRenderer);
Note that for require
to work, you need to add these to settings
to your webPreferences when launching the Electron window.
nodeIntegration: true,
contextIsolation: false
Now that you have created your client, you can import it anywhere in your code and invoke methods. Note that all your methods will now return a promise, even if they were not declared in the server implementation.
import { client } from './client'
client.foo().then(response => console.log(response))