SoFunction
Updated on 2025-04-05

Electron-vite New generation electron development and construction tools

Preface

Thanks toViteExcellent front-end development experience, more and moreElectronThe project also began to apply it to build development. Looking through various community resources, you can find many Electron development templates built on Vite, but they all have some common problems:

  • The configuration is relatively complex and cumbersome (configured separately for main, preload and renderer)
  • Need auxiliary scripts to cooperate with compilation and development
  • Can't learn from one example and choose front-end frameworks independently (vue, react, svelte,...)

Facing these problems, we need to have an understanding of Electron. Electron is a desktop application framework based on Chromium and , which means that compiling and building tools need to process code in both the environment and the browser. This is the main reason for the complexity of Electron development and construction work.

Knowledge points

  • The main process and preload scripts need to be built based on the cjs modular standard and run in the node environment
  • Rendering processes, usually integrated with modern front-end frameworks such as react, are built based on iife modular standards, and run in the browser.
  • Enable node integration in Electron, and can write code based on the CJS modular standard throughout the process. Although it does not require compilation and construction, it is not conducive to utilizing modern front-end frameworks and will also face serious performance and security issues.
  • Builds based on the esm standard are not compiled. Although node itself is supported, Electron does not support it. This is also a work in subsequent versions of Electron.

What is electron-vite

electron-viteIt's one withViteIntegratedElectronBuild tools. Developers do not need to pay too much attention to configuration. No matter which front-end framework they choose, they can easily complete the construction, improving the development and construction efficiency of Electron.

characteristic

  • ⚡️Used in the same way as Vite
  • 🔨The main process/rendering process/preload scripts are built using Vite
  • 📃Unify all configurations and merge them into one file
  • 📦Preset build configuration, no need to pay attention to configuration
  • 🚀Support hot update of rendering process (HMR)

Install

npm i electron-vite -D

Development & Compilation

Installedelectron-viteIn projects, you can use them directlynpx electron-viteRun, you can alsoAdd npm scripts to the file:

{
  "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 thermal updates (HMR), environment variables (ELECTRON_RENDERER_URL) to decide whether the Electron window loads the local page or the remote page.

function createWindow() {
  // Create the browser window
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: (__dirname, '../preload/')
    }
  })

  // Load the remote URL for development or the local html file for production
  if (! && ['ELECTRON_RENDERER_URL']) {
    (['ELECTRON_RENDERER_URL'])
  } else {
    ((__dirname, '../renderer/'))
  }
}

Notice: In development, rendering processThe file needs to be passed<script type="module">Reference script.

Recommended Project Catalog

├──src
|  ├──main
|  |  ├──
|  |  └──...
|  ├──preload
|  |  ├──
|  |  └──...
|  └──renderer
|     ├──src
|     ├──
|     └──...
├──
└──

Start learning

  • cloneelectron-vite-boilerplate (/alex8088/electron-vite-boilerplate) Project Study
  • passcreate-electronScaffolding to build project learning
npm init @quick-start/electron

Configuration

Configuration File

When running on command lineelectron-viteWhen the project root directory is automatically resolved, the name namedconfiguration file. The most basic configuration file is as follows:

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

You can explicitly specify a configuration file (resolved relative to the cwd path) through the --config command line option:

electron-vite --config

hint: electron-viteSupportedtsormjsconfiguration file.

Smart configuration tips

becauseelectron-viteIt comes with Typescript type, so you can achieve smart tips through the cooperation of IDE and jsdoc:

/**
 * @type {import('electron-vite').UserConfig}
 */
const config = {
  // ...
}

export default config

You can also usedefineConfig and defineViteConfigTool functions, so you can get type prompts without using jsdoc annotations:

import { defineConfig, defineViteConfig } from 'electron-vite'

export default defineConfig({
  main: {
    // ...
  },
  preload: {
    // ...
  },
  renderer: defineViteConfig(({ command, mode }) => {
    // conditional config use defineViteConfig
    // ...
  })
})

hint: defineViteConfigfromViteExport in.

Preset configuration

Presets of compile item based on main process:

  • outDir: out\main(Relative to the root directory)
  • target: node*, automatic matchingElectronofnodeBuild the target, such as Electron 17node16.13
  • : src\main{index|main}.{js|ts|mjs|cjs}(Relative to the root directory), if not found, it will be empty
  • : cjs
  • : electronand all built-in node modules (will be automatically merged if the user has configured an external module ID)

Compilation item presets based on preload script:

  • outDir: out\preload(Relative to the root directory)
  • target: Same main process
  • : src\preload{index|preload}.{js|ts|mjs|cjs}(Relative to the root directory), if not found, it will be empty
  • : cjs
  • : Same main process

Compilation item presets based on rendering process:

  • root: src\renderer(Relative to the root directory)
  • outDir: out\renderer(Relative to the root directory)
  • target: chrome*, automatic matchingElectronofchromeBuild the target. For example, Electron 17 ischrome98
  • : src\renderer\(Relative to the root directory), if not found, it will be empty
  • polyfillModulePreload: false, no need to polyfill for the rendering processModule Preload
  • : Same main process

hint: If you want to use these preset configurations in your existing projects, you can use Vite's plug-invite-plugin-electron-config (/alex8088/vi…)

Configuration issues

How should Electron be configured if it has multiple windows?

When an Electron application has multiple windows, it means that there may be multiple html pages and preload scripts, and you can modify your configuration file as follows:

export default {
  main: {},
  preload: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/preload/'),
          webview: resolve(__dirname, 'src/preload/')
        }
      }
    }
  },
  renderer: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/renderer/'),
          webview: resolve(__dirname, 'src/renderer/')
        }
      }
    }
  }
}

Conclusion

The project is now open source. Interested friends are welcome to participate in the contribution and submit PR or feedback issue, and provide star support.

/alex8088/electron-vite

This is the article about the new generation of electron-vite electron development and construction tools. For more related electron-vite construction tools, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!