Electron JS, Vite & Better SQLite: Complete Tutorial Build a Desktop App From Scratch to Installer

Video Description

In this full course, we build a production-ready Desktop Application using Electron JS, Vite, and SQLite (better-sqlite3). You will learn how to create a local database app with full CRUD capabilities (Create, Read, Update, Delete) and handle IPC (Inter-Process Communication) securely. By the end of this tutorial, you won’t just have a working app; you will know how to solve common build errors, handle native Node.js dependencies, and package your project into a professional Windows Installer (.exe) to share with friends. 📌 What we cover in this tutorial: - Project Setup: Scaffolding an app with Electron Forge and the Vite template. - Database Logic: Using better-sqlite3 to save, read, and delete tasks locally. - IPC Bridge: Connecting the Front End (UI) to the Back End (Database) securely. - Real-world Coding: Debugging common errors, handling version mismatches, and configuring Vite for native modules. Distribution: How to build and package your app into an installable file. 🛠️ Tech Stack: - Node.js - Electron / Electron Forge - SQLite (better-sqlite3) - HTML/CSS/JavaScript 🕛 Timestamps: 00:00 - Intro: Building a Local Desktop App (Electron JS + SQLite Database) 01:21 - Project Setup: Electron Forge, Vite Template & Boilerplate 02:53 - Installing Native Dependencies (better-sqlite3) 03:23 - Error Fix: node-gyp rebuild failed & V8 Deprecation 04:43 - Skip to here; if you do not get an error 05:15 - Browser Window Config: "Always on Top" & Dimensions 05:50 - Frontend UI: HTML Structure for To-Do App 08:04 - File System: Accessing userData Path & Persistent Storage 09:21 - Database Setup: Connecting SQLite & Enabling WAL Performance Mode 10:19 - SQL Schema: Creating Tables with db.exec 11:16 - SQL Data Types: Primary Key, Auto Increment, Integer 12:16 - Main Process: Initializing Database on App Ready 13:25 - Vite Build Error: "Could not dynamically require" (Rollup Issue) 13:43 - Vite Config Fix: Externalizing Native Modules (better-sqlite3) 14:32 - Debugging: Viewing Data with DB Browser for SQLite 15:26 - CRUD Create: SQL Insert Statement & Preventing SQL Injection 16:58 - CRUD Delete: SQL Delete Statement & info.changes 17:36 - CRUD Update: SQL Update Statement (Mark Complete) 18:27 - CRUD Read: SQL Select Query (Get All Tasks) 19:28 - Architecture: IPC (Inter-Process Communication) Explained 20:02 - Backend API: ipcMain.handle & Asynchronous Handlers 24:04 - Cleanup: Closing Database Connection on App Quit 25:21 - Registering IPC Listeners in Main.js 25:49 - Security: Preload Scripts & Context Isolation 26:13 - Context Bridge: Exposing Safe APIs to Frontend 27:27 - Frontend API: ipcRenderer.invoke & Promises 29:38 - Renderer Logic: DOM Manipulation & Event Listeners 30:33 - Connecting UI to DB: Handling "Add Task" Events 32:42 - Rendering Data: Fetching & Displaying List Items 36:12 - Checkbox Logic: Boolean Conversion & State Management 38:26 - Delete Logic: Removing Items from UI & DB 41:41 - UX State Management: Refreshing the UI after Updates 43:25 - Final Polish: Disabling DevTools 43:34 - Menu Bar: Removing Default Electron Menu 45:03 - Distribution: Building the App (npm run make) 46:08 - Build Error Fix: "Cannot find module" (Native Bindings/ASAR) 48:11 - Forge Config: Fixing Native Dependencies in Production 48:52 - Testing the Portable Executable (.exe) 49:44 - Testing the Windows Installer (Setup.exe) 50:09 - Final Demo: Persistence & Desktop Shortcut #ElectronJS #Javascript #SQLite #NodeJS