https://github.com/guasam/electron-react-app
Modern Electron application starter kit with React, Vite, TypeScript, and TailwindCSS
https://github.com/guasam/electron-react-app
boilerplate custom-titlebar desktop-app electron electron-react-app electron-react-typescript era react react-desktop-app typescript
Last synced: 4 days ago
JSON representation
Modern Electron application starter kit with React, Vite, TypeScript, and TailwindCSS
- Host: GitHub
- URL: https://github.com/guasam/electron-react-app
- Owner: guasam
- License: mit
- Created: 2020-05-19T15:37:00.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-04-22T21:24:42.000Z (27 days ago)
- Last Synced: 2025-04-22T22:32:27.403Z (27 days ago)
- Topics: boilerplate, custom-titlebar, desktop-app, electron, electron-react-app, electron-react-typescript, era, react, react-desktop-app, typescript
- Language: TypeScript
- Homepage:
- Size: 12.2 MB
- Stars: 440
- Watchers: 3
- Forks: 92
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Electron React App
A modern Electron application template with React, Vite, TypeScript, and TailwindCSS. This project provides a solid foundation for developing cross-platform desktop applications.
## Features
- 🚀 Electron - Cross-platform desktop application framework
- ⚛️ React - Component-based UI library
- 📦 TypeScript - Type-safe JavaScript
- 🎨 TailwindCSS - Utility-first CSS framework
- ⚡ Vite - Lightning-fast build tool
- 🔥 Fast HMR - Hot Module Replacement
- 🎨 Dark/Light Mode - Built-in theme switching
- 🪟 Custom Window & Titlebar - Professional-looking window with custom titlebar & file menus.
- 📐 Clean Project Structure - Separation of main and renderer processes
- 🧩 Path Aliases – Keep your code organized.
- 🛠️ Electron Builder - Configured for packaging applications
## Prerequisites
- Node.js (v18 or higher)
- npm, yarn, pnpm, or bun
## Installation
Clone the repository and install dependencies:
```bash
# Clone the repository
git clone https://github.com/guasam/electron-react-app
cd electron-react-app
# Install dependencies
npm install
# or
yarn
# or
pnpm install
# or
bun install
```
## Development
Start the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun run dev
```
This will start Electron with hot-reload enabled so you can see changes in real time.
## Building for Production
Build the application for your platform:
```bash
# For Windows
npm run build:win
# For macOS
npm run build:mac
# For Linux
npm run build:linux
# Unpacked for all platforms
npm run build:unpack
```
Distribution files will be located in the `dist` directory.
## IPC Communication
The app uses a secure IPC (Inter-Process Communication) system to communicate between the renderer and main processes:
```ts
// Renderer process (send message to main)
window.api.send('channel-name', ...args)
// Renderer process (receive message from main)
window.api.receive('channel-name', (data) => {
console.log(data)
})
// Renderer process (invoke a method in main and get a response)
const result = await window.api.invoke('channel-name', ...args)
```
## Custom Window Components
This template includes a custom window implementation with:
- Custom titlebar with app icon
- Window control buttons (minimize, maximize, close)
- Menu system with keyboard shortcuts
- Dark/light mode toggle
- Cross-platform support for Windows and macOS
### Titlebar Menu Toggle
The titlebar menu can be toggled using:
- **Windows**: Press the `Alt` key
- **macOS**: Press the `Option (⌥)` key
When you press the toggle key:
- If the menu is hidden, it becomes visible
- If the menu is already visible, it gets hidden
- The menu only toggles if menu items are available
### Customizing Menu Items
To add, remove or modify menu items, update the `lib/window/titlebarMenus.ts` file.
## Tailwind Styling
The project supports **TailwindCSS** for styling:
```ts
// Example component with Tailwind classes
const Button = () => (
Click me
);
```
## Contributing
Contributions are welcome! Feel free to submit a Pull Request.
## Project Structure
```markdown
├── app/ # Renderer process files
│ ├── assets/ # Static assets (images, fonts, etc)
│ ├── components/ # React components
│ │ ├── App.tsx # Application component
│ ├── styles/ # CSS and Tailwind files
│ │ ├── app.css # App stylesheet
│ │ └── tailwind.css # Tailwind stylesheet
│ ├── index.html # Entry HTML file
│ └── renderer.tsx # Renderer process entry
├── lib/ # Shared library code
│ ├── main/ # Main process code
│ │ ├── index.ts # Main entry point for Electron
│ │ └── ... # Other main process modules
│ ├── preload/ # Preload scripts for IPC
│ │ ├── index.ts # Preload script entry
│ │ └── api.ts # Exposed API for renderer
│ ├── welcome/ # Welcome kit components
│ └── window/ # Custom window implementation
├── resources/ # Build resources
├── .eslintrc # ESLint configuration
├── .prettierrc # Prettier format configuration
├── electron-builder.yml # Electron builder configuration
├── electron.vite.config.ts # Vite configuration for Electron
├── package.json # Project dependencies and scripts
└── tsconfig.node.json # Main process tsconfig
└── tsconfig.web.json # Renderer process tsconfig
```