You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
🔨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
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", // 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.
functioncreateWindow(){// Create the browser windowconstmainWindow=newBrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname,'../preload/index.js')}})// Load the remote URL for development or the local html file for productionif(!app.isPackaged&&process.env['ELECTRON_RENDERER_URL']){mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])}else{mainWindow.loadFile(path.join(__dirname,'../renderer/index.html'))}}
Note: For development, the renderer process index.html file needs to reference your script code via <script type="module">.
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.jsexportdefault{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):
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:
target: node*, automatically match node target of Electron. For example, the node target of Electron 17 is node16.13
lib.entry: src\main\{index|main}.{js|ts|mjs|cjs}(relative to project root), empty string if not found
lib.formats: cjs
rollupOptions.external: electron and all builtin modules
Build options for preload:
outDir: out\preload(relative to project root)
target: the same as main
lib.entry: src\preload\{index|preload}.{js|ts|mjs|cjs}(relative to project root), empty string if not found
lib.formats: cjs
rollupOptions.external: the same as main
Build options for renderer:
root: src\renderer(relative to project root)
outDir: out\renderer(relative to project root)
target: chrome*, automatically match chrome target of Electron. For example, the chrome target of Electron 17 is chrome98
lib.entry: src\renderer\index.html(relative to project root), empty string if not found
polyfillModulePreload: false, there is no need to polyfill Module Preload for the Electron renderer
rollupOptions.external: the same as main
Define option for main and preload
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:
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
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
electron-vite
Features
Usage
Install
Development & Build
In a project where
electron-vite
is installed, you can useelectron-vite
binary directly withnpx electron-vite
or add the npm scripts to yourpackage.json
file like this: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.Note: For development, the renderer process
index.html
file needs to reference your script code via<script type="module">
.Recommended project directory
Get started
Clone the electron-vite-boilerplate or use the 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 namedelectron.vite.config.js
inside project root. The most basic config file looks like this:You can also explicitly specify a config file to use with the
--config
CLI option (resolved relative tocwd
):Tips:
electron-vite
also supportsts
ormjs
config file.Config intellisense
Since
electron-vite
ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:Alternatively, you can use the
defineConfig
anddefineViteConfig
helper which should provide intellisense without the need for jsdoc annotations:Tips: The
defineViteConfig
exports fromVite
.Config reference
See vitejs.dev
Config presets
Build options for
main
:out\main
(relative to project root)node*
, automatically match node target ofElectron
. For example, the node target of Electron 17 isnode16.13
src\main\{index|main}.{js|ts|mjs|cjs}
(relative to project root), empty string if not foundcjs
electron
and all builtin modulesBuild options for
preload
:out\preload
(relative to project root)main
src\preload\{index|preload}.{js|ts|mjs|cjs}
(relative to project root), empty string if not foundcjs
main
Build options for
renderer
:src\renderer
(relative to project root)out\renderer
(relative to project root)chrome*
, automatically match chrome target ofElectron
. For example, the chrome target of Electron 17 ischrome98
src\renderer\index.html
(relative to project root), empty string if not foundfalse
, there is no need to polyfillModule Preload
for the Electron renderermain
Define option for
main
andpreload
In web development, Vite will transform
'process.env.'
to'({}).'
. This is reasonable and correct. But in nodejs development, we sometimes need to useprocess.env
, soelectron-vite
will automatically add config define field to redefine global variable replacements like this:Note: If you want to use these configurations in an existing project, please see the Vite plugin 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:
CLI options
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--outDir
: string, output directory (default: out)API
build
Type Signature:
Example Usage:
createServer
Type Signature:
Example Usage:
preview
Type Signature:
Example Usage:
InlineConfig
The InlineConfig interface extends Vite UserConfig with additional properties:
ignoreConfigWarning
: set tofalse
to ignore warning when config missingAnd omit
base
property because it is not necessary to set the base public path in Electron.resolveConfig
Type Signature:
Beta Was this translation helpful? Give feedback.
All reactions