electron-vite

https://electron-vite.org/
Admin
electron-vite is a next-generation Electron build tool based on Vite, offering fast performance,...
Tokens:24,933
Snippets:246
Trust Score:7.1
Update:1 week ago
Show doc for...
Tokens:
Raw
### preview function usage example

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

Example usage of the preview function. It requires 'electron-vite' and calls preview with an empty configuration object.

```javascript
const { preview } = require('electron-vite')

;(async () => {
  await preview({})
})()
```

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

### build function usage example

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

Example usage of the build function. It requires 'electron-vite' and calls build with a configuration object that sets the output directory and rollup options.

```javascript
const path = require('path')
const { build } = require('electron-vite')

;(async () => {
  await build({
    build: {
      outDir: 'out'
      rollupOptions: {
        // ...
      }
    }
  })
})()
```

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

### Scaffolding prompts output

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

Example output from the scaffolding prompts, showing project name, framework, and options.

```text
✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.
```

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

### Install Electron for other architectures

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

Command to install Electron for a different architecture using the --arch flag with npm install.

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

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

### Set Electron main entry point

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

package.json example setting the main field to the output main process entry file.

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

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

### main.js: setup BrowserWindow and IPC handler

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

Main process script that creates a BrowserWindow with the preload script attached. Registers an IPC handler for 'ping' and loads the index.html.

```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()
})

```

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

### Project structure for chunkAlias example

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

Shows the expected project structure when protecting only src/main/foo.ts. The foo.ts file is located in the src/main directory.

```txt
.
├──src
│  ├──main
│  │  ├──index.ts
│  │  ├──foo.ts
│  │  └──...
└──...

```

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

### createServer function usage example

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

Example usage of the createServer function. It requires 'electron-vite' and calls createServer with a configuration object that sets the server port to 1337.

```javascript
const { createServer } = require('electron-vite')

;(async () => {
  await createServer({
    server: {
      port: 1337
    }
  })
})()
```

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

### Customize build with rollupOptions

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

Example electron.vite.config.js showing how to customize the underlying Rollup options for main, preload, and renderer processes via build.rollupOptions.

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

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

### Custom project structure example

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

A custom project structure where main and preload reside under `electron/` and renderer files are at the root. Used to illustrate how to override the default entry points with `build.rollupOptions.input`.

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

```

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

### Install electron-vite with npm

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

Install electron-vite as a dev dependency. Requires Node.js 20.19+ or 22.12+ and Vite 5.0+.

```sh
npm i electron-vite -D
```

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

### beforeBuild.js hook for multi-architecture builds

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

Example of an electron-builder beforeBuild hook that dynamically sets ELECTRON_EXEC_PATH based on the target architecture and runs the electron-vite build command.

```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' })
  }
}
```

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

### Create Node worker with ?nodeWorker import

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

When importing with ?nodeWorker, the default export becomes a Node worker constructor. The example shows starting a worker with workerData, listening for messages, and sending a postMessage to trigger the worker.

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

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

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

### VSCode launch.json for debugging main and renderer processes

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

Add this configuration to .vscode/launch.json to debug both the main and renderer processes. Use the 'Debug All' compound to start debugging both processes simultaneously. The 'Debug Main Process' configuration can be used alone, but renderer debugging requires attaching to the main process.

```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
      }
    }
  ]
}
```

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

### Clone electron-vite-boilerplate with degit

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

Commands to clone the electron-vite-boilerplate template, install dependencies, and run the dev server.

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

npm install
npm run dev
```

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

### electron.vite.config.ts with protectedStrings

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

Configuration example showing how to specify protected strings in the bytecode build option. The array includes a string literal and a multi-line template literal.

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

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

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

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

### Configure output directories with build.outDir

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

Example electron.vite.config.js that sets the output directory for main, preload, and renderer processes using the build.outDir option. This allows placing bundled code in separate directories.

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

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

### Add npm scripts for electron-vite

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

Adds start, dev, and prebuild scripts to package.json for previewing, developing, and building the Electron app.

```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
  }
}
```

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

### GitHub Actions workflow for building and releasing Electron app

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

This workflow triggers on tags matching 'v*.*.*' and builds the Electron app on Ubuntu, macOS, and Windows. It installs dependencies, runs platform-specific build scripts, and creates a draft release with the packaged artifacts.

```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 }}
```

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

### Config intellisense with defineConfig helper

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

Use the defineConfig helper from electron-vite to get intellisense without JSDoc annotations. The config file can be named electron.vite.config.ts.

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

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

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

### Enable decorators with swcPlugin in electron.vite.config.ts

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

Use swcPlugin in the main config to support emitDecoratorMetadata for decorators. Requires installing @swc/core as an optional peer dependency.

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

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

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

### Config intellisense with JSDoc type hints

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

Use JSDoc type hints to get IDE intellisense for the electron-vite config. The config file can be named electron.vite.config.ts.

```javascript
/**
 * @type {import('electron-vite').UserConfig}
 */
const config = {
  // ...
}

export default config
```

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

### Using Preload Path in ESM with fileURLToPath

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

Compares a CommonJS-style usage of __dirname in ESM, which throws a ReferenceError, with the correct ESM approach using fileURLToPath and import.meta.url. The first example fails because __dirname is not available in ES modules; the second works.

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

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

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

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

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

### Configure chunkAlias in electron.vite.config.ts

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

Example configuration for electron.vite.config.ts that sets manualChunks to create a chunk named 'foo' for files containing 'foo', and then sets build.bytecode.chunkAlias to 'foo' to protect that chunk. This is used with the build.rollupOptions.output.manualChunks option.

```js
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' }
      }
    }
  },
  // ...
})

```

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

### V8 Inspector debugging commands

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

Use these commands to launch electron-vite with V8 inspector support for debugging without an IDE. The --inspect flag starts the inspector, while --inspect-brk pauses execution on the first line of JavaScript. Append --sourcemap to debug source code instead of bundled code.

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

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

### Pure static template literals example

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

Illustrates valid and invalid template literals for protection. Only pure static template literals (no interpolation) are supported; the invalid example uses `${x}`.

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

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

### Run app with --trace-warnings on Windows

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

Launch the packaged app with the --trace-warnings argument to view detailed error messages. Replace app.exe with your actual executable name.

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

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

### preview

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

Previews the built Electron application. Returns a Promise that resolves when the preview server is ready.

```APIDOC
## `preview`

### Description
Previews the built Electron application. This async function takes an optional InlineConfig object and returns a Promise that resolves when the preview is ready.

### Method
`preview`

### Type Signature
`async function preview(inlineConfig: InlineConfig = {}): Promise<void>`

### Parameters
- **inlineConfig** (InlineConfig) - Optional - Configuration object for the preview, extending Vite's UserConfig.

### Example Usage
```js
const { preview } = require('electron-vite')
;(async () => {
  await preview({})
})()
```
```

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

### Run app with --trace-warnings on macOS

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

Launch the packaged app with the --trace-warnings argument using the open command. Replace app.app with your actual app bundle name.

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

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

### Add electron-vite type reference in declaration file

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

Add this reference to a *.d.ts file to get type checks and intellisense for electron-vite.

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

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

### Scaffold project with npm

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

Command to scaffold a new electron-vite project using npm.

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

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

### createServer

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

Creates a development server for the Electron application. Returns a Promise that resolves when the server is created.

```APIDOC
## `createServer`

### Description
Creates a development server for the Electron application. This async function takes an optional InlineConfig object and returns a Promise that resolves when the server is created.

### Method
`createServer`

### Type Signature
`async function createServer(inlineConfig: InlineConfig = {}): Promise<void>`

### Parameters
- **inlineConfig** (InlineConfig) - Optional - Configuration object for the server, extending Vite's UserConfig.

### Example Usage
```js
const { createServer } = require('electron-vite')
;(async () => {
  await createServer({
    server: {
      port: 1337
    }
  })
})()
```
```

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

### Scaffold with template using npm

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

Command to scaffold an Electron + Vue project with npm, requiring extra double-dash for npm 7+.

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

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

### Scaffold with template using pnpm

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

Command to scaffold an Electron + Vue project with pnpm.

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

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

### Bundle a dependency with externalizeDeps.exclude

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

Configures build.externalizeDeps.exclude to force bundling of the 'foo' package in the main process. This is an alternative to installing the dependency as a devDependency. Prior to electron-vite 5, use the externalizeDepsPlugin instead.

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

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

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

### build

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

Asynchronously builds the Electron application for production using the provided configuration. Returns a Promise that resolves when the build is done.

```APIDOC
## `build`

### Description
Builds the Electron application for production. This async function takes an optional InlineConfig object and returns a Promise that resolves when the build is complete.

### Method
`build`

### Type Signature
`async function build(inlineConfig: InlineConfig = {}): Promise<void>`

### Parameters
- **inlineConfig** (InlineConfig) - Optional - Configuration object for the build, extending Vite's UserConfig.

### Example Usage
```js
const path = require('path')
const { build } = require('electron-vite')
;(async () => {
  await build({
    build: {
      outDir: 'out'
      rollupOptions: {
        // ...
      }
    }
  })
})()
```
```

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

### package.json scripts for electron-builder builds

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

Add these scripts to package.json to build and package the app for Windows, macOS, and Linux using electron-builder. Each script runs the build command first and then invokes electron-builder with the corresponding platform flag.

```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 chunk splitting with manualChunks

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

Example electron.vite.config.ts that uses build.rollupOptions.output.manualChunks to split chunks based on module IDs. The function returns a chunk name when the module ID includes 'foo'.

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

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

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

### Import WebAssembly with ?loader

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

Import a pre-compiled WebAssembly file using the `?loader` suffix in the main process. The default export is an initialization function that returns a Promise of the wasm instance. Vite's `?init` suffix is not supported in the main process.

```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
})

```

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

### String transformation example

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

Shows how electron-vite transforms a string literal into an IIFE function using String.fromCharCode. The original string 'ABC' becomes an IIFE with character codes [65, 66, 67].

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

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

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

### Load renderer with hash router using BrowserWindow.loadFile

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

When using a hash-based router, specify the hash value in the second argument of 'BrowserWindow.loadFile' to load the corresponding page in production.

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

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

### Scaffold with template using yarn

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

Command to scaffold an Electron + Vue project with yarn.

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

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

### electron.vite.config.ts with custom entry points

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

Custom `electron.vite.config.ts` that sets the entry points for a project where main, preload, and renderer are not in the default locations. The renderer `root` must be set to `'.'` because the default working directory is `src/renderer`.

```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')
        }
      }
    }
  }
})

```

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

### Basic electron.vite.config.js

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

The most basic config file for electron-vite, with main, preload, and renderer sections. Place it in the project root.

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

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

### Scaffold project with pnpm

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

Command to scaffold a new electron-vite project using pnpm.

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

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

### Expose Electron APIs with @electron-toolkit/preload in preload.js

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

Uses contextBridge to expose electronAPI to the renderer only if context isolation is enabled; otherwise adds it to the DOM global. Recommended for development efficiency.

```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
}
```

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

### Scaffold project with yarn

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

Command to scaffold a new electron-vite project using yarn.

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

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

### Import asset as file path with ?asset suffix

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

Import an asset as a file path using the `?asset` suffix in the main process. The returned value is the resolved file path, and the asset is copied to the output directory (e.g., `out/main/chunks/icon-4363016c.ico`).

```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");

```

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

### electron.vite.config.x64.ts with ELECTRON_EXEC_PATH

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

Configuration file for cross-architecture builds. Sets the ELECTRON_EXEC_PATH environment variable to the x64 Electron executable path so bytecode can be compiled for a different architecture.

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

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

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

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

### package.json configuration for Electron Forge with electron-vite

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

Configures the main entry point and scripts for using electron-vite with Electron Forge. The 'outDir' is set to 'dist' because Electron Forge's default output directory 'out' conflicts with electron-vite.

```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"
  }
}
```

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

### Default output directory structure

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

Shows the default output directory structure when running electron-vite build. The output is placed in the 'out' directory with subdirectories for main, preload, and renderer.

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

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

### Default project structure for electron-vite

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

The default, recommended project layout for electron-vite. It requires `src/main`, `src/preload`, and `src/renderer` directories with `index.ts` files and `index.html` in renderer.

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

```

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

### Import asset from public directory

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

Import an asset from the public directory using the `?asset` suffix. Assets in the public directory are not copied to the output directory; instead, the resolved path points directly to the public directory, so the public directory must be packaged with the app.

```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 electron.vite.config.js for multiple windows

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

Configure electron.vite.config.js for an Electron app with multiple windows, defining separate preload and renderer inputs for each window (e.g., browser and webview). The main process entry is left empty to use defaults.

```js
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')
        }
      }
    }
  }
}
```

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

### Electron Builder configuration file electron-builder.yml

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

A complete electron-builder configuration file for packaging distributable Electron apps. It sets app metadata, file exclusions, platform-specific settings for Windows, macOS, and Linux, and includes an afterSign script and publish provider.

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

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

### WebStorm Npm run configuration for main process debugging

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

Create an Npm run configuration with these settings to debug the main process in WebStorm. Use the 'run' command with the 'dev' script and pass '-- --sourcemap --remote-debugging-port=9222' as arguments.

```text
Command: run
Scripts: dev
Arguments: -- --sourcemap --remote-debugging-port=9222
```

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

### Create BrowserWindow with HMR environment check

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

Uses the ELECTRON_RENDERER_URL environment variable to load the local URL in development or the local HTML file in production. Requires the renderer index.html to reference script code via <script type="module"> in development.

```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'))
  }
}

```

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

### Enable bytecode compilation in electron.vite.config.ts

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

Set build.bytecode to true for main and preload processes to enable V8 bytecode compilation. Bytecode only works in production and requires preload scripts to have sandbox disabled.

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

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

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

### Preload isolated build configuration

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

Electron-vite configuration for preload scripts with multiple entry pointshare. Enables isolated builds and disables externalizeDeps for sandbox support. Note the trailing comma uses a full-width comma, which may need correction.

```javascript
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
    }
  },
  // ...
})
```

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

### Use Electron APIs in renderer.js

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

Shows how to use the exposed electron API in the renderer process: sending messages, invoking with async response, and receiving messages from the main process.

```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)
})
```

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

### Use Electron UtilityProcess with ?modulePath in main and fork files

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

Main and child process code for using Electron's UtilityProcess with ?modulePath import. The main process forks a utility process and communicates over a MessageChannelMain, while the child process listens on process.parentPort and responds through the transferred port. Requires a fork.js file as the child entry.

```js
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')
```

```js
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')
})
```

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

### preload.js: expose ping via contextBridge

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

Preload script that exposes a `ping` function via `contextBridge.exposeInMainWorld` to the renderer. Required to demonstrate IPC communication.

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

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

```
Tokens:
Raw