Building an Offline PC Lottery Application with Electron, Vite, and Vue

Background : The company needed a simple, offline lottery application that could run on any PC for events with over 60,000 participants. An existing web‑based open‑source lottery project was chosen as the base and adapted for desktop use.

Requirements included support for various identifier formats (numbers, letters, phone numbers, names, IDs), clipboard‑based list import, draggable UI elements, pre‑selected winners, high‑performance draws, non‑repeating winners, dynamic prize addition, background media, automatic backup of results, customizable fonts and layout, and keyboard shortcuts.

Technical selection : To meet the tight timeline, the author selected two open‑source repositories – electron‑vite‑vue and web lottery – and combined them using Vue 3, Vite, and Electron.

Running the original repositories : After cloning the projects, the author verified they could be started locally, noting that the electron‑vite‑vue template required a custom setup because it was not previously encountered.

Modifying the web code and integrating into Electron :

Page splitting and component addition (background image, prize display, control buttons, winner list, and several dialog components).

Directory restructuring to fit the Electron project layout.

Extensive modifications to the original web lottery code to adapt to the desktop environment.

Migration steps :

I. Static assets

Static resources were copied into the Electron project and referenced in index.html . Images were stored locally to ensure offline operation.

II. Electron main process

The original JavaScript code was kept (instead of converting to TypeScript) and required adjustments such as replacing require with import where appropriate. The __dirname variable was re‑implemented for ESM:

import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));

III. Front‑end code

File structure was aligned with the Vue/Vite expectations, and numerous copy‑paste operations were performed, followed by fixing import paths and resource loading errors.

Typical errors and fixes included:

Missing resources – corrected by adjusting paths and adding them to the build configuration.

TypeScript compilation issues – resolved by enabling allowJs in tsconfig.json :

"compilerOptions": {
  "allowJs": true // enable JS files in TS project
}

IV. Packaging

Using electron‑builder , the author fixed application name and icon settings in electron-builder.json5 , added extraResources to expose read/write directories, and adjusted paths after packaging.

After addressing all build errors, the final packaged application ran successfully, demonstrating the complete lottery workflow with animated GIFs of the draw process.

Conclusion : The project showcases a rapid, pragmatic approach to turning a web lottery tool into a fully offline desktop application, highlighting common migration challenges and practical solutions.