create-electron-vite quickstart, with AI coding

The fastest way to start an Electron desktop app on Windows today is the official scaffold create-electron-vite: one command and you have a project with TypeScript, hot reload, and packaging config in place. This is a hands-on record: how to create the project, which issues the template ships with, and how to bring AI coding agents into the workflow. Tested on Windows 11 + Node v24.15.0 + create-electron-vite 0.7.1.

The why behind those four issues, plus the full fixes, lives in the companion post: "Four create-electron-vite build issues and fixes" — worth bookmarking both.

Create the project with one command: npm create electron-vite

npm create electron-vite@latest <project-name>

Answer two prompts:

1. Package name: defaults to the directory name — press Enter
2. Project template: Vue / React / Vanilla (arrow keys; pick the one with -ts for TypeScript)

The key files it generates:

├── electron/            # main process + preload (all Node-side code)
│   ├── main.ts          # creates the window, loads the page
│   └── preload.ts       # exposes ipcRenderer via contextBridge
├── src/                 # renderer process (React/Vue page code)
├── vite.config.ts       # electron({ main, preload, renderer }) three-part plugin config
└── electron-builder.json5   # packaging config (appId, files, NSIS, etc.)

Three core scripts:

npm install     # install deps (the Electron runtime downloads too)
npm run dev     # dev window with renderer hot reload
npm run build   # type-check → vite build → electron-builder produces installers in release/

Two pieces of context to set the right expectations:

• The command actually runs create-electron-vite (binary cev, currently 0.7.1). It is purely interactive — no --template-style non-interactive flags yet.
• It works by copying an official Vite web template, then layering the Electron side on top (electron/main.ts, electron/preload.ts, electron-builder.json5, plus an electron-builder call appended to the build script). So what you get is Vite + vite-plugin-electron + electron-builder — not the electron-vite framework by alex8088.

For scale (measured): a stock template build produces a 4.9 MB asar (React) or 14.1 MB (Vue); after the dependency partitioning from the companion post, both drop to 0.1 MB — a pitfall worth fixing right after scaffolding.

Fix the template's known issues before you write code

The template ships with four known issues — know them before you start:

1. An unused require declaration in electron/main.ts makes the first npm run build fail with TS6133 on React / Vue / Vanilla alike;
2. appId / productName in electron-builder.json5 are still YourAppName placeholders;
3. .gitignore is missing dist-electron/ and release/ (the scaffold's auto-patch silently fails on CRLF line endings);
4. The packaging stage downloads the Electron binary from GitHub, which is unreliable from some networks.

The root causes and concrete fixes are laid out in the companion post: "Four create-electron-vite build issues and fixes".

Wire in AI coding

Open the project directory with an agent-style CLI such as ZCode or Claude Code, and you are coding:

cd <project-name>
zcode        # or claude

One caveat: the scaffold does not initialize git (as of 0.7.1 it only generates a .gitignore file — the repo is on you). So the first thing to do after opening it is have the AI set up your version-control baseline:

Initialize a git repository, add dist-electron/ and release/ to .gitignore, and make the initial commit.

With that initial commit as a baseline, every round of AI changes can be diffed and reverted — the precondition for letting an AI make sweeping changes.

Versions used

Electron desktop development is well-trodden ground for us — every pitfall in this article included. If you're planning a desktop app, let's talk.