A ready-to-use template for building desktop applications using Electron with React, TypeScript, and Vite.

• Node.js (version 18 or higher recommended)
• npm or yarn

npm install

npm start

This command will open the Electron app with Hot Module Replacement (HMR) - any code changes will appear instantly without restarting the app.

npm run build

This command will:

1. Compile TypeScript
2. Build the React frontend
3. Create distributable Electron files

project/
├── src/
│   ├── renderer/          # React frontend code
│   │   ├── components/    # React components
│   │   ├── pages/         # Application pages
│   │   └── ...
│   └── main/              # Electron main process code
│       └── index.ts       # Electron entry point
├── dist/
│   ├── renderer/          # Built React files
│   └── main/              # Built Electron files
└── build/
    └── icons/             # Application icons

1. Create a new file in src/renderer/pages/
2. Add the route in src/App.tsx

Create components in src/renderer/components/

Edit src/main/index.ts to add Electron functionality such as:

• Opening new windows
• File system operations
• Operating system interactions

You can customize build settings by modifying the build section in package.json:

• Windows: Creates NSIS installer
• macOS: Creates .app file
• Linux: Creates .AppImage or .deb file

• React 19: UI library
• TypeScript: Type-safe programming language
• Vite: Fast build tool
• Tailwind CSS: CSS framework
• shadcn/ui: UI component library

• Electron 38: Desktop application framework
• electron-builder: Build and distribution tool

In development mode, any changes to React files will appear immediately. However, changes to src/main/ require a restart.

• Use Chrome DevTools via View > Toggle Developer Tools in the Electron app
• Use console.log in the main process and view output in terminal

The project uses path aliases:

• @renderer: Points to src/renderer
• @main: Points to src/main
• @: Points to src (for components and utilities)

After running npm run build, you'll find distribution files in:

• Windows: dist/{app-name} Setup.exe
• macOS: dist/{app-name}.app
• Linux: dist/{app-name}.AppImage

Place icons in build/icons/ with sizes:

• 512x512.png (Windows/Mac)
• Multiple sizes for Linux

Edit in package.json:

{
  "name": "your-app-name",
  "build": {
    "appId": "com.yourcompany.app",
    "productName": "Your App Name"
  }
}

Make sure all dependencies are in dependencies and not devDependencies

Ensure icons exist with correct sizes in build/icons/

• Electron Documentation
• React Documentation
• Vite Documentation
• electron-builder Documentation

If you encounter any issues, you can:

1. Check console logs
2. Review Electron DevTools
3. Search GitHub Issues for the libraries used