electron-trpc - GitLite

KO | EN

gitlite — search

#python #react #ai #typescript #go #linux #nodejs #java #kubernetes #pytorch #openai #mcp #ios #open-source

electron-trpc

(★ 401)

Build type-safe Electron inter-process communication using tRPC

File Explorer

Download Latest Version (.zip)

- config.json
- README.md
- - lint.yml
  - release.yml
  - test.yml
  - www.yml
- - CHANGELOG.md
  - index.e2e.ts
  - index.html
  - package.json
  - tsconfig.json
  - vite.config.ts
- - CHANGELOG.md
  - index.html
  - package.json
  - tsconfig.json
  - vite.config.ts
- - CHANGELOG.md
  - dts-bundle-generator.config.ts
  - package.json
  - tsconfig.json
  - vitest.config.ts
- - env.d.ts
- astro.config.mjs
- package.json
- tsconfig.json
- wrangler.toml
.envrc
.gitignore
.node_version
.npmrc
.prettierignore
.prettierrc.js
CONTRIBUTING.md
LICENSE
package.json
playwright.config.ts
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
renovate.json
shell.nix

# Installation Guide

1. Get the code

git clone https://github.com/jsonnull/electron-trpc

Downloads the entire project code from GitHub to your computer.

cd electron-trpc

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm add electron-trpc

Type this command into your terminal and run it.

yarn add electron-trpc

Type this command into your terminal and run it.

npm install --save electron-trpc

Downloads and installs the libraries listed in package.json.

<img alt="NPM" src="https://img.shields.io/npm/v/electron-trpc"/>

Type this command into your terminal and run it.

<img alt="MIT" src="https://img.shields.io/npm/l/electron-trpc"/>

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# electron-trpc

<p>
  <a href="https://www.npmjs.com/package/electron-trpc">
    <img alt="NPM" src="https://img.shields.io/npm/v/electron-trpc"/>
  </a>
  <a href="https://codecov.io/gh/jsonnull/electron-trpc"> 
  <img src="https://codecov.io/gh/jsonnull/electron-trpc/branch/main/graph/badge.svg?token=DU33O0D9LZ"/> 
  </a>
  <span>
    <img alt="MIT" src="https://img.shields.io/npm/l/electron-trpc"/>
  </span>
</p>

<p></p>

**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

```sh
# 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`:

```ts
   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](https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts):

```ts
   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):

```ts
   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`).