New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More โ†’
Socket
Sign inDemoInstall
Socket

vite-plugin-electron

Package Overview
Dependencies
Maintainers
1
Versions
79
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-electron

Electron ๐Ÿ”— Vite

0.11.1
Source
npm
Version published
Weekly downloads
30K
34.53%
Maintainers
1
Weekly downloads
ย 
Created
Source

vite-plugin-electron

Electron ๐Ÿ”— Vite

NPM version NPM Downloads GitHub Discord

English | ็ฎ€ไฝ“ไธญๆ–‡

  • ๐Ÿš€ Fully compatible with Vite and Vite's ecosystem (Based on Vite)
  • ๐ŸŽญ Flexible configuration
  • ๐Ÿฃ Few APIs, easy to use
  • ๐Ÿ”ฅ Hot restart

vite-plugin-electron.gif

Install

npm i vite-plugin-electron -D

Examples

Usage

vite.config.ts

import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
    }),
  ],
}

You can use process.env.VITE_DEV_SERVER_URL when the vite command is called 'serve'

// electron main.js
const win = new BrowserWindow({
  title: 'Main window',
})

if (process.env.VITE_DEV_SERVER_URL) {
  win.loadURL(process.env.VITE_DEV_SERVER_URL)
} else {
  // load your file
  win.loadFile('yourOutputFile.html');
}

API (Define)

electron(config: Configuration | Configuration[])

export interface Configuration {
  /**
   * Shortcut of `build.lib.entry`
   */
  entry?: import('vite').LibraryOptions['entry']
  vite?: import('vite').InlineConfig
  /**
   * Triggered when Vite is built every time -- `vite serve` command only.
   * 
   * If this `onstart` is passed, Electron App will not start automatically.  
   * However, you can start Electroo App via `startup` function.  
   */
  onstart?: (this: import('rollup').PluginContext, options: {
    /**
     * Electron App startup function.  
     * It will mount the Electron App child-process to `process.electronApp`.  
     * @param argv default value `['.', '--no-sandbox']`
     */
    startup: (argv?: string[]) => Promise<void>
    /** Reload Electron-Renderer */
    reload: () => void
  }) => void | Promise<void>
}

JavaScript API

vite-plugin-electron's JavaScript APIs are fully typed, and it's recommended to use TypeScript or enable JS type checking in VS Code to leverage the intellisense and validation.

  • Configuration - type
  • defineConfig - function
  • resolveViteConfig - function, Resolve the default Vite's InlineConfig for build Electron-Main
  • withExternalBuiltins - function
  • build - function
  • startup - function

Example

build(
  withExternalBuiltins( // external Node.js builtin modules
    resolveViteConfig( // with default config
      {
        entry: 'foo.ts',
        vite: {
          mode: 'foo-mode', // for .env file
          plugins: [{
            name: 'plugin-build-done',
            closeBundle() {
              // Startup Electron App
              startup()
            },
          }],
        },
      }
    )
  )
)

How to work

It just executes the electron . command in the Vite build completion hook and then starts or restarts the Electron App.

Recommend structure

Let's use the official template-vanilla-ts created based on create vite as an example

+ โ”œโ”€โ”ฌ electron
+ โ”‚ โ””โ”€โ”€ main.ts
  โ”œโ”€โ”ฌ src
  โ”‚ โ”œโ”€โ”€ main.ts
  โ”‚ โ”œโ”€โ”€ style.css
  โ”‚ โ””โ”€โ”€ vite-env.d.ts
  โ”œโ”€โ”€ .gitignore
  โ”œโ”€โ”€ favicon.svg
  โ”œโ”€โ”€ index.html
  โ”œโ”€โ”€ package.json
  โ”œโ”€โ”€ tsconfig.json
+ โ””โ”€โ”€ vite.config.ts

Be aware

  • ๐Ÿšจ By default, the files in electron folder will be built into the dist-electron
  • ๐Ÿšจ Currently, "type": "module" is not supported in Electron
  • ๐Ÿšจ In general, Vite may not correctly build Node.js packages, especially C/C++ native modules, but Vite can load them as external packages. So, put your Node.js package in dependencies. Unless you know how to properly build them with Vite.
    electron({
      entry: 'electron/main.ts',
      vite: {
        build: {
          rollupOptions: {
            // Here are some C/C++ plugins that can't be built properly.
            external: [
              'serialport',
              'sqlite3',
            ],
          },
        },
      },
    }),
    

Keywords

vite

FAQs

Package last updated on 19 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts