How to Use Vite with Electron?

Using Vite with Electron allows you to build modern desktop applications with a fast development experience. Vite provides a speedy development server and build tooling, while Electron helps you create cross-platform desktop applications. Here’s a step-by-step guide to setting up Vite with Electron, including complete setup and code examples.

This guide walks you through setting up a Vite application with Electron, enabling you to create modern desktop apps using web technologies. You'll learn to initialize a Vite project, configure Electron with a main process, and create a simple HTML component. The steps include installing dependencies, configuring build settings, and running your application in development mode. By the end, you’ll have a basic Electron app displaying a simple greeting message.

Steps to Create Vite Application and use Vite with Electron

Step 1: Create a Vite Project

First, you'll need to create a new Vite project. Open your terminal and run:

npm create @quick-start/electron@latest

Then, select the following options:

 Project name:my-electron-app 

Need to install the following packages:
@quick-start/create-electron@1.0.24
Ok to proceed? (y) y
√ Project name: ... my-app-electron
√ Select a framework: » vue
√ Add TypeScript? ... No / Yes
√ Add Electron updater plugin? ... No / Yes
√ Enable Electron download mirror proxy? ... No / Yes

Project Structure:

Step 2: Navigate to the Project Directory

Move into your newly created project directory:

cd my-electron-app

Step 3: Install Dependencies

Install the necessary dependencies for Vite and Electron:

npm install

Updated Dependencies:

  "dependencies": {
    "@electron-toolkit/preload": "^3.0.1",
    "@electron-toolkit/utils": "^3.0.0"
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config": "^1.0.2",
    "@rushstack/eslint-patch": "^1.10.3",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "electron": "^31.0.2",
    "electron-builder": "^24.13.3",
    "electron-vite": "^2.3.0",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.26.0",
    "prettier": "^3.3.2",
    "vite": "^5.3.1",
    "vue": "^3.4.30"
  }

Step 4: Create the Main Electron File

Create a new file named main.js in your project root. This file will contain the main Electron process code:

JavaScript

// src/rendere/src/main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
    },
  });
// Adjust port if needed
  mainWindow.loadURL('http://localhost:3000'); 
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

Step 5: Update the Vite Configuration

Update your vite.config.js to allow Electron to find your build files correctly. Ensure it includes the build configuration for Vite.

JavaScript

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist',
    emptyOutDir: true,
  },
});

Step 6: Update package.json Scripts

Modify the scripts section in your package.json to include commands for building and running the application:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "start": "electron ."
}

Step 7: Create a Simple Component

You can create a simple HTML component to display text. Modify your index.html:

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
  <title>Vite + Electron</title>
</head>

<body>
  <div id="app">
    <h1>Hello, Electron with Vite!</h1>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

Step 8: Run the Application

Start the Vite development server:

npm run dev

In a new terminal window, start the Electron app:

npm run start

Output: