- ⚡️Use the same way as [Vite](https://vitejs.dev)
- 🔨Both main process and renderer process source code are built using Vite
- 📃The main process and the renderer process Vite configuration are combined into one file
- 📦Preset optimal build configuration
- 🚀HMR for renderer processes
## Usage
### Install
```sh
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:
```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
}
}
```
In order to use the renderer process HMR, you need to use the `environment variables` to determine whether the window browser loads a local html file or a remote URL.
Clone the [electron-vite-boilerplate](https://github.com/alex8088/electron-vite-boilerplate) or use the [create-electron](https://github.com/alex8088/quick-start/tree/master/packages/create-electron) tool to scaffold your project.
## Configure
### Config file
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
}
}
```
You can also explicitly specify a config file to use with the `--config` CLI option (resolved relative to `cwd`):
```sh
electron-vite --config my-config.js
```
**Tips**: `electron-vite` also supports `ts` or `mjs` config file.
### Config intellisense
Since `electron-vite` ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:
```js
/**
*@type {import('electron-vite').UserConfig}
*/
const config = {
// ...
}
export default config
```
Alternatively, you can use the `defineConfig` and `defineViteConfig` helper which should provide intellisense without the need for jsdoc annotations:
```js
import { defineConfig, defineViteConfig } from 'electron-vite'
In web development, Vite will transform `'process.env.'` to `'({}).'`. This is reasonable and correct. But in nodejs development, we sometimes need to use `process.env`, so `electron-vite` will automatically add config define field to redefine global variable replacements like this:
```js
export default {
main: {
define: {
'process.env': 'process.env'
}
}
}
```
**Note**: If you want to use these configurations in an existing project, please see the Vite plugin [vite-plugin-electron-config](https://github.com/alex8088/vite-plugin-electron-config)
### Config FAQs
#### How do I configure when the Electron app has multiple windows?
When your electron app has multiple windows, it means there are multiple html files or preload files. You can modify your config file like this:
For the full list of CLI options, you can run `npx electron-vite -h` in your project. The flags listed below are only available via the command line interface:
-`--ignoreConfigWarning`: boolean, allow you ignore warning when config missing
