electron-vite

electron-vite

Next generation Electron build tooling based on Vite

Documentation | Getting Started | create-electron

中文文档

Features

• ⚡️ Vite powered and use the same way.
• 🛠 Pre-configure with sensible defaults optimized for Electron.
• 💡 Optimize asset handling for Electron main process.
• 🚀 Fast HMR & hot reloading.
• 🔥 Isolated build for multi-entry application development.
• ✨ Simplify multi-threading development.
• 🔒 Compile code to v8 bytecode to protect source code.
• 🔌 Easy to debug in IDEs such as VSCode or WebStorm.
• 📦 Out-of-the-box support for TypeScript, Vue, React, Svelte, SolidJS and more.

Usage

Install

npm i electron-vite -D

Development & Build

In a project where electron-vite is installed, you can use electron-vite binary directly with npx electron-vite or add the npm scripts to your package.json file like this:

{
  "scripts": {
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "prebuild": "electron-vite build"
  }
}

Configuration

When running electron-vite from the command line, electron-vite will automatically try to resolve a config file named electron.vite.config.js inside project root. The most basic config file looks like this:

// electron.vite.config.js
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}

Getting Started

Clone the electron-vite-boilerplate or use the create-electron tool to scaffold your project.

npm create @quick-start/electron@latest

Currently supported template presets include:

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
svelte	svelte-ts
solid	solid-ts

Contribution

See Contributing Guide.

License

MIT © alex.wei

Similar packages

Other packages similar to electron-vite

electron-builder

Electron-builder is a complete solution to package and build a ready-for-distribution Electron app. It focuses on packaging and distribution, whereas electron-vite focuses on development speed and integration with Vite.

electron-webpack

Electron-webpack is a package that simplifies the setup of Electron applications using Webpack. It provides a similar integration to electron-vite but uses Webpack instead of Vite, which may result in slower builds compared to Vite's optimized performance.

electron-forge

Electron-forge is a tool for creating, building, and publishing Electron applications. It provides a more comprehensive suite of tools for Electron app development, including templates and plugins, while electron-vite focuses on leveraging Vite for faster development cycles.