{"id":29901911,"url":"https://github.com/kethakav/electron-vite-react-boilerplate","last_synced_at":"2025-08-02T16:03:13.260Z","repository":{"id":306707924,"uuid":"1026987823","full_name":"kethakav/electron-vite-react-boilerplate","owner":"kethakav","description":"A modern Electron application boilerplate built with Vite, React, TypeScript, and DaisyUI.","archived":false,"fork":false,"pushed_at":"2025-07-27T04:49:23.000Z","size":270,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-27T06:30:34.442Z","etag":null,"topics":["auto-updater","biolerplate","cross-platform","daisyui","desktop-app","desktop-development","electron","electron-template","hot-reload","modern","react","starter-kit","tailwindcss","template","typescript","typescript-biolerplate","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kethakav.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-27T04:17:23.000Z","updated_at":"2025-07-27T05:24:19.000Z","dependencies_parsed_at":"2025-07-27T06:30:39.821Z","dependency_job_id":"fe259830-2e82-4075-b6ff-e85c7ee3ab5f","html_url":"https://github.com/kethakav/electron-vite-react-boilerplate","commit_stats":null,"previous_names":["kethakav/electron-vite-react-boilerplate"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/kethakav/electron-vite-react-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kethakav%2Felectron-vite-react-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kethakav%2Felectron-vite-react-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kethakav%2Felectron-vite-react-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kethakav%2Felectron-vite-react-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kethakav","download_url":"https://codeload.github.com/kethakav/electron-vite-react-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kethakav%2Felectron-vite-react-boilerplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268248983,"owners_count":24219560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auto-updater","biolerplate","cross-platform","daisyui","desktop-app","desktop-development","electron","electron-template","hot-reload","modern","react","starter-kit","tailwindcss","template","typescript","typescript-biolerplate","vite"],"created_at":"2025-08-01T15:15:26.043Z","updated_at":"2025-08-02T16:03:13.187Z","avatar_url":"https://github.com/kethakav.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Electron + Vite + React + TypeScript + DaisyUI Boilerplate\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Node.js](https://img.shields.io/badge/Node.js-18+-green.svg)](https://nodejs.org/)\n[![Electron](https://img.shields.io/badge/Electron-30+-blue.svg)](https://electronjs.org/)\n[![Vite](https://img.shields.io/badge/Vite-5+-purple.svg)](https://vitejs.dev/)\n[![React](https://img.shields.io/badge/React-18+-cyan.svg)](https://react.dev/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5+-blue.svg)](https://www.typescriptlang.org/)\n[![DaisyUI](https://img.shields.io/badge/DaisyUI-5+-orange.svg)](https://daisyui.com/)\n\nA modern Electron application boilerplate built with Vite, React, TypeScript, and DaisyUI. This template provides a complete development environment with hot reload, auto-updater functionality, and a beautiful UI framework.\n\n![Screenshot of the running application](docs/screenshot.png)\n\n## 💡 Motivation\n\nI created this boilerplate because I couldn't find thorough documentation on **electron-builder NSIS** and **electron-updater auto updates**. Setting up these features can be quite a headache, so I built this template with everything properly configured to help others avoid the same struggles.\n\n## 🚀 Features\n\n- **⚡️ Vite** - Lightning fast build tool and dev server\n- **⚛️ React 18** - Modern React with hooks\n- **📝 TypeScript** - Type safety and better developer experience\n- **🎨 DaisyUI** - Beautiful component library built on Tailwind CSS\n- **🔄 Hot Reload** - Instant updates during development\n- **📦 Auto Updater** - Built-in update mechanism using electron-updater\n- **🔧 ESLint** - Code linting and formatting\n- **📱 Cross-platform** - Build for Windows, macOS, and Linux\n\n## 📋 Prerequisites\n\n- Node.js 18+ \n- npm or yarn\n- Git\n\n## 🛠️ Quick Start\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/kethakav/electron-vite-react-boilerplate.git\ncd electron-vite-react-boilerplate\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3. Start Development\n\n```bash\nnpm run dev\n```\n\nThis will start both the Vite dev server and Electron in development mode with hot reload.\n\n## 📁 Project Structure\n\n```\n├── electron/                 # Electron main process files\n│   ├── main.ts              # Main process entry point\n│   ├── preload.ts           # Preload script for IPC\n│   ├── update.ts            # Auto-updater logic\n│   └── electron-env.d.ts    # TypeScript definitions\n├── src/                     # React application source\n│   ├── App.tsx             # Main React component\n│   ├── main.tsx            # React entry point\n│   ├── App.css             # Component styles\n│   └── assets/             # Static assets\n├── public/                  # Public assets\n├── dist/                    # Built renderer files\n├── dist-electron/           # Built main process files\n├── release/                 # Release builds\n├── electron-builder.json    # Electron Builder configuration\n├── vite.config.ts          # Vite configuration\n└── package.json            # Project dependencies and scripts\n```\n\n## 🔧 Configuration\n\n### Required Changes\n\nBefore using this boilerplate for your project, you need to update the following files:\n\n#### 1. `package.json`\n```json\n{\n  \"name\": \"your-app-name\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Your app description\"\n}\n```\n\n#### 2. `electron-builder.json`\n```json\n{\n  \"appId\": \"com.yourcompany.yourapp\",\n  \"productName\": \"Your App Name\",\n  \"publish\": {\n    \"provider\": \"github\",\n    \"owner\": \"yourusername\",\n    \"repo\": \"your-repo-name\"\n  }\n}\n```\n\n#### 3. `index.html`\n```html\n\u003ctitle\u003eYour App Name\u003c/title\u003e\n```\n\n#### 4. `src/App.tsx`\nUpdate the app title and branding:\n```tsx\n\u003ch1 className=\"text-4xl font-bold text-center mb-8 text-primary\"\u003eYour App Name\u003c/h1\u003e\n```\n\n#### 5. `electron/main.ts`\nUpdate the window icon:\n```ts\nicon: path.join(process.env.VITE_PUBLIC, 'your-icon.png'),\n```\n\n### Optional Changes\n\n#### 1. App Icon\nReplace the icons in the `public/` directory:\n- `vite.svg` - Your app icon\n- `electron-vite.svg` - Alternative icon\n\n#### 2. Window Configuration\nModify `electron/main.ts` to customize the window:\n```ts\nwin = new BrowserWindow({\n  width: 1200,\n  height: 800,\n  minWidth: 800,\n  minHeight: 600,\n  // ... other options\n})\n```\n\n#### 3. Auto Updater\nThe auto-updater is configured in `electron/update.ts`. You can customize:\n- Update check frequency\n- Download behavior\n- Update notifications\n\n## 🚀 Available Scripts\n\n- `npm run dev` - Start development server with hot reload\n- `npm run build` - Build for production\n- `npm run preview` - Preview production build\n- `npm run lint` - Run ESLint\n\n## 📦 Building for Production\n\n### Development Build\n```bash\nnpm run build\n```\n\n### Release Build\nThe build process will create distributable packages in the `release/` directory:\n- Windows: `.exe` installer\n- macOS: `.dmg` disk image\n- Linux: `.AppImage` and `.deb` packages\n\n## 🔄 Auto Updater\n\nThis boilerplate includes a complete auto-update system:\n\n### Features\n- Automatic update checking\n- Progress tracking\n- Error handling\n- User notifications\n\n### Configuration\n1. Set up a GitHub repository for releases\n2. Update `electron-builder.json` with your repository details\n3. Configure GitHub Actions for automated releases\n\n### Usage\nThe update system is automatically integrated. Users can check for updates via the UI button.\n\n## 🚀 Releasing Updates\n\nThis boilerplate includes automated release publishing via GitHub Actions. Here's how to release a new version:\n\n### Prerequisites\n1. **GitHub Token**: Create a personal access token with `repo` permissions\n2. **Repository Secret**: Add your token as `RELEASE_PUSH_TOKEN` in your repository settings\n3. **Release Repository**: Set up a separate repository for releases (e.g., `your-app-releases`)\n\n### Release Process\n\n1. **Update Version**\n   ```bash\n   # Update version in package.json\n   npm version patch  # or minor, major\n   ```\n\n2. **Create and Push Tag**\n   ```bash\n   # Create a new tag (GitHub Actions will trigger on v* tags)\n   git tag v1.0.1\n   git push origin v1.0.1\n   ```\n\n3. **Automated Build**\n   - GitHub Actions will automatically:\n     - Build the application\n     - Create Windows installer\n     - Publish to your release repository\n     - Update the auto-updater\n\n### Configuration Files\n\nUpdate these files for your release setup:\n\n#### `electron-builder.json`\n```json\n{\n  \"publish\": {\n    \"provider\": \"github\",\n    \"owner\": \"yourusername\",\n    \"repo\": \"your-app-releases\"\n  }\n}\n```\n\n#### GitHub Repository Settings\n1. Go to Settings → Secrets and variables → Actions\n2. Add `RELEASE_PUSH_TOKEN` with your GitHub token\n3. Ensure the token has `repo` permissions\n\n### Release Workflow\nThe workflow triggers on tags matching `v*` pattern and:\n- Builds the application\n- Creates Windows installer\n- Publishes to your release repository\n- Enables auto-updates for users\n\n## 🎨 Styling with DaisyUI\n\nThis boilerplate uses DaisyUI, a component library built on Tailwind CSS:\n\n### Available Components\n- Buttons, cards, modals\n- Forms and inputs\n- Navigation and layout\n- Theming and customization\n\n### Customization\nModify `src/App.css` or create new CSS files for custom styles.\n\n## 🔧 Development Tips\n\n### Hot Reload\n- Main process changes require app restart\n- Renderer process changes are hot-reloaded automatically\n\n### Debugging\n- Use Chrome DevTools for renderer process\n- Use VS Code debugger for main process\n\n### IPC Communication\nThe boilerplate includes pre-configured IPC handlers for:\n- Update checking\n- Download progress\n- Error handling\n\n## 📚 Resources\n\n### Core Technologies\n- [Electron Documentation](https://www.electronjs.org/docs)\n- [Vite Documentation](https://vitejs.dev/guide/)\n- [React Documentation](https://react.dev/)\n- [DaisyUI Documentation](https://daisyui.com/)\n- [Electron Builder Documentation](https://www.electron.build/)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Submit a pull request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🙏 Acknowledgments\n\nThis boilerplate was inspired by and built upon the excellent work of:\n\n- [Electron⚡️Vite](https://electron-vite.github.io/) - The best practice integration solution between Electron and Vite, providing the foundation for modern Electron development\n- [electron-vite-react](https://github.com/electron-vite/electron-vite-react) - The Electron + Vite + React boilerplate that served as the primary inspiration and reference for this project\n- [DaisyUI](https://daisyui.com/) - For the beautiful component library built on Tailwind CSS\n- [Vite](https://vitejs.dev/) - For the lightning-fast build tool and development server\n- [React](https://react.dev/) - For the amazing UI library\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkethakav%2Felectron-vite-react-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkethakav%2Felectron-vite-react-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkethakav%2Felectron-vite-react-boilerplate/lists"}