Skip to content

feat: add react tanstack router template#364

Open
miguedev1047 wants to merge 1 commit intoblackboardsh:mainfrom
miguedev1047:react-tanstack-router-template
Open

feat: add react tanstack router template#364
miguedev1047 wants to merge 1 commit intoblackboardsh:mainfrom
miguedev1047:react-tanstack-router-template

Conversation

@miguedev1047
Copy link
Copy Markdown

Electrobun + React + TanStack Router + Tailwind Template

Electrobun template with a production-ready frontend stack and typed RPC between the main process and the renderer out of the box.

Stack

  • Electrobun — Bun-powered desktop runtime.
  • React 19 — UI framework
  • TanStack Router — file-based routing, fully type-safe
  • Tailwind CSS v4 — utility-first styling
  • TypeScript — end-to-end type safety including RPC

What's included

  • Typed RPC setup between src/bun (main process) and src/mainview (renderer) via a useRpc hook ready to use
  • Shared types in src/shared accessible from both processes
  • TanStack Router with file-based routing and auto-generated routeTree.gen.ts
  • Vite HMR configured for Electrobun's dev server
  • Tailwind v4

Project Structure

├── src/
│   ├── bun/
│   │   └── index.ts              # Main process (Electrobun)
│   ├── mainview/                 # Frontend React app
│   │   ├── index.html            # HTML template
│   │   ├── main.tsx              # React entry point
│   │   ├── index.css             # Tailwind styles
│   │   ├── routeTree.gen.ts      # Generated router (auto)
│   │   ├── hooks/
│   │   │   └── use-rpc.ts        # Hook for RPC communication
│   │   ├── routes/               # TanStack Router
│   │   │   ├── __root.tsx        # Root layout
│   │   │   ├── index.tsx         # Home page
│   │   │   └── about.tsx         # About page
│   └── shared/
│       └── types/
│           └── rpc/              # Shared RPC types
├── electrobun.config.ts          # Electrobun config (window, icon, etc)
├── vite.config.ts                # Vite and HMR config
├── tsconfig.json                 # TypeScript configuration
└── package.json

@YoavCodes YoavCodes added the idea label Apr 18, 2026
@YoavCodes
Copy link
Copy Markdown
Member

nice! I'm avoiding adding more templates for now (since they increase the CLI file size) until I can create a way to load them async. so keeping this open for reference until i get around to doing that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants