electron-vite-react-template 1.0.0

package/.claude/settings.local.json

@@ -0,0 +1,15 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(gh issue update:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(pnpm typecheck)",
+      "Bash(pnpm lint)",
+      "Bash(pnpm test)",
+      "Bash(pnpm add:*)",
+      "Bash(gh run list:*)",
+      "Bash(gh run view:*)"
+    ]
+  }
+}

package/.github/workflows/ci.yml

@@ -0,0 +1,77 @@
+name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run linter
+        run: pnpm lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run typecheck
+        run: pnpm typecheck
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run tests
+        run: pnpm test

package/CONTRIBUTING.md

@@ -0,0 +1,58 @@
+# Contributing to Electron Vite React Template
+
+Thank you for your interest in contributing!
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork: `git clone https://github.com/YOUR_USERNAME/electron-vite-react-template.git`
+3. Create a feature branch: `git checkout -b feature/my-feature`
+
+## Development Setup
+
+```bash
+# Install dependencies
+pnpm install
+
+# Approve build scripts
+pnpm approve-builds
+
+# Start development server
+pnpm dev
+```
+
+## Coding Standards
+
+- Use TypeScript for all new code
+- Run `pnpm lint` before committing
+- Run `pnpm typecheck` to check types
+- Run `pnpm test` to ensure tests pass
+
+## Commit Messages
+
+Follow the [Conventional Commits](https://www.conventionalcommits.org/) specification:
+
+- `feat:` New feature
+- `fix:` Bug fix
+- `docs:` Documentation changes
+- `style:` Code style changes (formatting, semicolons, etc.)
+- `refactor:` Code refactoring
+- `test:` Adding or updating tests
+- `chore:` Maintenance tasks
+
+Example: `feat: add new theme provider option`
+
+## Pull Request Process
+
+1. Update documentation if needed
+2. Ensure all tests pass and linting is clean
+3. Update the CHANGELOG.md if applicable
+4. Submit a pull request to the `main` branch
+
+## Code of Conduct
+
+Be respectful and inclusive. We follow the [Contributor Covenant](https://www.contributor-covenant.org/).
+
+## Questions?
+
+Feel free to open an issue for questions about contributing.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nesalia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,157 @@
+# Electron + Vite + React Template
+
+A modern Electron desktop application template with Vite, React, and TypeScript.
+
+## Features
+
+- **Electron** - Desktop application framework
+- **Vite** - Fast build tool and dev server
+- **React 18** - UI library
+- **TypeScript** - Type-safe JavaScript
+- **TanStack Query** - Server state management
+- **Zustand** - Client state management
+- **TanStack Router** - Type-safe routing
+- **shadcn/ui** - Accessible UI components (Button, DropdownMenu)
+- **Tailwind CSS** - Utility-first CSS framework
+- **Theme Support** - Native system theme detection (dark/light)
+- **i18n** - Internationalization with react-i18next (English & French)
+- **Vitest** - Testing framework
+- **ESLint** - Code linting
+- **GitHub Actions** - CI/CD pipeline
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 20+
+- pnpm 9+
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/nesalia-inc/electron-vite-react-template.git
+
+# Install dependencies
+pnpm install
+
+# Approve build scripts (for electron)
+pnpm approve-builds
+```
+
+### Development
+
+```bash
+# Start development server
+pnpm dev
+```
+
+The app will open at `http://127.0.0.1:8888`
+
+### Build
+
+```bash
+# Build for production
+pnpm build
+```
+
+### Testing
+
+```bash
+# Run tests
+pnpm test
+
+# Run tests with UI
+pnpm test:ui
+```
+
+### Linting
+
+```bash
+# Run linter
+pnpm lint
+
+# Run type checking
+pnpm typecheck
+```
+
+## Project Structure
+
+```
+src/
+├── main/              # Electron main process
+│   └── index.ts       # Main process entry point
+├── preload/           # Preload scripts
+│   └── index.ts       # Preload script entry point
+└── renderer/          # React application
+    ├── src/
+    │   ├── components/    # React components
+    │   │   └── ui/        # shadcn/ui components
+    │   ├── hooks/         # Custom React hooks
+    │   ├── i18n/          # Internationalization
+    │   ├── lib/           # Utilities
+    │   ├── stores/        # Zustand stores
+    │   └── main.tsx       # Renderer entry point
+    └── index.html         # HTML entry point
+```
+
+## Configuration
+
+### electron.vite.config.ts
+
+Configuration for electron-vite build tool.
+
+### tailwind.config.js
+
+Tailwind CSS configuration with custom theme variables.
+
+### tsconfig.json
+
+TypeScript configuration (node + web split).
+
+### vitest.config.ts
+
+Vitest testing configuration.
+
+## Theme Support
+
+The template includes a theme provider that supports:
+
+- **Light** - Light mode
+- **Dark** - Dark mode
+- **System** - Follows system preference
+
+The theme automatically detects system theme changes in real-time.
+
+## Internationalization
+
+The template supports multiple languages:
+
+- English (en)
+- French (fr)
+
+The language is automatically detected from the system locale.
+
+## Tech Stack
+
+| Category | Technology |
+|----------|------------|
+| Framework | Electron |
+| Build Tool | Vite |
+| UI | React |
+| Language | TypeScript |
+| State | TanStack Query + Zustand |
+| Routing | TanStack Router |
+| Styling | Tailwind CSS |
+| Components | shadcn/ui |
+| i18n | react-i18next |
+| Testing | Vitest |
+| Linting | ESLint |
+
+## License
+
+MIT
+
+## Author
+
+Nesalia

package/SECURITY.md

@@ -0,0 +1,29 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 1.0.x   | :white_check_mark: |
+
+## Reporting a Vulnerability
+
+If you discover a security vulnerability, please send an email to security@nesalia.com. All security vulnerabilities will be promptly addressed.
+
+Please include the following information:
+
+- Type of vulnerability
+- Full paths of source file(s) related to the vulnerability
+- Location of the affected source code (tag/branch/commit or direct URL)
+- Any special configuration required to reproduce the issue
+- Step-by-step instructions to reproduce the issue
+- Proof-of-concept or exploit code (if possible)
+- Impact of the issue
+
+## Response Timeline
+
+We aim to acknowledge vulnerability reports within 48 hours and provide a more detailed response within 7 days. We will work with you to understand and address the vulnerability.
+
+## Security Updates
+
+Security updates will be released as patch versions and announced in the release notes.

package/docs/PROJECT.md

@@ -0,0 +1,249 @@
+# Electron + Vite Template Specification
+
+## Overview
+
+This document defines the specifications for an Electron desktop application template using Vite as the build tool.
+
+## Technology Stack
+
+| Category | Technology |
+|----------|------------|
+| UI Framework | React |
+| Language | TypeScript |
+| Build Tool (Renderer) | Vite |
+| Packaging | electron-vite |
+| State Management | TanStack Query + Zustand |
+| Routing | TanStack Router |
+| UI Components | shadcn/ui |
+| Styling | Tailwind CSS + CSS Variables |
+| Theme | Native system theme (dark/light) |
+| i18n | react-i18next |
+| Testing | Vitest |
+| Logging | electron-log |
+| IPC Pattern | contextBridge + ipcRenderer |
+
+## Architecture
+
+### Project Structure
+
+Following electron-vite recommended convention:
+
+```
+electron-vite-react-template/
+├── src/
+│   ├── main/
+│   │   ├── index.ts    # Main process entry point
+│   │   └── ...         # Main process modules
+│   ├── preload/
+│   │   ├── index.ts    # Preload script entry point
+│   │   └── ...         # Preload modules
+│   └── renderer/
+│       ├── src/
+│       │   ├── components/    # React components (including shadcn)
+│       │   │   └── ui/       # shadcn/ui components
+│       │   ├── hooks/         # Custom React hooks
+│       │   ├── lib/           # Utilities and helpers
+│       │   ├── routes/        # TanStack Router routes
+│       │   ├── stores/        # Zustand stores
+│       │   ├── i18n/          # i18n configuration and translations
+│       │   ├── App.tsx        # Root component
+│       │   └── main.tsx       # Renderer entry point
+│       ├── index.html         # Renderer HTML entry
+│       └── env.d.ts          # TypeScript declarations
+├── tests/                    # Test files
+│   ├── main/                # Main process tests
+│   ├── preload/             # Preload script tests
+│   └── renderer/            # Renderer tests
+├── electron.vite.config.ts
+├── package.json
+├── tailwind.config.js
+├── tsconfig.json
+├── tsconfig.node.json
+├── tsconfig.web.json
+├── vitest.config.ts
+└── .github/
+    └── workflows/
+        └── ci.yml           # CI: lint, type-check, test
+```
+
+**Default entry points (electron-vite auto-discovery):**
+- Main process: `src/main/index.ts`
+- Preload script: `src/preload/index.ts`
+- Renderer: `src/renderer/index.html`
+
+### Process Model
+
+- **Main Process**: Handles window management, native APIs, file system operations, and IPC communication
+- **Preload Script**: Exposes safe APIs to renderer via contextBridge
+- **Renderer Process**: React application running in Chromium
+
+## Core Features
+
+### IPC Communication
+
+Communication between main and renderer processes uses `contextBridge` pattern:
+
+- Expose safe APIs to renderer via contextBridge
+- Using @electron-toolkit/preload for Electron APIs
+- Type-safe IPC with ipcRenderer.invoke
+
+```typescript
+// Preload
+contextBridge.exposeInMainWorld('api', {
+  getSystemTheme: () => ipcRenderer.invoke('get-system-theme')
+})
+
+// Renderer
+const theme = await window.api.getSystemTheme()
+```
+
+### State Management
+
+- **Zustand**: Global client state (user preferences, UI state)
+- **TanStack Query**: Server state (API calls, caching, synchronization)
+- **TanStack Router**: Type-safe routing with file-based routing support
+
+### UI Components
+
+- **shadcn/ui**: Accessible, customizable component library built on Radix UI
+- Components installed individually as needed
+- Follows Tailwind CSS best practices
+
+### Logging
+
+- `electron-log` for main and preload processes
+- Console logging in renderer (can be connected to main process logs)
+- Log files stored in user data directory
+
+### Styling
+
+- Tailwind CSS for utility-first styling
+- CSS variables for theming
+- shadcn/ui components use Tailwind CSS with CSS variables
+
+### Theme Support
+
+Based on shadcn/ui theme provider:
+
+- `ThemeProvider` component with system/dark/light modes
+- `useTheme` hook for theme management
+- `ModeToggle` component for user preference
+- Native system theme detection via Electron `nativeTheme` API
+- Real-time listener for OS theme changes
+- Persist user preference in localStorage
+
+### Internationalization (i18n)
+
+- `react-i18next` for translations
+- Support for multiple locales
+- Language detection from system locale
+- Lazy loading of translation files
+
+## Development Workflow
+
+### Scripts
+
+```bash
+# Development
+npm run dev          # Start dev server
+npm run build        # Build for production
+
+# Electron
+npm run electron:dev # Run Electron in dev mode
+npm run electron:build # Build Electron app
+
+# Testing
+npm run test         # Run tests
+npm run test:ui      # Run tests with UI
+```
+
+### Environment Variables
+
+```
+VITE_DEV_SERVER_URL  # Development server URL
+NODE_ENV             # Environment (development/production)
+```
+
+## Build Configuration
+
+### electron-vite
+
+Configuration handles:
+- Main process build
+- Preload script build
+- Renderer build (Vite)
+- Asset handling
+
+### Packaging
+
+Output formats:
+- Windows: NSIS installer, portable exe
+- macOS: DMG, zip
+- Linux: AppImage, deb
+
+## CI/CD
+
+GitHub Actions workflow (`.github/workflows/ci.yml`):
+
+```yaml
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm typecheck
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm test
+```
+
+## Testing Strategy
+
+- Vitest for unit and integration tests
+- Component testing with React Testing Library
+- IPC communication tests (main process)
+
+## Security Considerations
+
+- Context isolation enabled
+- Node integration disabled in renderer
+- contextBridge handles IPC communication safely via preload
+- CSP headers configured
+
+## Future Considerations
+
+- Auto-update mechanism (electron-updater)
+- ESLint + Prettier configuration
+- CI/CD pipeline
+- Database integration (SQLite via better-sqlite3)

package/electron.vite.config.ts

@@ -0,0 +1,46 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/main/index.ts')
+        }
+      }
+    }
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/preload/index.ts')
+        }
+      }
+    }
+  },
+  renderer: {
+    root: resolve(__dirname, 'src/renderer'),
+    server: {
+      port: 8888,
+      host: '127.0.0.1'
+    },
+    build: {
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/renderer/index.html')
+        }
+      }
+    },
+    plugins: [react()],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src/renderer/src')
+      }
+    }
+  }
+})

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist', 'out', 'node_modules'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true }
+      ]
+    }
+  }
+)