React + Tailwind + Vite Electrobun Template

A fast Electrobun desktop app template with React, Tailwind CSS, and Vite for hot module replacement (HMR).

Getting Started

# Install dependencies
hutch run install

# Development without HMR (uses bundled assets)
hutch run dev

# Development with HMR (recommended)
hutch run dev:hmr

# Build for production
hutch run build:canary

How HMR Works

When you run hutch run dev:hmr:

1. Vite dev server starts on http://localhost:5173 with HMR enabled
2. Electrobun starts and detects the running Vite server
3. The app loads from the Vite dev server instead of bundled assets
4. Changes to React components update instantly without full page reload

When you run hutch run dev (without HMR):

1. Electrobun starts and loads from views://mainview/index.html
2. Vite rebuilds the bundled assets before Electrobun starts

Project Structure

├── src/
│   ├── bun/
│   │   └── index.ts        # Main process (Electrobun/Cottontail)
│   └── mainview/
│       ├── App.tsx         # React app component
│       ├── main.tsx        # React entry point
│       ├── index.html      # HTML template
│       └── index.css       # Tailwind CSS
├── electrobun.config.ts    # Electrobun configuration
├── vite.config.ts          # Vite configuration
├── tailwind.config.js      # Tailwind configuration
└── package.json

Customizing

• React components: Edit files in src/mainview/
• Tailwind theme: Edit tailwind.config.js
• Vite settings: Edit vite.config.ts
• Window settings: Edit src/bun/index.ts
• App metadata: Edit electrobun.config.ts