A modern React template combining TanStack Router for web development with Electron for desktop applications. Built with TypeScript, Tailwind CSS, and Shadcn/ui components.
- TanStack Router - File-based routing with type-safe navigation
- Electron - Cross-platform desktop app support
- vite-plugin-electron - Seamless Electron integration with Vite
- Tailwind CSS v4 - Modern utility-first styling
- Shadcn/ui - Beautiful, accessible component library
- TypeScript - End-to-end type safety
- React 19 - Latest React features
pnpm installRun the web version in development mode:
pnpm devThe application will be available at http://127.0.0.1:5555
Run the Electron desktop application:
pnpm electron:devThis compiles both the web app and Electron processes, then launches the desktop application.
Build for web:
pnpm buildBuild and package Electron app for distribution:
pnpm electron:buildThis creates distributable packages in the release/ directory for Windows, macOS, and Linux.
After building, run the packaged Electron app:
pnpm electronetst/
├── electron/
│ ├── main.ts # Electron main process
│ └── preload.ts # Preload script (IPC bridge)
├── src/
│ ├── components/ # React components
│ │ └── ui/ # Shadcn/ui components
│ ├── routes/ # File-based routes
│ ├── lib/ # Utility functions
│ ├── main.tsx # React entry point
│ ├── router.tsx # TanStack Router config
│ └── styles.css # Global styles
├── public/ # Static assets
├── index.html # HTML template
├── vite.config.ts # Vite + Electron plugin config
└── package.json
| Script | Description |
|---|---|
pnpm dev |
Start web dev server on 127.0.0.1:5555 |
pnpm electron:dev |
Start Electron in development mode |
pnpm build |
Build for web production |
pnpm electron:build |
Build + package Electron app |
pnpm electron |
Run built Electron application |
pnpm test |
Run tests with Vitest |
pnpm lint |
Lint code with ESLint |
pnpm format |
Format code with Prettier |
pnpm check |
Format and lint all files |
The Electron configuration is handled by vite-plugin-electron in vite.config.ts:
- Main process:
electron/main.ts- Runs in Node.js environment - Preload script:
electron/preload.ts- Secure bridge between main and renderer - Renderer: Uses the same TanStack Router app as web
Both web and Electron development servers run on 127.0.0.1:5555 to avoid network restrictions on localhost.
The project uses electron-builder for packaging. Configuration is in package.json under the build field:
- Windows: NSIS installer (x64)
- macOS: DMG package (x64, arm64)
- Linux: AppImage (x64)
Build artifacts are created in the release/ directory.
This project uses Vitest for testing:
pnpm testThis project uses Tailwind CSS v4 for styling. The configuration is handled by the @tailwindcss/vite plugin.
Add new Shadcn components:
pnpm dlx shadcn@latest add [component-name]Available components: https://ui.shadcn.com/
This project uses TanStack Router with file-based routing. Routes are defined in src/routes/:
src/routes/__root.tsx- Root layoutsrc/routes/index.tsx- Home page (/)- Create new routes by adding files in
src/routes/
Use the Link component for navigation:
import { Link } from '@tanstack/react-router'
<Link to="/about">About</Link>TanStack Router provides multiple ways to fetch data:
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/posts')({
loader: async () => {
const res = await fetch('https://api.example.com/posts')
return res.json()
},
component: Posts
})The preload script exposes safe IPC methods to the renderer process:
// Available in renderer via window.electronAPI
window.electronAPI.sendMessage('channel', data)
window.electronAPI.on('channel', callback)
window.electronAPI.invoke('channel', ...args)MIT
Contributions are welcome! Please feel free to submit a Pull Request.
Built with TanStack Router and Electron