Electron + Vite Template

A minimal, modern Electron application template built with Vite for fast development and TypeScript support.

Features

• ⚡ Vite for fast development and hot reload
• 🔷 TypeScript support for both main and renderer processes
• 🔒 Security best practices with context isolation and preload scripts
• 🛠️ Concurrent development - Vite dev server and Electron run together
• 📦 Production builds with electron-builder
• 🎯 Clean project structure with separate configs for main/renderer

Project Structure

├── electron/                 # Electron main process
│   ├── main.ts              # Main process entry point
│   ├── preload.ts           # Preload script for secure IPC
│   └── tsconfig.json        # TypeScript config for main process
├── src/                     # Renderer process (web app)
│   ├── main.ts              # Renderer entry point
│   └── style.css            # App styles
├── dist-electron/           # Compiled Electron files (auto-generated)
├── dist-renderer/           # Compiled renderer files (auto-generated)
├── index.html               # HTML template
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript config for renderer
└── package.json             # Dependencies and scripts

Getting Started

Use as an npm/bun template package

Generate a fresh app from this template without cloning:

npx electron-vite-template my-app

or with Bun:

bunx electron-vite-template my-app

Then run:

cd my-app
bun install
bun run dev

Prerequisites

• Node.js (v16 or higher)
• Bun

Installation

1. Clone or download this template
2. Install dependencies:

bun install

Publish to npm

When you want to publish a new version:

bun install
bun run build
npm publish --access public

Development

Start the development server with hot reload:

bun run dev

This command:

1. Compiles the Electron main process TypeScript files
2. Starts the Vite dev server on http://localhost:5173
3. Launches Electron which loads the dev server
4. Opens developer tools automatically

Building

Build the renderer process only:

vite build

Build the Electron main process:

bun run build:electron

Build everything for production:

bun run build

Create distributable packages:

bun run dist

How It Works

Development Mode Detection

The template automatically detects whether to run in development or production mode by checking if the built renderer files exist:

const rendererPath = path.join(__dirname, '../dist-renderer/index.html')
const isDev = !existsSync(rendererPath)

if (isDev) {
  mainWindow.loadURL('http://localhost:5173')  // Vite dev server
} else {
  mainWindow.loadFile(rendererPath)            // Built files
}

Security Setup

The template follows Electron security best practices:

• Context Isolation: Enabled to isolate the main world from the isolated world
• Node Integration: Disabled in renderer for security
• Preload Script: Used for secure communication between main and renderer processes

webPreferences: {
  nodeIntegration: false,
  contextIsolation: true,
  preload: path.join(__dirname, 'preload.js')
}

TypeScript Configuration

Two separate TypeScript configurations:

• Main Process (electron/tsconfig.json): Targets CommonJS for Node.js environment
• Renderer Process (tsconfig.json): Targets ESNext for modern browser environment

Vite Configuration

Configured for Electron with:

• Base path set to ./ for relative asset loading
• Output directory set to dist-renderer
• Development server on port 5173

Scripts

• bun run dev - Start development with hot reload
• bun run build - Build for production
• bun run build:electron - Compile Electron main process only
• bun run dist - Create distributable packages
• bun run preview - Preview production build

Adding Features

IPC Communication

Add methods to the preload script for secure communication:

// electron/preload.ts
contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  saveFile: (data: string) => ipcRenderer.invoke('file:save', data)
})

Handle in main process:

// electron/main.ts
import { ipcMain, dialog } from 'electron'

ipcMain.handle('dialog:openFile', async () => {
  const result = await dialog.showOpenDialog({})
  return result.filePaths
})

Adding Dependencies

For renderer process (web technologies):

bun add package-name

For main process (Node.js):

bun add package-name
bun add -d @types/package-name  # if TypeScript types needed

Customization

• Modify src/main.ts and src/style.css for your app's UI
• Update electron/main.ts for main process logic
• Configure vite.config.ts for build customization
• Update package.json for app metadata and build settings

License

MIT