electron-vite

https://electron-vite.org/guide
Admin
A build tool that provides a faster and leaner development experience for Electron with instant HMR,...
Tokens:11,682
Snippets:148
Trust Score:7.1
Update:3 months ago
Show doc for...
Tokens:
Raw
### Installing Electron for Specific Architectures

Source: https://electron-vite.org/guide/source-code-protection

Command to install Electron binaries for a target architecture using the --arch flag.

```shell
npm install --arch=ia32 electron
```

--------------------------------

### Install electron-vite

Source: https://electron-vite.org/guide

Install the package as a development dependency.

```bash
npm i electron-vite -D
```

--------------------------------

### Define custom project structure

Source: https://electron-vite.org/guide/dev

Example of a non-standard project directory layout.

```text
.
├──electron
│  ├──main
│  │  ├──index.ts
│  │  └──...
│  └──preload
│     ├──index.ts
│     └──...
├──src   # with vue, react, etc.
├──index.html
├──electron.vite.config.ts
├──package.json
└──...
```

--------------------------------

### Configuring Protected Strings

Source: https://electron-vite.org/guide/source-code-protection

Example configuration for defining sensitive strings to be protected within the electron-vite build process.

```typescript
import { defineConfig } from 'electron-vite'

const protectedStrings = [
  'foo',
  `-----BEGIN CERTIFICATE-----
MIIDkTCCAnmgAwIBAgIUQt726ICGVvNVXHfzwCSwCR4
BQAwcDELMAkGA1UEBhMCQ04xDzANBgNVBAgMBll1bm5.......`
]

export default defineConfig({
  main: {
    build: {
      bytecode: { protectedStrings }
    }
  },
  // ...
})
```

--------------------------------

### Enable Decorator Metadata with swcPlugin

Source: https://electron-vite.org/guide/typescript

Configure the swcPlugin in electron.vite.config.ts to support emitDecoratorMetadata. Requires installing @swc/core as a peer dependency.

```typescript
import { defineConfig, swcPlugin } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [swcPlugin()]
  },
  // ...
})
```

--------------------------------

### Scaffold a new project

Source: https://electron-vite.org/guide

Use the create-electron tool to initialize a new project with interactive prompts.

```bash
npm create @quick-start/electron@latest
```

```bash
yarn create @quick-start/electron
```

```bash
pnpm create @quick-start/electron
```

--------------------------------

### View detailed error messages after packaging

Source: https://electron-vite.org/guide/troubleshooting

Use these commands to launch your packaged application with trace warnings enabled to diagnose runtime issues.

```shell
.\app.exe --trace-warnings
```

```shell
open app.app --args --trace-warnings
```

--------------------------------

### Scaffold project with template

Source: https://electron-vite.org/guide

Specify a project name and template directly via command line arguments.

```bash
# npm 7+, extra double-dash is needed:
npm create @quick-start/electron@latest my-app -- --template vue
```

```bash
yarn create @quick-start/electron my-app --template vue
```

```bash
pnpm create @quick-start/electron my-app --template vue
```

--------------------------------

### Create GitHub Actions workflow for releases

Source: https://electron-vite.org/guide/distribution

Automates building and packaging for Windows, macOS, and Linux, and creates a draft release on GitHub.

```yaml
name: Build/release Electron app

on:
  push:
    tags:
      - v*.*.*

jobs:
  release:
    runs-on: ${{ matrix.os }}

    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]

    steps:
      - name: Check out Git repository
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install Dependencies
        run: npm install

      - name: build-linux
        if: matrix.os == 'ubuntu-latest'
        run: npm run build:linux

      - name: build-mac
        if: matrix.os == 'macos-latest'
        run: npm run build:mac

      - name: build-win
        if: matrix.os == 'windows-latest'
        run: npm run build:win

      - name: release
        uses: softprops/action-gh-release@v1
        with:
          draft: true
          files: |
            dist/*.exe
            dist/*.zip
            dist/*.dmg
            dist/*.AppImage
            dist/*.snap
            dist/*.deb
            dist/*.rpm
            dist/*.tar.gz
            dist/*.yml
            dist/*.blockmap
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
```

--------------------------------

### Configure Build Output Directories

Source: https://electron-vite.org/guide/build

Specify custom output directories for main, preload, and renderer processes in the configuration file.

```javascript
export default defineConfig({
  main: {
    build: {
      outDir: 'dist/main'
    }
  },
  preload: {
    build: {
      outDir: 'dist/preload'
    }
  },
  renderer: {
    build: {
      outDir: 'dist/renderer'
    }
  }
})
```

--------------------------------

### Configure electron-builder.yml

Source: https://electron-vite.org/guide/distribution

A comprehensive configuration file for packaging Electron applications across macOS, Windows, and Linux.

```yaml
appId: com.electron.app
productName: vue-ts
directories:
  buildResources: build
files:
  - '!**/.vscode/*'
  - '!src/*'
  - '!electron.vite.config.{js,ts,mjs,cjs}'
  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
asarUnpack:
  - resources/**
afterSign: build/notarize.js
win:
  executableName: vue-ts
nsis:
  artifactName: ${name}-${version}-setup.${ext}
  shortcutName: ${productName}
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
mac:
  entitlementsInherit: build/entitlements.mac.plist
  extendInfo:
    - NSCameraUsageDescription: Application requests access to the device's camera.
    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
dmg:
  artifactName: ${name}-${version}.${ext}
linux:
  target:
    - AppImage
    - snap
    - deb
  maintainer: electronjs.org
  category: Utility
appImage:
  artifactName: ${name}-${version}.${ext}
npmRebuild: false
publish:
  provider: generic
  url: https://example.com/auto-updates
```

--------------------------------

### Launch electron-vite with V8 Inspector

Source: https://electron-vite.org/guide/debugging

Use these commands to enable V8 inspector support for debugging without an IDE.

```sh
# Electron will listen for V8 inspector.
electron-vite --inspect --sourcemap

# Like --inspect but pauses execution on the first line of JavaScript.
electron-vite --inspect-brk --sourcemap
```

--------------------------------

### Configure Multiple Windows in electron.vite.config.js

Source: https://electron-vite.org/guide/dev

Define multiple entry points for preload and renderer processes using rollupOptions.

```javascript
export default {
  main: {},
  preload: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/preload/browser.js'),
          webview: resolve(__dirname, 'src/preload/webview.js')
        }
      }
    }
  },
  renderer: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/renderer/browser.html'),
          webview: resolve(__dirname, 'src/renderer/webview.html')
        }
      }
    }
  }
}
```

--------------------------------

### Configure package.json for Electron Forge

Source: https://electron-vite.org/guide/distribution

Sets up build and packaging scripts while overriding the default output directory to resolve conflicts with Electron Forge.

```json
"main": "./dist/main/index.js",
"scripts": {
  "start": "electron-vite preview --outDir=dist",
  "dev": "electron-vite dev --outDir=dist",
  "package": "electron-vite build --outDir=dist && electron-forge package",
  "make ": "electron-vite build --outDir=dist && electron-forge make"
},
"devDependencies": {
  "@electron-forge/cli": "^6.2.1",
  "@electron-forge/maker-deb": "^6.2.1",
  "@electron-forge/maker-rpm": "^6.2.1",
  "@electron-forge/maker-squirrel": "^6.2.1",
  "@electron-forge/maker-zip": "^6.2.1",
}
```

--------------------------------

### Set Electron entry point

Source: https://electron-vite.org/guide

Update the main field in package.json to point to the bundled output directory.

```json
{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "./out/main/index.js"
}
```

--------------------------------

### View Default Build Output Structure

Source: https://electron-vite.org/guide/build

Visual representation of the default directory structure generated after running the build command.

```text
├──out/
│  ├──main
│  ├──preload
│  └──renderer
└──...
```

--------------------------------

### Add Build Scripts to package.json

Source: https://electron-vite.org/guide/distribution

Define build commands for different platforms in the package.json file.

```json
"scripts": {
  "build:win": "npm run build && electron-builder --win --config",
  "build:mac": "npm run build && electron-builder --mac --config",
  "build:linux": "npm run build && electron-builder --linux --config"
}
```

--------------------------------

### Configure custom entry points in electron.vite.config.ts

Source: https://electron-vite.org/guide/dev

Use rollupOptions to specify custom paths for main, preload, and renderer processes when deviating from default conventions.

```javascript
import { defineConfig } from 'electron-vite'
import { resolve } from 'path'

export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'electron/main/index.ts')
        }
      }
    }
  },
  preload: {
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'electron/preload/index.ts')
        }
      }
    }
  },
  renderer: {
    root: '.',
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'index.html')
        }
      }
    }
  }
})
```

--------------------------------

### Enable Bytecode Compilation

Source: https://electron-vite.org/guide/source-code-protection

Configure the build process to compile main and preload scripts into V8 bytecode for enhanced protection.

```typescript
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    build: {
      bytecode: true
    }
  },
  preload: {
    build: {
      bytecode: true
    }
  },
  renderer: {
    // ...
  }
})
```

--------------------------------

### Define electron-vite configuration

Source: https://electron-vite.org/guide

Create an electron.vite.config.js file to define build configurations for main, preload, and renderer processes.

```javascript
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}
```

--------------------------------

### Importing WebAssembly modules

Source: https://electron-vite.org/guide/assets

Use the ?loader suffix to import pre-compiled WebAssembly files in the main process, which returns an initialization function.

```javascript
import loadWasm from '../../resources/add.wasm?loader'

loadWasm().then((instance) => {
  // Exported function live under instance.exports
  const add = instance.exports.add as (a: number, b: number) => number
  const sum = add(5, 6)
  console.log(sum); // Outputs: 11
})
```

```javascript
loadWasm({
  env: {
    memoryBase: 0,
    tableBase: 0,
    memory: new WebAssembly.Memory({
      initial: 256,
      maximum: 512
    }),
    table: new WebAssembly.Table({
      initial: 0,
      maximum: 0,
      element: 'anyfunc'
    })
  }
}).then(() => {
  /* ... */
})
```

--------------------------------

### Importing assets as file paths

Source: https://electron-vite.org/guide/assets

Use the ?asset suffix to resolve assets as file paths in the main process. Assets outside the public directory are copied to the output directory.

```javascript
import { Tray, nativeImage } from 'electron'
import appIcon from '../../build/icon.ico?asset'

let tray = new Tray(nativeImage.createFromPath(appIcon))
```

```javascript
const path = require("path");
const appIcon = path.join(__dirname, "./chunks/icon-4363016c.ico");
```

```javascript
import { Tray, nativeImage } from 'electron'
import appIcon from '../../resources/icon.ico?asset'

let tray = new Tray(nativeImage.createFromPath(appIcon))
```

```javascript
const path = require("path");
const appIcon = path.join(__dirname, "../../resources/icon.ico");
```

--------------------------------

### Configure pnpm for dependency bundling

Source: https://electron-vite.org/guide/troubleshooting

Add this configuration to the project root to ensure dependencies are bundled correctly when using pnpm.

```text
shamefully-hoist=true
```

--------------------------------

### Configure VSCode Debugging

Source: https://electron-vite.org/guide/debugging

Add this configuration to .vscode/launch.json to enable debugging for both main and renderer processes.

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
      },
      "runtimeArgs": ["--sourcemap"],
      "env": {
        "REMOTE_DEBUGGING_PORT": "9222"
      }
    },
    {
      "name": "Debug Renderer Process",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}/src/renderer",
      "timeout": 60000,
      "presentation": {
        "hidden": true
      }
    }
  ],
  "compounds": [
    {
      "name": "Debug All",
      "configurations": ["Debug Main Process", "Debug Renderer Process"],
      "presentation": {
        "order": 1
      }
    }
  ]
}
```

--------------------------------

### Transforming Strings to Bytecode

Source: https://electron-vite.org/guide/source-code-protection

Demonstrates how electron-vite converts standard string literals into obfuscated IIFE functions using String.fromCharCode.

```javascript
// string in source code
const encryptKey = 'ABC'

// electron-vite transforms string into an IIFE function
const encryptKey = (function(){})([65, 66, 67])
```

--------------------------------

### Configure npm scripts

Source: https://electron-vite.org/guide

Add electron-vite commands to the scripts section of your package.json.

```json
{
  "scripts": {
    "start": "electron-vite preview", // start electron app to preview production build
    "dev": "electron-vite dev", // start dev server and electron app
    "prebuild": "electron-vite build" // build for production
  }
}
```

--------------------------------

### Define environment variables with prefixes

Source: https://electron-vite.org/guide/env-and-mode

Environment variables are scoped by prefixes like MAIN_VITE_, PRELOAD_VITE_, RENDERER_VITE_, and VITE_.

```text
KEY=123                # not available
MAIN_VITE_KEY=123      # only main process available
PRELOAD_VITE_KEY=123   # only preload scripts available
RENDERER_VITE_KEY=123  # only renderers available
VITE_KEY=123           # all available
```

--------------------------------

### Load hash-based routes in BrowserWindow

Source: https://electron-vite.org/guide/troubleshooting

Specify the hash value in the second argument of loadFile to support hash-based routers in production.

```javascript
win.loadFile(path.join(import.meta.dirname, '../renderer/index.html'), { hash: 'home' })
```

--------------------------------

### Configure BrowserWindow for HMR

Source: https://electron-vite.org/guide/hmr-and-hot-reloading

Use the ELECTRON_RENDERER_URL environment variable to switch between the Vite dev server and the production HTML file.

```javascript
function createWindow() {
  // Create the browser window
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js')
    }
  })

  // Load the local URL for development or the local
  // html file for production
  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
  }
}
```

```javascript
if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
  mainWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/view.html`)
} else {
  mainWindow.loadFile(path.join(__dirname, '../renderer/view.html'))
}
```

--------------------------------

### Implement Manual Chunking Strategy

Source: https://electron-vite.org/guide/build

Configure manual chunk splitting to optimize application performance using Rollup options.

```typescript
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id): string | void {
            if (id.includes('foo')) {
              return 'foo'
            }
          }
        }
      }
    }
  },
  // ...
})
```

--------------------------------

### Handling __dirname in ESM

Source: https://electron-vite.org/guide/dev

Shows how to replace the missing __dirname global in ESM by using fileURLToPath and import.meta.url.

```javascript
import { BrowserWindow } from 'electron'
import { join } from 'path'

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: join(__dirname,'../preload/index.mjs') // ❌ ReferenceError: __dirname is not defined
  }
})
```

```javascript
import { BrowserWindow } from 'electron'
import { fileURLToPath } from 'url'

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: fileURLToPath(new URL('../preload/index.mjs', import.meta.url)) // ✅
  }
})
```

--------------------------------

### Fork Utility Processes

Source: https://electron-vite.org/guide/dev

Use utilityProcess.fork to spawn child processes, communicating via MessageChannelMain.

```javascript
import { utilityProcess, MessageChannelMain } from 'electron'
import forkPath from './fork?modulePath'

const { port1, port2 } = new MessageChannelMain()
const child = utilityProcess.fork(forkPath)
child.postMessage({ message: 'hello' }, [port1])

port2.on('message', (e) => {
  console.log(`Message from child: ${e.data}`)
})
port2.start()
port2.postMessage('hello')
```

```javascript
process.parentPort.on('message', (e) => {
  const [port] = e.ports
  port.on('message', (e) => {
    console.log(`Message from parent: ${e.data}`)
  })
  port.start()
  port.postMessage('hello')
})
```

--------------------------------

### Migrate bytecodePlugin to build.bytecode

Source: https://electron-vite.org/guide/migration

The bytecodePlugin is deprecated. Use the build.bytecode configuration option instead.

```js
import { defineConfig, bytecodePlugin } from 'electron-vite'
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [bytecodePlugin()] 
    build: { 
      bytecode: true
    } 
  },
  preload: {
    plugins: [bytecodePlugin()] 
    build: { 
      bytecode: true
    } 
  },
  // ...
})
```

```js
import { defineConfig, bytecodePlugin } from 'electron-vite'
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [bytecodePlugin({ protectedStrings: ['foo'] })] 
    build: { 
      bytecode: { protectedStrings: ['foo'] } 
    } 
  },
  // ...
})
```

--------------------------------

### Pass Arguments to Electron App via CLI

Source: https://electron-vite.org/guide/dev

Use the double-dash separator to pass flags or application arguments to the Electron process.

```json
"scripts": {
  "dev": "electron-vite dev -- --trace-warnings"
}
```

```json
"scripts": {
  "dev": "electron-vite dev -- p1 p2"
}
```

--------------------------------

### Attach Preload Script to Webview

Source: https://electron-vite.org/guide/dev

Configure the preload script for a webview using the will-attach-webview event handler.

```javascript
mainWindow.webContents.on('will-attach-webview', (e, webPreferences) => {
  webPreferences.preload = join(import.meta.dirname, '../preload/index.js')
})
```

--------------------------------

### Enable Isolated Build for Preload Scripts

Source: https://electron-vite.org/guide/isolated-build

Configure isolatedEntries and disable externalizeDeps in the preload build settings to support Electron sandbox bundling.

```typescript
import { defineConfig } from 'electron-vite'

export default defineConfig({
  // ...
  preload: {
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/preload/index.ts'),
          test: resolve(__dirname, 'src/preload/test.ts')
        }
      },
      isolatedEntries: true，
      externalizeDeps: false
    }
  },
  // ...
})
```

--------------------------------

### Importing CommonJS Modules in ESM

Source: https://electron-vite.org/guide/dev

Demonstrates the correct way to import CommonJS modules that do not support named exports in an ESM environment.

```javascript
import { autoUpdater } from 'electron-updater' // ❌ SyntaxError: Named export 'autoUpdater' not found.
```

```javascript
import updater from 'electron-updater' // ✅
```

--------------------------------

### Configure forge.config.cjs

Source: https://electron-vite.org/guide/distribution

Configuration for Electron Forge to manage packaging and makers for various platforms.

```js
module.exports = {
  packagerConfig: {
    ignore: [
      /^\/src/,
      /(.eslintrc.json)|(.gitignore)|(electron.vite.config.ts)|(forge.config.cjs)|(tsconfig.*)/,
    ],
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
};
```

--------------------------------

### Implement preload script communication

Source: https://electron-vite.org/guide/dev

Expose IPC functionality to the renderer process using contextBridge and handle requests in the main process.

```javascript
import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electron', {
  ping: () => ipcRenderer.invoke('ping')
})
```

```javascript
import { app, BrowserWindow } from 'electron'
import path from 'path'

const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  })

  ipcMain.handle('ping', () => 'pong')

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})
```

```javascript
const func = async () => {
  const response = await window.electron.ping()
  console.log(response) // prints out 'pong'
}

func()
```

--------------------------------

### Clone boilerplate template

Source: https://electron-vite.org/guide

Use degit to clone the electron-vite-boilerplate repository.

```bash
npx degit alex8088/electron-vite-boilerplate electron-app
cd electron-app

npm install
npm run dev
```

--------------------------------

### Customize Rollup Build Options

Source: https://electron-vite.org/guide/build

Adjust underlying Rollup configurations for main, preload, and renderer processes.

```javascript
export default defineConfig({
  main: {
    rollupOptions: {
      // ...
    }
  },
  preload: {
    rollupOptions: {
      // ...
    }
  },
  renderer: {
    rollupOptions: {
      // ...
    }
  }
})
```

--------------------------------

### Communicate via IPC in Renderer

Source: https://electron-vite.org/guide/dev

Use the exposed electron object to send messages to the main process or listen for replies.

```javascript
// Send a message to the main process with no response
window.electron.ipcRenderer.send('electron:say', 'hello')

// Send a message to the main process with the response asynchronously
window.electron.ipcRenderer.invoke('electron:doAThing', '').then(re => {
  console.log(re)
})

// Receive messages from the main process
window.electron.ipcRenderer.on('electron:reply', (_, args) => {
  console.log(args)
})
```

--------------------------------

### Handling ASAR unpacked files

Source: https://electron-vite.org/guide/assets

Use the ?asset&asarUnpack suffix to correctly resolve paths for files that cannot be packed into ASAR archives.

```javascript
import bin from '../../resources/hello.exe?asset&asarUnpack'
```

```javascript
const path = require("path");
const bin = path.join(__dirname, "../../resources/hello.exe").replace("app.asar", "app.asar.unpacked");
```

--------------------------------

### Dynamic Build Hook for Multi-Architecture Support

Source: https://electron-vite.org/guide/source-code-protection

Uses a build hook to dynamically update the execution path for different target architectures during the build process.

```javascript
const { execSync } = require('child_process')
const os = require('os')

module.exports = {
  async beforeBuild(context) {
    const targetArch = context.arch  // Target architecture
    const hostArch = os.arch()       // Current machine architecture

    // Only modify ELECTRON_EXEC_PATH if target architecture differs from host
    if (targetArch !== hostArch) {
      process.env.ELECTRON_EXEC_PATH = `/path/to/electron-${targetArch}/Electron.app/Contents/MacOS/Electron`
    }

    // Execute the electron-vite build via npm
    execSync('npm run electron-vite build', { stdio: 'inherit' })
  }
}
```

--------------------------------

### Enable ESM in electron.vite.config.js

Source: https://electron-vite.org/guide/dev

Configure rollup output format to ES modules to enable ESM support.

```javascript
export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        output: {
          format: 'es'
        }
      }
    }
  },
  preload: {
    build: {
      rollupOptions: {
        output: {
          format: 'es'
        }
      }
    }
  }
  // ...
})
```

--------------------------------

### Expose Electron APIs with contextBridge

Source: https://electron-vite.org/guide/dev

Use contextBridge to securely expose electronAPI to the renderer process when context isolation is enabled.

```javascript
import { contextBridge } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'

if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('electron', electronAPI)
  } catch (error) {
    console.error(error)
  }
} else {
  window.electron = electronAPI
}
```

--------------------------------

### Enable Isolated Build for Renderer Process

Source: https://electron-vite.org/guide/isolated-build

Set isolatedEntries to true in the renderer build configuration to reduce chunk generation and improve performance.

```javascript
import { defineConfig } from 'electron-vite'

export default defineConfig({
  // ...
  renderer: {
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/renderer/index.html'),
          test: resolve(__dirname, 'src/renderer/test.html')
        }
      },
      isolatedEntries: true
    }
  },
  // ...
})
```

--------------------------------

### Importing native Node.js modules

Source: https://electron-vite.org/guide/assets

Native modules can be imported directly or as file paths using the ?asset suffix for dynamic require calls.

```javascript
import addon from '../../resources/hello.node'

console.log(addon?.hello())
```

```javascript
import addon from '../../resources/hello.node?asset'
import { createRequire } from 'module'
const require = createRequire(import.meta.url)

const native = require(addon)
console.log(native?.hello())
```

--------------------------------

### Configure Multiple Rollup Inputs

Source: https://electron-vite.org/guide/isolated-build

Export an array of configuration objects from rollup.config.js to build multiple unrelated inputs simultaneously.

```javascript
export default [
  {
    input: 'main-a.js',
    output: {
      file: 'dist/bundle-a.js',
      format: 'cjs'
    }
  },
  {
    input: 'main-b.js',
    output: {
      file: 'dist/bundle-b.js',
      format: 'cjs'
    }
  }
]
```

--------------------------------

### Disable automatic dependency externalization

Source: https://electron-vite.org/guide/dependency-handling

Set externalizeDeps to false to bundle all dependencies, which may increase build times and impact startup performance.

```javascript
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    build: {
      externalizeDeps: false
    }
  }
  // ...
})
```

--------------------------------

### Customize environment variable prefix

Source: https://electron-vite.org/guide/env-and-mode

Use the envPrefix option in the electron.vite.config.js file to change the default variable prefixes.

```javascript
export default defineConfig({
  main: {
    envPrefix: 'M_VITE_'
  }
  // ...
})
```

--------------------------------

### Setting ELECTRON_EXEC_PATH for Cross-Architecture Builds

Source: https://electron-vite.org/guide/source-code-protection

Configures the bytecode compiler to use a specific Electron executable path for cross-architecture compilation.

```typescript
import { defineConfig } from 'electron-vite'

export default defineConfig(() => {
  process.env.ELECTRON_EXEC_PATH = '/path/to/electron-x64/Electron.app/Contents/MacOS/Electron'

  return {
    // ...
  }
})
```

--------------------------------

### Enable ASAR Integrity with electron-builder

Source: https://electron-vite.org/guide/source-code-protection

Configure the build process to include ASAR integrity checks, which detect and prevent file tampering at runtime.

```yaml
build:
  appId: your.id
```

--------------------------------

### Implement Node Worker Threads

Source: https://electron-vite.org/guide/dev

Import worker scripts using specific suffixes to handle multi-threading in Node.js.

```javascript
import { resolve } from 'node:path'
import { Worker } from 'node:worker_threads'
import workerPath from './worker?modulePath'

new Worker(workerPath, {})
```

```javascript
import createWorker from './worker?nodeWorker'

createWorker({ workerData: 'worker' })
    .on('message', (message) => {
      console.log(`Message from worker: ${message}`)
    })
    .postMessage('')
```

--------------------------------

### Configure externalizeDeps in electron.vite.config.js

Source: https://electron-vite.org/guide/troubleshooting

Use the externalizeDeps option to bundle specific ESM-only dependencies into a CJS environment.

```javascript
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    build: {
      externalizeDeps: {
        exclude: ['foo'] // <- Add related modules to 'exclude' option
      }
    }
  },
  // ...
})
```

--------------------------------

### Configure bytecode chunk alias in electron-vite

Source: https://electron-vite.org/guide/source-code-protection

Use this configuration to specify which bundles the bytecode compiler should process, typically in conjunction with manualChunks.

```typescript
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id): string | void {
            if (id.includes('foo')) {
              return 'foo'
            }
          }
        }
      },
      build: {
        bytecode: { chunkAlias: 'foo' }
      }
    }
  },
  // ...
})
```

--------------------------------

### Add TypeScript Declaration Reference

Source: https://electron-vite.org/guide/typescript

Include this reference in a .d.ts file to enable type checking and intellisense for electron-vite.

```javascript
/// <reference types="electron-vite/node" />
```

--------------------------------

### Importing JSON as a file path

Source: https://electron-vite.org/guide/assets

Use the ?commonjs-external&asset suffix to import a JSON file as a path instead of a parsed object.

```javascript
import jsonFile from '../../resources/config.json?commonjs-external&asset'
```

--------------------------------

### Exclude dependencies from externalization

Source: https://electron-vite.org/guide/dependency-handling

Use the exclude option to force specific dependencies to be bundled instead of externalized.

```javascript
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    build: {
      externalizeDeps: {
        exclude: ['foo']
      }
    }
  }
  // ...
})
```

--------------------------------

### Enable ASAR Integrity Validation

Source: https://electron-vite.org/guide/source-code-protection

Configure electron-vite to ensure Electron only loads application code from the ASAR archive.

```yaml
electronFuses:
    # Enable ASAR integrity validation
    EnableEmbeddedAsarIntegrityValidation: true
    # (Optional, but recommended) Ensure Electron only loads app code from app.asar
    OnlyLoadAppFromAsar: true
```

--------------------------------

### Configure ASAR Unpack in electron-builder

Source: https://electron-vite.org/guide/distribution

Use this configuration to prevent specific files and directories from being packed into the ASAR archive.

```yaml
asarUnpack:
  - node_modules/sqlite3
  - out/main/chunks/*.node
  - resources/**
```

--------------------------------

### Disable Electron Sandbox

Source: https://electron-vite.org/guide/dev

Set the sandbox preference to false within the BrowserWindow constructor to disable renderer sandboxing.

```javascript
const win = new BrowserWindow({
  webPreferences: {
    sandbox: false
  }
})
```

--------------------------------

### Configure TypeScript Types in tsconfig

Source: https://electron-vite.org/guide/typescript

Add electron-vite/node to the compilerOptions.types array in your tsconfig.node.json file.

```json
{
  "compilerOptions": {
    "types": ["electron-vite/node"]
  }
}
```

--------------------------------

### Remove function resolution for nested config

Source: https://electron-vite.org/guide/migration

Function-based configuration is no longer supported for nested fields like main, preload, or renderer. Use static objects instead.

```js
import { defineConfig, defineViteConfig } from 'electron-vite'

export default defineConfig({
  main: {
    // ...
  },
  preload: {
    // ...
  },
  renderer: defineViteConfig(({ command, mode }) => { ❌ 
    // ...
  })
})
```

--------------------------------

### Manually externalize specific modules

Source: https://electron-vite.org/guide/dependency-handling

Use rollupOptions.external to keep specific modules, such as Node.js addons, external when full bundling is enabled.

```javascript
export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        external: ['sqlite3']
      }
    }
  }
  // ...
})
```

--------------------------------

### Identifying Pure Static Template Literals

Source: https://electron-vite.org/guide/source-code-protection

Distinguishes between static template literals that support protection and dynamic ones that do not.

```javascript
// ✅
const foo = `-----BEGIN CERTIFICATE-----
MIIDkTCCAnmgAw...
`
// ❌
const zoo = `ABC ${x}`
```

--------------------------------

### Define TypeScript types for environment variables

Source: https://electron-vite.org/guide/env-and-mode

Add custom interface definitions to env.d.ts to enable type checking and intellisense for environment variables.

```typescript
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly MAIN_VITE_SOME_KEY: string
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}
```

--------------------------------

### Remove externalizeDepsPlugin

Source: https://electron-vite.org/guide/migration

The externalizeDepsPlugin is deprecated in v5 and enabled by default. Remove it from your configuration plugins.

```js
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { defineConfig } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()] 
  },
  preload: {
    plugins: [externalizeDepsPlugin()] 
  }
  // ...
})
```
Tokens:
Raw