Paul Pietzko

Modern web tooling makes it surprisingly easy to build cross-platform desktop apps. By combining Electron, React, Vite, and TypeScript, you can create fast desktop applications using familiar web technologies.

In this guide, we’ll start with a fresh Vite React project and turn it into an Electron desktop app step by step.

1. Create the Vite Project First create a new Vite React + TypeScript project (or any other framework you want):

npm create vite@latest my-electron-app At this point your package.json looks like this:

{ "name": "logier", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^19.2.0", "react-dom": "^19.2.0" }, "devDependencies": { "@eslint/js": "^9.39.1", "@types/node": "^24.10.1", "@types/react": "^19.2.7", "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.1", "eslint": "^9.39.1", "eslint-plugin-react-hooks": "^7.0.1", "eslint-plugin-react-refresh": "^0.4.24", "globals": "^16.5.0", "typescript": "~5.9.3", "typescript-eslint": "^8.48.0", "vite": "^7.3.1" } } 2. Install Electron and Helper Tools Now install Electron and a few tools that make development smoother.

npm install electron concurrently wait-on cross-env These packages solve common problems:

Electron → runs the desktop application

concurren

...