How to add a new npm package to the renderer in Vite Electron Builder?

Since the renderer is a standard Vite project, install packages in the renderer package directory using npm or yarn. Ensure they are browser-compatible, as Node.js APIs are restricted to the preload script to avoid crashes.

Vite Electron Builder or electron-vite: which should I use?

Vite Electron Builder focuses on security best practices, a monorepo structure, and auto-updates out-of-the-box, while electron-vite is more lightweight. Choose based on whether you need built-in testing and CI/CD workflows versus a simpler setup.

Can I use Next.js with this Electron template?

No, the template is designed for Vite-based renderers. Next.js uses different bundling and server-side rendering, which isn't directly supported; you'd need significant modifications to integrate it with the monorepo.

How to configure auto-updates for a private repository or custom server?

The template defaults to GitHub Releases, but you can modify the electron-builder configuration in package.json to use other sources like S3 or private servers, following electron-builder's publish options documentation.

What's the best way to handle native Node.js modules in the renderer?

Native Node.js modules cannot be used directly in the renderer due to security restrictions. Export functions from the preload script using contextBridge, as shown in the README example for file system access, to safely expose capabilities.

Does this boilerplate support hot-reload for changes in the main process?

Hot-reload is primarily for the renderer via Vite. Changes in the main or preload processes require restarting the app, as Electron's main process doesn't support live reloading by default in this setup.

Open-Awesome

vite-electron-builder

MITTypeScriptv3.1.0-react.1765969622

A secure, lightweight boilerplate for building Electron applications with Vite, supporting multiple frontend frameworks.

GitHub

3.0k stars290 forks0 contributors

What is vite-electron-builder?

Vite Electron Builder is a secure boilerplate template for developing Electron desktop applications using Vite as the build tool. It provides a production-ready foundation with built-in security best practices, auto-update capabilities, and support for multiple frontend frameworks like Vue, React, Angular, and Svelte. The template solves the complexity of setting up a secure, modern Electron project from scratch.

Target Audience

Developers building cross-platform desktop applications with Electron who want a secure, minimal, and framework-agnostic starting point. It's ideal for those using Vite and TypeScript who need automated testing and CI/CD workflows.

Value Proposition

Developers choose this boilerplate because it enforces security best practices out-of-the-box, reduces initial setup time, and offers a lightweight, modular monorepo structure. Its auto-update configuration and multi-framework support provide flexibility without sacrificing performance or safety.

Overview

Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla

Use Cases

Best For

Creating secure Electron applications with built-in safety guidelines
Building desktop apps with Vite and TypeScript
Developing cross-platform apps that require auto-update functionality
Setting up a monorepo for Electron main, preload, and renderer logic
Integrating end-to-end testing with Playwright in Electron projects
Starting a new Electron project with Vue, React, Angular, or Svelte

Not Ideal For

Projects needing out-of-the-box UI components and styling libraries
Teams unfamiliar with monorepo management and configuration complexities
Applications where Electron's security overhead is unnecessary or overly restrictive
Developers seeking extensive community plugins and pre-built integrations without additional setup

Pros & Cons

Pros

Security-First Design

Follows Electron's latest security guides and best practices, using patched versions to minimize vulnerabilities, as highlighted in the architecture built for safety.

Multi-Framework Flexibility

Compatible with Vue, React, Angular, Svelte, or vanilla JS/TS via Vite, allowing easy frontend swaps without locking into a specific technology.

Production-Ready Infrastructure

Includes auto-update setup for GitHub Releases, Playwright for E2E testing on compiled apps, and pre-configured CI workflows for type checking and deployment.

Modular Architecture

Uses a monorepo with separate packages for main, preload, and renderer logic, enabling independent development and testing, as described in the project structure.

Cons

Limited Maintainer Support

The maintainer is affected by the war in Ukraine, reducing energy for updates and issue resolution, which could impact long-term reliability.

Steeper Initial Setup

The monorepo structure and interactive renderer integration via 'npm run init' add complexity compared to simpler, single-package templates.

Minimal Out-of-the-Box Features

Lacks pre-configured UI libraries, state management, or advanced tooling, requiring additional work for full application development beyond the core setup.

Frequently Asked Questions

Related Projects

electron-react-boilerplate

A Foundation for Scalable Cross-Platform Apps

Stars24,240

Forks4,004

Last commit8 days ago

electron-quick-start

Clone to try a simple Electron app

Stars11,465

Forks4,919

Last commit8 days ago

angular-electron

Ultra-fast bootstrapping with Angular and Electron :speedboat:

Boilerplate application for Electron runtime

Stars3,124

Forks473

Last commit3 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub