Skip to main content

Quickstart

1. Installation​

npm install @electron-ipc-bridge/core reflect-metadata
npm install -D @electron-ipc-bridge/vite-plugin

The reflect-metadata package is required for decorator metadata at runtime.

2. Configure TypeScript​

Ensure your tsconfig.json has the following options enabled to support decorators:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}
note

You must import reflect-metadata at the very top of your application entry point. See reflect-metadata on npm.

3. Configure Vite (for Type Generation)​

This is optional, but without it you lose type generation. Add the plugin to your Vite config (vite.config.ts).

vite.config.ts
import { electronIpcBridge } from "@electron-ipc-bridge/vite-plugin";

export default {
  plugins: [electronIpcBridge()],
};

4. Create a Controller​

Define a class to handle IPC messages.

src/main/maths.controller.ts
import { IpcController, IpcHandle } from "@electron-ipc-bridge/core";

@IpcController()
export class MathsController {
  @IpcHandle()
  async add(a: number, b: number): Promise<number> {
    return a + b;
  }
}

5. Register in Main Process​

src/main/index.ts
import "reflect-metadata";

import { createIpcApp } from "@electron-ipc-bridge/core";
import { MathsController } from "./maths.controller";

const app = createIpcApp({
  controllers: [MathsController],
  resolver: {
    // This may differ depending on your implementation
    resolve: (Cls) => new Cls(),
  },
});

6. Setup Preload Script​

Expose the API to the renderer.

src/preload/index.ts
import { setupPreload } from "@electron-ipc-bridge/core/preload";

setupPreload();

7. Use in Renderer​

The types are automatically generated! In your renderer process, they will look something like this:

src/renderer/ipc.types.ts
// Auto-generated by @electron-ipc-bridge/vite-plugin
// Do not edit manually

export interface IpcApi {
  maths: {
    add(a: number, b: number): Promise<number>;
  };
}
src/preload/ipc.d.ts
// Auto-generated by @electron-ipc-bridge/vite-plugin
// Do not edit manually

import type { IpcApi } from "../renderer/ipc.types";

declare global {
  interface Window {
    ipc: IpcApi;
  }
}

export {};

By default, the global declaration is generated next to your preload entry. If you customise types.global, the output path will differ.

src/renderer/App.tsx
const result = await window.ipc.maths.add(5, 10);
console.log(result); // 15

See Preload Integration for fully managed vs manual preload options.