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.

Watch Video Preview

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:

# 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:

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:

# 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:

// 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

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

To add, remove or modify menu items, update the lib/window/titlebarMenus.ts file.

Tailwind Styling

The project supports TailwindCSS for styling:

// Example component with Tailwind classes
const Button = () => (
  <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Click me
  </button>
);

Contributing

Contributions are welcome! Feel free to submit a Pull Request.

Project Structure

├── 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

dielect/electron-react-app