electron-vite-react-template 1.0.0

package/src/renderer/src/i18n/index.ts

@@ -0,0 +1,27 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+
+// Get system locale
+const getSystemLocale = (): string => {
+  if (typeof navigator !== 'undefined') {
+    const lang = navigator.language || 'en'
+    return lang.split('-')[0]
+  }
+  return 'en'
+}
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: { translation: en },
+    fr: { translation: fr }
+  },
+  lng: getSystemLocale(),
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false
+  }
+})
+
+export default i18n

package/src/renderer/src/i18n/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "welcome": "Welcome to your Electron app!",
+  "theme": {
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System"
+  }
+}

package/src/renderer/src/i18n/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "welcome": "Bienvenue dans votre application Electron !",
+  "theme": {
+    "light": "Clair",
+    "dark": "Sombre",
+    "system": "Système"
+  }
+}

package/src/renderer/src/index.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/renderer/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/src/renderer/src/main.tsx

@@ -0,0 +1,66 @@
+import './index.css'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ThemeProvider } from './components/theme-provider'
+import { RouterProvider, createRouter, createRootRoute, createRoute, Outlet } from '@tanstack/react-router'
+import './i18n'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000
+    }
+  }
+})
+
+// Define routes
+const rootRoute = createRootRoute({
+  component: () => (
+    <div className="min-h-screen bg-background text-foreground">
+      <header className="border-b">
+        <div className="container mx-auto flex items-center justify-between p-4">
+          <h1 className="text-2xl font-bold">Electron Vite React Template</h1>
+        </div>
+      </header>
+      <main className="container mx-auto p-4">
+        <Outlet />
+      </main>
+    </div>
+  )
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: function Index() {
+    return <p>Welcome to your Electron app!</p>
+  }
+})
+
+const routeTree = rootRoute.addChildren([indexRoute])
+
+const router = createRouter({
+  routeTree,
+  context: {
+    queryClient
+  },
+  defaultPreload: 'intent'
+})
+
+// Declare router for type-safe routing
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </QueryClientProvider>
+  </React.StrictMode>
+)

package/src/renderer/src/stores/app-store.ts

@@ -0,0 +1,20 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface AppState {
+  // User preferences
+  language: string
+  setLanguage: (language: string) => void
+}
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      language: 'en',
+      setLanguage: (language) => set({ language })
+    }),
+    {
+      name: 'app-storage'
+    }
+  )
+)

package/tailwind.config.js

@@ -0,0 +1,53 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: [
+    './src/renderer/index.html',
+    './src/renderer/src/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        }
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
+      }
+    }
+  },
+  plugins: []
+}

package/template/.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/template/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/template/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 }
+      ]
+    }
+  }
+)

package/template/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@nesalia/template-electron-vite-react",
+  "version": "1.0.0",
+  "description": "Desktop app template with Electron, Vite, React, TypeScript",
+  "nesalia": {
+    "id": "electron-vite-react",
+    "displayName": "Electron + Vite + React",
+    "description": "Desktop application template with Electron, Vite, React, TypeScript, Tailwind CSS, shadcn/ui, i18n, and TanStack",
+    "tags": ["electron", "desktop", "react", "vite", "typescript", "tailwind"]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "templatePackageJson": {
+    "name": "{{name}}",
+    "description": "Electron + Vite + React template with TypeScript",
+    "main": "./out/main/index.js",
+    "type": "module",
+    "author": "Nesalia",
+    "license": "MIT",
+    "scripts": {
+      "dev": "electron-vite dev",
+      "build": "electron-vite build",
+      "preview": "electron-vite preview",
+      "lint": "eslint .",
+      "typecheck": "tsc --noEmit",
+      "test": "vitest run",
+      "test:ui": "vitest"
+    }
+  }
+}

package/template/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

package/template/src/main/index.ts

@@ -0,0 +1,110 @@
+import { app, shell, BrowserWindow, nativeTheme, ipcMain } from 'electron'
+import { join } from 'path'
+import { electronApp, optimizer, is } from '@electron-toolkit/utils'
+import log from 'electron-log/main.js'
+
+// Initialize logging
+log.initialize()
+log.transports.file.level = 'info'
+log.transports.console.level = 'debug'
+
+// Log app start
+log.info('Application starting...')
+log.info(`Electron version: ${process.versions.electron}`)
+log.info(`Chrome version: ${process.versions.chrome}`)
+log.info(`Node version: ${process.versions.node}`)
+
+function createWindow(): void {
+  log.info('Creating main window...')
+
+  const mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    minWidth: 800,
+    minHeight: 600,
+    show: false,
+    autoHideMenuBar: false,
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false,
+      contextIsolation: true,
+      nodeIntegration: false
+    }
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    log.info('Window ready to show')
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // Load the app
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    log.info(`Loading dev URL: ${process.env['ELECTRON_RENDERER_URL']}`)
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    log.info('Loading production build')
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+}
+
+// Listen for system theme changes
+nativeTheme.on('updated', () => {
+  const theme = nativeTheme.shouldUseDarkColors ? 'dark' : 'light'
+  log.info(`System theme changed to: ${theme}`)
+  // Broadcast to all windows
+  BrowserWindow.getAllWindows().forEach((window) => {
+    window.webContents.send('theme-changed', theme)
+  })
+})
+
+// Handle uncaught exceptions
+process.on('uncaughtException', (error) => {
+  log.error('Uncaught exception:', error)
+  app.quit()
+})
+
+process.on('unhandledRejection', (reason) => {
+  log.error('Unhandled rejection:', reason)
+})
+
+// App lifecycle
+app.whenReady().then(() => {
+  log.info('App ready')
+
+  // Set app user model id for windows
+  electronApp.setAppUserModelId('com.nesalia.electron-vite-react')
+
+  // Default open or close DevTools by F12 in development
+  // and ignore CommandOrControl + R in production
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  createWindow()
+
+  app.on('activate', () => {
+    // On macOS it's common to re-create a window in the app
+    // when the dock icon is clicked and there are no other windows open
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+})
+
+// Quit when all windows are closed, except on macOS
+app.on('window-all-closed', () => {
+  log.info('All windows closed')
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+// IPC handlers for theme
+ipcMain.handle('get-system-theme', () => {
+  return nativeTheme.shouldUseDarkColors ? 'dark' : 'light'
+})

package/template/src/preload/index.ts

@@ -0,0 +1,33 @@
+import { contextBridge, ipcRenderer } from 'electron'
+import { electronAPI } from '@electron-toolkit/preload'
+
+// Custom APIs for renderer
+const api = {
+  // Theme
+  getSystemTheme: (): Promise<'dark' | 'light'> => ipcRenderer.invoke('get-system-theme'),
+  onThemeChange: (callback: (theme: 'dark' | 'light') => void): (() => void) => {
+    const handler = (_event: Electron.IpcRendererEvent, theme: 'dark' | 'light'): void => {
+      callback(theme)
+    }
+    ipcRenderer.on('theme-changed', handler)
+    return () => {
+      ipcRenderer.removeListener('theme-changed', handler)
+    }
+  }
+}
+
+// Use `contextBridge` APIs to expose Electron APIs to
+// renderer only if context isolation is enabled
+if (process.contextIsolated) {
+  try {
+    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('api', api)
+  } catch (error) {
+    console.error(error)
+  }
+} else {
+  // @ts-expect-error (define in dts)
+  window.electron = electronAPI
+  // @ts-expect-error (define in dts)
+  window.api = api
+}

package/template/src/renderer/env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+interface Window {
+  electron: {
+    ipcRenderer: {
+      send: (channel: string, ...args: unknown[]) => void
+      on: (channel: string, func: (...args: unknown[]) => void) => void
+      removeListener: (channel: string, func: (...args: unknown[]) => void) => void
+      invoke: <T = unknown>(channel: string, ...args: unknown[]) => Promise<T>
+    }
+  }
+  api: {
+    getSystemTheme: () => Promise<'dark' | 'light'>
+    onThemeChange: (callback: (theme: 'dark' | 'light') => void) => () => void
+  }
+}

package/template/src/renderer/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
+    <title>Electron Vite React Template</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>

package/template/src/renderer/src/components/mode-toggle.tsx

@@ -0,0 +1,31 @@
+import { Moon, Sun } from 'lucide-react'
+
+import { Button } from './ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from './ui/dropdown-menu'
+import { useTheme } from './use-theme'
+
+export function ModeToggle(): JSX.Element {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" className="relative">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}