Next generation Electron build tooling based on Vite

check out https://evite.netlify.app

Overview

electron-vite is a build tool that aims to provide a faster and leaner development experience for Electron. It consists of three 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, extremely improving development efficiency.

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

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

Installation

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:

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

// 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:

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

With NPM

npm create @quick-start/electron

With Yarn

yarn create @quick-start/electron

With PNPM

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.

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:

# 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:

See create-electron for more details.