Skip to content

Getting Started

Overview

electron-vite is a build tool that aims to provide a faster and leaner development experience for Electron. It consists of five major parts:

  • A build command that bundles your code with Vite, and able to handle Electron's unique environment including Node.js and browser environments.

  • Centrally configure the main process, renderers and preload scripts Vite configuration, and preconfigure for Electron's unique environment.

  • Use fast Hot Module Replacement(HMR) for renderers, and the main process and preload scripts support hot reloading, extremely improving development efficiency.

  • Optimize asset handling for Electron main process.

  • Use V8 bytecode to protect source code.

electron-vite is fast, simple and powerful, designed to work out-of-the-box.

You can learn more about the rationale behind the project in the Introduction section.

Installation

Pre-requisites

Requires Node.js version 18+, 20+ and Vite version 4.0+

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

Command Line Interface

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:

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

You can specify additional CLI options like --outDir. For a full list of CLI options, run npx electron-vite -h in your project.

Learn more about Command Line Interface.

Configuring electron-vite

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:

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

Learn more about Config Reference.

Electron entry point

When using electron-vite to bundle your code, the entry point of the Electron application should be changed to the main process entry file in the output directory. The default outDir is out. Your package.json file should look something like this:

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

Electron's working directory will be the output directory, not your source code directory. So you can exclude the source code when packaging Electron application.

Learn more about Build for production.

Scaffolding Your First electron-vite Project

Run the following command in your command line:

sh
npm create @quick-start/electron
npm create @quick-start/electron
sh
yarn create @quick-start/electron
yarn create @quick-start/electron
sh
pnpm create @quick-start/electron
pnpm create @quick-start/electron

Then follow the prompts!

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

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold an Electron + Vue project, run:

sh
# npm 6.x
npm create @quick-start/electron my-app --template vue

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

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

# pnpm
pnpm create @quick-start/electron my-app --template vue
# npm 6.x
npm create @quick-start/electron my-app --template vue

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

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

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

Currently supported template presets include:

JavaScriptTypeScript
vanillavanilla-ts
vuevue-ts
reactreact-ts
sveltesvelte-ts
solidsolid-ts

See create-electron for more details.

Clone Template

create-electron is a tool to quickly start a project from a basic template for popular frameworks. Also you can use a tool like degit to scaffold your project with the template electron-vite-boilerplate.

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

npm install
npm run dev
npx degit alex8088/electron-vite-boilerplate electron-app
cd electron-app

npm install
npm run dev

Getting Help

If you suspect you're running into a bug with the electron-vite, please check the GitHub issue tracker to see if any existing issues match your problem. If not, feel free to fill the bug report template and submit a new issue.

Released under the MIT License