Electron TanStack Router

A boilerplate Electron desktop application built with React, TanStack Router, and TanStack Query.

Features an embedded PostgreSQL database (Pglite), authentication system, and a full-stack architecture with IPC communication between Electron main and renderer processes.

Tech Stack

• Framework: Electron + React 19 + Vite
• Routing: TanStack Router with file-based route generation
• Data Fetching: TanStack Query (React Query)
• Database: Drizzle ORM with Pglite (embedded PostgreSQL)
• Styling: Tailwind CSS + Radix UI
• Validation: Zod
• Build: Electron Forge

Features

• Desktop application with native window management
• File-based routing with automatic route tree generation
• Embedded PostgreSQL database (no external server required)
• Authentication system with session management
• Dashboard with users, invoices, and posts management
• Auto-update support
• IPC communication between main and renderer processes
• Type-safe database schema and validation

Project Structure

electron-tanstack-router/
├── src/
│   ├── main/                    # Electron main process
│   │   ├── db/                  # Database schema and connection
│   │   ├── features/            # Business logic (auth, etc.)
│   │   ├── window/              # Window management
│   │   ├── config/              # App configuration
│   │   ├── menu.ts              # Application menu
│   │   ├── main.ts              # Entry point
│   │   └── update/              # Auto-update logic
│   ├── preload/                 # Preload scripts for IPC
│   │   ├── modules/             # Exposed APIs
│   │   └── services/            # Bridge services
│   └── renderer/                # React UI (renderer process)
│       ├── routes/              # File-based routes
│       ├── components/          # React components
│       ├── lib/                 # Utilities and configurations
│       └── providers/           # Context providers
├── forge.config.ts              # Electron Forge configuration
├── drizzle.config.ts            # Drizzle configuration
├── tsr.config.json              # TanStack Router CLI config
└── package.json

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

npm install

Development

Run the development server with hot module replacement:

npm run dev

This will:

1. Watch routes for changes (via tsr watch)
2. Start Vite dev server
3. Enable hot module replacement

Building

Build the application for production:

npm run build

Packaging

Package the application for distribution:

npm run package

Or create installers:

npm run make

Available Scripts

Command	Description
npm run dev	Start development server with route watching
npm run build	Build production bundles
npm run generate-routes	Generate TanStack Router route tree
npm run watch-routes	Watch routes directory for changes
npm run generate-schema	Generate Drizzle migrations
npm run sync-schema	Push schema changes to database
npm run start	Start Electron app with route watcher
npm run package	Package app for distribution
npm run make	Create installers
npm run lint	Run ESLint

Database

The application uses Pglite, an embedded PostgreSQL implementation that runs in the main process. Database schema is managed via Drizzle ORM.

To push schema changes:

npm run sync-schema

To generate migrations:

npm run generate-schema

API Routes

Backend API routes are registered in src/main/features/ :

• /api/auth/* - Authentication endpoints (login, register, logout, session)

API routes are served via a custom IPC handler in the preload layer.

License

MIT