vtest

vtest is an Electron Forge boilerplate that combines Vite, TypeScript, Electron Forge, SvelteKit, and Tailwind CSS into one desktop application starter, giving you a working Electron main process, preload script, and SvelteKit renderer out of the box.

What is vtest?

vtest is a GitHub template project created by codec (repository vtest) that scaffolds an Electron desktop application with a SvelteKit renderer. It takes a fresh clone and produces a runnable Electron app with example main, preload, and renderer code, plus a custom build system that compiles TypeScript, bundles with Vite, and packages platform-specific executables through Electron Forge. The renderer uses SvelteKit with adapter-static, and styling is set up with Tailwind CSS. The template ships with heavy inline comments and explanatory links throughout the source.

What makes vtest stand out?

The template does not use the official @electron-forge/plugin-vite; instead it includes a custom Electron Forge Vite plugin at build-plugins/forge-plugin.vite.ts with full configuration visible. This plugin starts Vite renderer servers for hot reloading in development, runs Vite builds for main and preload with watch mode, and passes renderer URLs through Vite define. During packaging, it calls @electron/rebuild itself, runs all Vite builds in a separate process, then deletes every file except the .vite folder and package.json before Electron Forge bundles the app. It also registers a custom app:// protocol using Electron's protocol.handle and protocol.registerSchemesAsPrivileged so the built renderer files are served in the packaged app. For native node addons, the template includes a Vite plugin (build-plugins/vite-plugin.nativeNodeFile.ts) that redirects imports to bundled .node files, and it documents how to wire a C++ addon built with node-gyp and node-addon-api. The source is licensed as MIT for the Forge and SvelteKit template parts and CC0 1.0 for codec's additions.

Who should use vtest?

Electron developers who want a SvelteKit-powered renderer and are comfortable reading build-plugin code. Developers who need a customizable alternative to the official Electron Forge Vite plugin, because this template exposes the entire build pipeline. TypeScript users building cross-platform desktop apps who also want Tailwind CSS for styling. Anyone experimenting with custom protocols or native addons in Electron will find concrete working examples.

Use cases

• Desktop app developers: scaffold a new Electron app with SvelteKit SPA routing and Tailwind styling by cloning the repo and running npm install and npm run start.
• Build-tooling tinkerers: study the custom Forge plugin in build-plugins/forge-plugin.vite.ts to learn how to orchestrate Vite servers, watch builds, and Electron restarts.
• Native addon authors: follow the template's documented example to bundle a C++ node addon into the Electron main process via the included nativeNodeFile Vite plugin.

How does vtest work?

Clone the repository, run npm install, then npm run start to launch in dev mode with hot reloading; the first run generates the .svelte-kit folder, which clears TypeScript editor warnings. Running npm run package copies the project, rebuilds native addons if any, builds all Vite targets, strips extraneous files, and produces an Electron Forge package. The SvelteKit configuration uses adapter-static to emit the renderer to .vite/renderer/main_window/, and the main process serves that folder through the app:// protocol.

FAQ

Does vtest use SvelteKit prerendering?

By default the template does not recommend prerendering; it suggests setting prerender and ssr both to false for SPA behavior, or both to true if you want prerendered HTML. Prerendering at build time means Electron APIs and browser-dependent state are not available in those pages.

Is vtest free to use?

Yes. The template is open source: the Electron Forge Vite TypeScript template and create-svelte portions are MIT licensed, and codec's original additions are marked CC0 1.0, effectively public domain. Logo files come from svgl.app.

How do I add a native node addon?

Install node-gyp and node-addon-api, add a binding.gyp and a C++ source file, then register the addon in vite.main.config.ts using the included nativeNodeFile plugin. Rebuilds run via @electron/rebuild automatically during npm run start and npm run package.