Loading...
Loading...
Expert guide for Electron development with Electron Vite and Electron Builder. Use when developing Electron applications, working with main/renderer processes, IPC communication, preload scripts, security configuration, native module handling, or build/distribution setup.
npx skill4agent add pedronauck/skills electron-devreferences/patterns.mdcontextIsolationsandboxnodeIntegrationapp.isReady()window.destroyedapp.on('before-quit')import { contextBridge, ipcRenderer } from "electron";
contextBridge.exposeInMainWorld("electronAPI", {
invoke: (channel: string, args?: unknown) => {
const validChannels = ["db:query", "file:save", "app:close"];
if (validChannels.includes(channel)) {
return ipcRenderer.invoke(channel, args);
}
throw new Error(`Invalid IPC channel: ${channel}`);
},
});webPreferenceswebPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true, // REQUIRED
enableRemoteModule: false, // REQUIRED
sandbox: true, // REQUIRED
nodeIntegration: false, // REQUIRED
webSecurity: true,
}ipcMain.handle("db:insert", async (event, data: unknown) => {
if (!isValidInsertData(data)) {
throw new Error("Invalid data");
}
return db.insert(data);
});import { defineConfig } from "electron-vite";
export default defineConfig({
main: {
build: {
outDir: "dist/main",
rollupOptions: {
external: ["better-sqlite3", "native-module-name"],
},
},
},
preload: {
build: { outDir: "dist/preload" },
},
renderer: {
build: {
outDir: "dist/renderer",
rollupOptions: {
output: {
manualChunks: {
vendor: ["react", "react-dom"],
},
},
},
},
},
});better-sqlite3extraResources@electron/rebuild// Exposing entire Node.js API
contextBridge.exposeInMainWorld("require", require);
// Not validating IPC messages
ipcMain.handle("dangerous", (event, data) => {
fs.writeFileSync(data.path, data.content);
});
// Using __dirname in renderer
const imagePath = `${__dirname}/images/logo.png`;// Whitelist specific channels
contextBridge.exposeInMainWorld("electronAPI", {
invoke: (channel: string, args: unknown) => {
if (!["safe:channel"].includes(channel)) throw new Error("Invalid");
return ipcRenderer.invoke(channel, args);
},
});
// Validate all arguments
ipcMain.handle("file:write", async (event, { path, content }) => {
if (typeof path !== "string" || typeof content !== "string") {
throw new TypeError("Invalid arguments");
}
// Safe to use
});contextIsolationsandboxnodeIntegrationpnpm run typecheckpnpm run test| Issue | Solution |
|---|---|
| White screen in production | Check asset paths use |
| Native module fails | Exclude from rollup, include in extraResources |
| IPC not working | Verify preload path, contextIsolation enabled, channel whitelisted |
| HMR not working | Run with |
references/patterns.md