{"id":28873820,"url":"https://github.com/brvwl/electron-react-typescript-template","last_synced_at":"2026-04-11T05:33:24.811Z","repository":{"id":294957728,"uuid":"988493116","full_name":"BRVWL/electron-react-typescript-template","owner":"BRVWL","description":"A modern, production-ready Electron template with React, TypeScript, Vite, Tailwind CSS, and shadcn/ui. Includes secure IPC, dark mode, and example system monitoring dashboard. Perfect starter for cross-platform desktop apps.","archived":false,"fork":false,"pushed_at":"2025-05-30T15:16:10.000Z","size":469,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T22:04:18.475Z","etag":null,"topics":["boilerplate","cross-platform","desktop-app","electron","react","shadcn-ui","starter","tailwindcss","template","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BRVWL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-05-22T16:16:49.000Z","updated_at":"2025-05-30T15:16:13.000Z","dependencies_parsed_at":"2025-05-23T23:29:09.702Z","dependency_job_id":"c96f4073-d32d-4b20-837a-a38518b06b92","html_url":"https://github.com/BRVWL/electron-react-typescript-template","commit_stats":null,"previous_names":["brvwl/electron-ts-react","brvwl/electron-react-typescript-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BRVWL/electron-react-typescript-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BRVWL%2Felectron-react-typescript-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BRVWL%2Felectron-react-typescript-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BRVWL%2Felectron-react-typescript-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BRVWL%2Felectron-react-typescript-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BRVWL","download_url":"https://codeload.github.com/BRVWL/electron-react-typescript-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BRVWL%2Felectron-react-typescript-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004176,"owners_count":26083688,"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-10-10T02:00:06.843Z","response_time":62,"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":["boilerplate","cross-platform","desktop-app","electron","react","shadcn-ui","starter","tailwindcss","template","typescript","vite"],"created_at":"2025-06-20T16:01:09.585Z","updated_at":"2025-10-10T14:33:27.075Z","avatar_url":"https://github.com/BRVWL.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modern Electron Desktop App Template\n\nA comprehensive, production-ready template for building modern desktop applications with Electron, React, TypeScript, and Vite. Features a complete development setup with UI components and includes a system monitoring example to demonstrate real-world usage.\n\n## Template Features\n\n- ⚡ **Modern Stack**: Electron + React + TypeScript + Vite for fast development\n- 🎨 **UI**: Beautiful, professional interface with shadcn/ui components\n- 🌗 **Dark/Light Mode**: Built-in theme switching with smooth transitions\n- 🔒 **Security First**: Follows Electron security best practices out of the box\n- 🎯 **Type Safety**: Full TypeScript coverage with proper IPC typing\n- 🛠️ **Developer Experience**: Hot reload, error handling, and debugging tools\n- 📦 **Build Ready**: Configured for cross-platform builds with Electron Forge\n- 🎭 **Component Library**: Complete shadcn/ui integration with 15+ components\n- 🔌 **IPC Architecture**: Clean, organized Inter-Process Communication setup\n- 📱 **Responsive Design**: Mobile-first approach with Tailwind CSS\n\n## Example Implementation\n\nThe template includes a **System Monitoring Dashboard** as a practical example:\n\n- 🖥️ Real-time CPU and memory usage tracking\n- 📊 Platform-specific system statistics (optimized for macOS)\n- 🌐 Network status and process information\n- ⚡ Live updates every 2 seconds\n\n## Prerequisites\n\n- [Node.js](https://nodejs.org/) (v16.4.0 or higher)\n- npm (comes with Node.js)\n\n## Getting Started\n\n### Installation\n\nClone the repository and install dependencies:\n\n````bash\n# Clone this template repository\ngit clone \u003crepository-url\u003e\n\n```bash\n# Navigate to the project directory\ncd electron-react-typescript-template\n\n# Install dependencies\nnpm install\n````\n\n### Development\n\nTo start the application in development mode:\n\n```bash\nnpm start\n```\n\nThis will:\n\n- Start the development server\n- Open your Electron app in a new window\n- Enable hot-reloading for quick development\n- Display the example system monitoring dashboard\n\n## Building for Production\n\n### Building for Current Platform\n\nTo build the application for your current operating system:\n\n```bash\nnpm run make\n```\n\nThe packaged application will be available in the `out/make` directory.\n\n### Building for Specific Platforms\n\nThis project includes scripts to build for specific platforms:\n\n```bash\n# Build for macOS\nnpm run make:mac\n\n# Build for Windows\nnpm run make:win\n\n# Build for Linux\nnpm run make:linux\n\n# Build for all platforms (macOS, Windows, and Linux)\nnpm run make:all\n```\n\n### Cross-Platform Build Notes\n\n- **Building macOS apps**: Can only be done on macOS due to code signing requirements\n- **Building Windows apps on macOS/Linux**: Requires Wine and Mono for certain functionality\n- **Building Linux apps on macOS/Windows**: Generally works without extra requirements\n- **Native dependencies**: May require platform-specific compilation\n\nFor serious cross-platform builds, consider using CI/CD services like GitHub Actions or CircleCI with runners for each platform.\n\n## Template Structure\n\nThis template provides a well-organized architecture that separates Electron's main process from the renderer process (UI), making it easy to extend for any desktop application:\n\n```\n├── src/\n│   ├── index.ts              # Application entry point\n│   ├── main/                 # Electron main process code\n│   │   ├── main.ts           # Main process implementation\n│   │   ├── preload.ts        # Preload script for secure IPC\n│   │   └── ipc/              # IPC handlers module\n│   │       ├── index.ts      # Exports from IPC module\n│   │       └── handlers.ts   # System monitoring IPC handlers\n│   ├── renderer/             # React UI code\n│   │   ├── App.tsx           # Main React component with system dashboard\n│   │   ├── renderer.tsx      # React entry point\n│   │   ├── index.css         # shadcn/ui styling with CSS variables\n│   │   ├── components/       # shadcn/ui component library\n│   │   │   └── ui/           # Reusable UI components\n│   │   │       ├── button.tsx    # Button component\n│   │   │       ├── card.tsx      # Card component\n│   │   │       ├── badge.tsx     # Badge component\n│   │   │       ├── progress.tsx  # Progress bar component\n│   │   │       ├── switch.tsx    # Toggle switch component\n│   │   │       ├── tooltip.tsx   # Tooltip component\n│   │   │       └── ...           # Additional UI components\n│   │   └── lib/\n│   │       └── utils.ts      # Utility functions (cn, etc.)\n│   └── shared/               # Shared code between processes\n│       └── electron.d.ts     # TypeScript definitions for IPC APIs\n├── components.json           # shadcn/ui configuration\n├── index.html                # HTML template\n├── package.json              # Project dependencies and scripts\n├── tailwind.config.js        # Tailwind CSS configuration\n├── postcss.config.js         # PostCSS configuration\n├── tsconfig.json             # TypeScript configuration with path mapping\n├── forge.config.ts           # Electron Forge configuration\n├── vite.main.config.ts       # Vite config for main process\n├── vite.preload.config.ts    # Vite config for preload script\n└── vite.renderer.config.ts   # Vite config for renderer process\n```\n\n### Template Architecture\n\nThe template uses a secure, scalable architecture with clear separation between processes:\n\n1. **Main Process (`src/main/`)**:\n\n   - Handles application lifecycle, windows, and OS integration\n   - Contains all Node.js and Electron API access\n\n2. **IPC Module (`src/main/ipc/`)**:\n\n   - Centralized Inter-Process Communication handlers\n   - Organized, modular approach for different feature sets\n   - Example: System monitoring APIs with platform-specific optimizations\n   - Easy to extend with new functionality\n\n3. **Preload Script (`src/main/preload.ts`)**:\n\n   - Creates a secure bridge between main and renderer processes\n   - Exposes a limited API through contextBridge\n   - Prevents direct access to Node.js APIs from the renderer\n\n4. **Renderer Process (`src/renderer/`)**:\n\n   - Modern React application\n   - Complete shadcn/ui component integration\n   - Dark/light mode with smooth transitions\n   - Example: Real-time dashboard implementation\n   - Easy to replace with your own UI components\n\n5. **UI Components (`src/components/ui/`)**:\n\n   - Complete shadcn/ui component library integration\n   - Reusable, accessible, and styled components\n   - Consistent design system with CSS variables\n   - Tailwind CSS for utility-first styling\n\n6. **Shared Code (`src/shared/`)**:\n   - TypeScript interfaces and type definitions\n   - Shared utilities and constants\n   - Ensures type safety across all processes\n   - Example: System monitoring data interfaces\n\n## Building Your Own App\n\n### 1. Replace the Example Content\n\nThe template includes a system monitoring example in:\n\n- `src/main/ipc/handlers.ts` - Replace with your own IPC handlers\n- `src/renderer/App.tsx` - Replace with your main UI component\n- `src/shared/electron.d.ts` - Update with your own type definitions\n\n### 2. Add Your Features\n\nThe template follows a simple 4-step pattern for adding any feature:\n\n#### **Step 1: Define Your Data Types**\n\n```typescript\n// src/shared/electron.d.ts\nexport interface YourDataType {\n  id: string;\n  name: string;\n  // ... your fields\n}\n\n// Extend the API interface\ndeclare global {\n  interface Window {\n    electronAPI: {\n      // ... existing methods\n      yourNewFeature: (data: YourDataType) =\u003e Promise\u003cYourDataType\u003e;\n    };\n  }\n}\n```\n\n#### **Step 2: Create Backend Handler**\n\n```typescript\n// src/main/ipc/handlers.ts\nexport function registerIpcHandlers(): void {\n  // ... existing handlers\n\n  ipcMain.handle('your-new-feature', async (_, data: YourDataType) =\u003e {\n    // Your backend logic here:\n    // - File operations\n    // - Database queries\n    // - API calls\n    // - System integration\n\n    return processedData;\n  });\n}\n```\n\n#### **Step 3: Expose to Frontend**\n\n```typescript\n// src/main/preload.ts\ncontextBridge.exposeInMainWorld('electronAPI', {\n  // ... existing methods\n  yourNewFeature: data =\u003e ipcRenderer.invoke('your-new-feature', data),\n});\n```\n\n#### **Step 4: Use in React Components**\n\n```tsx\n// src/renderer/App.tsx\nfunction YourComponent() {\n  const [data, setData] = useState(null);\n\n  const handleAction = async () =\u003e {\n    try {\n      const result = await window.electronAPI.yourNewFeature(inputData);\n      setData(result);\n    } catch (error) {\n      console.error('Feature failed:', error);\n    }\n  };\n\n  return (\n    \u003cCard\u003e\n      \u003cCardHeader\u003e\n        \u003cCardTitle\u003eYour Feature\u003c/CardTitle\u003e\n      \u003c/CardHeader\u003e\n      \u003cCardContent\u003e\n        \u003cButton onClick={handleAction}\u003eExecute Feature\u003c/Button\u003e\n        {data \u0026\u0026 \u003cdiv\u003eResult: {JSON.stringify(data)}\u003c/div\u003e}\n      \u003c/CardContent\u003e\n    \u003c/Card\u003e\n  );\n}\n```\n\n#### **Common Feature Patterns**\n\n**File Operations:**\n\n- Backend: Use Node.js `fs` module, `dialog` for file selection\n- Frontend: File upload/download UI with progress indicators\n\n**Settings Management:**\n\n- Backend: JSON file storage in `app.getPath('userData')`\n- Frontend: Settings panels with form controls\n\n**Database Integration:**\n\n- Backend: SQLite, PostgreSQL, or any database driver\n- Frontend: CRUD operations with loading states\n\n**External APIs:**\n\n- Backend: `fetch()` or `axios` for HTTP requests\n- Frontend: Data fetching hooks with error handling\n\n**System Integration:**\n\n- Backend: OS notifications, shell commands, file system watching\n- Frontend: Status indicators and system information displays\n\n**Real-time Updates:**\n\n- Backend: Event emitters to send updates to frontend\n- Frontend: Event listeners for live data updates\n\n#### **Development Workflow**\n\n1. **Start with types** - Define your data structure first\n2. **Build backend logic** - Implement the core functionality\n3. **Expose safely** - Only expose what the frontend needs\n4. **Create UI components** - Build user interface with error handling\n5. **Test thoroughly** - Use developer tools and console for debugging\n\nThis pattern scales from simple features (showing a notification) to complex ones (real-time file synchronization) while maintaining security and type safety.\n\n### 3. Customize the UI\n\nThe template includes a complete component library:\n\n- Replace the header with your own branding\n- Modify the color scheme in `tailwind.config.js`\n- Add new shadcn/ui components as needed\n- Customize the dark/light mode implementation\n\n### 4. Example Use Cases\n\nThis template is perfect for building:\n\n- **System utilities** (monitoring, file management, backup tools)\n- **Development tools** (IDEs, database clients, API testing)\n- **Productivity apps** (note-taking, task management, time tracking)\n- **Creative tools** (image editors, music players, video tools)\n- **Business applications** (CRM, inventory, analytics dashboards)\n\n## Technologies \u0026 Stack\n\n- [Electron](https://www.electronjs.org/) - Cross-platform desktop app framework\n- [React](https://reactjs.org/) - Modern UI library with hooks and components\n- [TypeScript](https://www.typescriptlang.org/) - Type-safe JavaScript for better DX\n- [Vite](https://vitejs.dev/) - Lightning-fast build tool and dev server\n- [Electron Forge](https://www.electronforge.io/) - Complete toolchain for packaging\n- [shadcn/ui](https://ui.shadcn.com/) - High-quality, accessible component library\n- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework\n- [Radix UI](https://www.radix-ui.com/) - Unstyled, accessible UI primitives\n\n## Troubleshooting\n\n**Common Development Issues**:\n\n**Template Setup Issues**:\n\n**App Won't Start**:\n\n- Ensure Node.js v16.4.0 or higher is installed\n- Run `npm install` to install all dependencies\n- Check for port conflicts if running in development mode\n\n**Components Not Styling Correctly**:\n\n- Ensure Tailwind CSS is properly configured\n- Check that `postcss.config.js` is present\n- Verify `src/renderer/index.css` contains shadcn/ui variables\n\n### Template Development Issues\n\n**TypeScript Errors**:\n\n- Run `npm run type-check` to verify types\n- Ensure all dependencies are up to date\n- Check `tsconfig.json` path mappings are correct\n\n**Build Failures**:\n\n- Clear `node_modules` and run `npm install`\n- Check Electron Forge configuration in `forge.config.ts`\n- Verify all Vite configurations are properly set up\n\n**Adding New Components**:\n\n- Use `npx shadcn-ui@latest add \u003ccomponent\u003e` to add new UI components\n- Import components using the `@/` alias configured in `tsconfig.json`\n- Follow the existing patterns in `src/renderer/App.tsx`\n\n## Template Security\n\nThis application follows Electron's security best practices:\n\n1. **Content Security Policy (CSP)**:\n\n   - Implemented via meta tag in index.html\n   - Restricts script and style sources to prevent XSS attacks\n   - Follows the principle of least privilege\n\n2. **Context Isolation**:\n\n   - Enabled in BrowserWindow configuration\n   - Prevents malicious scripts from accessing Electron/Node.js APIs\n   - Creates a separate JavaScript context for preload script\n\n3. **Secure IPC Communication**:\n\n   - Uses contextBridge to expose only specific APIs\n   - Centralized IPC handlers in dedicated module\n   - Restricts renderer's access to main process\n\n4. **Web Security**:\n\n   - Enabled by default in BrowserWindow configuration\n   - Enforces same-origin policy\n   - Prevents loading and execution of remote code\n\n5. **Node Integration Disabled**:\n   - Prevents direct access to Node.js APIs from renderer\n   - Reduces potential attack surface\n\nFor more information on Electron security best practices, visit the [Electron Security documentation](https://www.electronjs.org/docs/latest/tutorial/security).\n\n## Customization Guide\n\n### Changing the App Name and Branding\n\n1. **Update package.json**:\n\n   ```json\n   {\n     \"name\": \"your-app-name\",\n     \"productName\": \"Your App Name\",\n     \"description\": \"Your app description\"\n   }\n   ```\n\n2. **Update the window title** in `src/renderer/App.tsx`:\n\n   ```tsx\n   \u003ch1 className='ml-4 text-sm font-medium'\u003eYour App Name\u003c/h1\u003e\n   ```\n\n3. **Update the app icon** (add your icon files to the project and update `forge.config.ts`)\n\n### Adding New Features\n\n1. **Backend Logic**: Add new IPC handlers in `src/main/ipc/handlers.ts`\n2. **API Exposure**: Update the preload script in `src/main/preload.ts`\n3. **Type Safety**: Add interfaces in `src/shared/electron.d.ts`\n4. **UI Components**: Build your interface in `src/renderer/App.tsx`\n\n### Styling Customization\n\nThe template uses a carefully crafted design system:\n\n- **Colors**: Modify `tailwind.config.js` and `src/renderer/index.css`\n- **Components**: All shadcn/ui components can be customized\n- **Themes**: Dark/light mode variables are in CSS custom properties\n- **Layout**: Spacing and typography are easily adjustable\n\n## Contributing\n\nThis template is designed to be a solid foundation for any Electron desktop application. Contributions are welcome!\n\n### Areas for Improvement\n\n- Additional example implementations (file manager, text editor, etc.)\n- More UI component examples and patterns\n- Enhanced build and deployment configurations\n- Additional platform-specific optimizations\n- Performance monitoring and debugging tools\n\n---\n\n**Start building your desktop application today!** This template provides everything you need to create professional, secure, and performant Electron apps with modern web technologies.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrvwl%2Felectron-react-typescript-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrvwl%2Felectron-react-typescript-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrvwl%2Felectron-react-typescript-template/lists"}