Skip to content

Build type-safe Electron inter-process communication using tRPC

License

Notifications You must be signed in to change notification settings

azamuddin/electron-trpc

This branch is 6 commits ahead of, 28 commits behind jsonnull/electron-trpc:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

33b46e2 · Jul 5, 2023
Jul 5, 2023
Jun 19, 2023
Feb 9, 2023
Jul 4, 2023
Jul 5, 2023
Jul 27, 2022
Jul 5, 2023
Jun 19, 2023
Apr 14, 2023
Jun 19, 2023
Jun 19, 2023
Jul 27, 2022
Feb 9, 2023
Jul 3, 2023
Apr 20, 2023
Jul 5, 2023
Dec 6, 2022
Apr 14, 2023
Jun 19, 2023

Repository files navigation

electron-trpc

NPM MIT

Build IPC for Electron with tRPC

  • Expose APIs from Electron's main process to one or more render processes.
  • Build fully type-safe IPC.
  • Secure alternative to opening servers on localhost.
  • Full support for queries, mutations, and subscriptions.

Installation

# Using pnpm
pnpm add electron-trpc

# Using yarn
yarn add electron-trpc

# Using npm
npm install --save electron-trpc

Basic Setup

  1. Add your tRPC router to the Electron main process using createIPCHandler:

    import { app } from 'electron';
    import { createIPCHandler } from 'electron-trpc/main';
    import { router } from './api';
    
    app.on('ready', () => {
      const win = new BrowserWindow({
        webPreferences: {
          // Replace this path with the path to your preload file (see next step)
          preload: 'path/to/preload.js',
        },
      });
    
      createIPCHandler({ router, windows: [win] });
    });
  2. Expose the IPC to the render process from the preload file:

    import { exposeElectronTRPC } from 'electron-trpc/main';
    
    process.once('loaded', async () => {
      exposeElectronTRPC();
    });

    Note: electron-trpc depends on contextIsolation being enabled, which is the default.

  3. When creating the client in the render process, use the ipcLink (instead of the HTTP or batch HTTP links):

    import { createTRPCProxyClient } from '@trpc/client';
    import { ipcLink } from 'electron-trpc/renderer';
    
    export const client = createTRPCProxyClient({
      links: [ipcLink()],
    });
  4. Now you can use the client in your render process as you normally would (e.g. using @trpc/react).

About

Build type-safe Electron inter-process communication using tRPC

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.6%
  • Other 1.4%