Skip to content

README_FR.md

Latest commit

 

History

History
282 lines (200 loc) · 8.31 KB

README_FR.md

File metadata and controls

282 lines (200 loc) · 8.31 KB
Raw

Modèle Electron + Next.js + Vite + HeroUI + Tailwind CSS

Un modèle d'application de bureau moderne et prêt pour la production qui combine les meilleures technologies web. Construisez des applications de bureau multiplateformes avec l'expérience du développement web.

Electron React Next.js TypeScript Vite Tailwind CSS

Capture d'écran de l'application

✨ Fonctionnalités

🚀 Stack Technologique Moderne

  • Electron 40 - Dernière version stable pour les applications de bureau multiplateformes
  • React 18 - Dernier React avec fonctionnalités concurrentes
  • TypeScript 5 - Mode strict activé pour la sécurité des types
  • Vite 6 - HMR ultra-rapide et builds de production optimisés
  • HeroUI v2 - Bibliothèque de composants React magnifiques et accessibles
  • Tailwind CSS v4 - CSS utility-first avec les dernières fonctionnalités

🛠️ Expérience de Développement

  • Remplacement de Modules à Chaud (HMR) - Mises à jour instantanées pendant le développement
  • Sécurité des Types - Support TypeScript complet avec mode strict
  • Outils Modernes - ESLint, Prettier configurés prêts à l'emploi
  • Alias de Chemins - Importations propres avec préfixe @/
  • Limites d'Erreur - Gestion élégante des erreurs

🎨 UI/UX

  • Mode Sombre - Support intégré pour le changement de thème
  • Design Réactif - Fonctionne sur toutes les tailles d'écran
  • Animations Fluides - Intégration de Framer Motion
  • Accessible - Composants conformes WCAG
  • Personnalisable - Thématisation facile avec Tailwind CSS

📦 Prêt pour la Production

  • Génération d'Installateurs - Construisez pour Windows, macOS et Linux
  • Multiplateforme - Codebase unique pour toutes les principales plateformes de bureau

📋 Prérequis

Avant de commencer, assurez-vous de remplir les conditions suivantes :

  • Node.js >= 18.0.0
  • Yarn >= 1.22.0 (recommandé) ou npm/pnpm
  • Git

Note : Si vous devez construire des dépendances natives (optionnel), vous aurez peut-être besoin d'outils de compilation spécifiques à la plateforme (Visual Studio Build Tools pour Windows, ou Xcode Command Line Tools pour macOS).

🚀 Démarrage Rapide

1. Cloner le Répertoire

git clone https://github.com/LingChen-tsjmdlc/electron-vite-heroui-template.git my-electron-app
cd my-electron-app

2. Installer les Dépendances

yarn install

3. Démarrer le Serveur de Développement

# Exécuter dans Electron avec rechargement à chaud
yarn dev

# Ou simplement aperçu dans le navigateur
yarn dev:web

4. Compiler pour la Production

# Compiler pour la plateforme actuelle
yarn build

# Compiler pour des plateformes spécifiques
yarn build:win    # Windows
yarn build:mac    # macOS
yarn build:linux  # Linux
yarn build:all    # Toutes les plateformes

📂 Structure du Projet

my-electron-app/
├── electron/                 # Processus principal Electron
│   ├── main.ts              # Entrée du processus principal
│   └── preload.ts           # Script de préchargement pour IPC
├── src/
│   ├── components/          # Composants React réutilisables
│   ├── config/              # Fichiers de configuration
│   ├── layouts/             # Mises en page
│   ├── pages/               # Pages de l'application
│   ├── styles/              # Styles globaux
│   └── types/               # Types TypeScript
├── docs/                    # Documentation
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js

🔧 Configuration

Personnaliser la Compilation

Modifiez la section build dans package.json :

{
  "build": {
    "appId": "com.yourcompany.yourapp",
    "productName": "Nom de votre App",
    "directories": {
      "output": "release"
    }
  }
}

📝 Guide de Développement

Créer de Nouvelles Pages

  1. Créez un nouveau fichier dans src/pages/ :
// src/pages/my-page.tsx
export default function MyPage() {
  return <div>Ma Nouvelle Page</div>;
}
  1. Ajoutez la route dans src/App.tsx :
import MyPage from "./pages/my-page";

<Route path="/my-page" element={<MyPage />} />

Styliser avec Tailwind CSS

Utilisez directement les classes utilitaires de Tailwind :

<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-primary-500 to-secondary-500">
  <h1 className="text-4xl font-bold text-white">Bonjour le Monde</h1>
</div>

Utiliser les Composants HeroUI

import { Button, Card, CardBody } from "@heroui/react";

<Card>
  <CardBody>
    <Button color="primary" size="lg">
      Cliquez
    </Button>
  </CardBody>
</Card>;

⚠️ Important : Utilisation de Link

Lors de l'utilisation de liens dans ce modèle, vous devez distinguer entre navigation interne et liens externes :

Pour la navigation interne (React Router) :

import { Link } from "react-router-dom";

// ✅ Correct - Pas de rafraîchissement de page
<Link to="/docs">Documentation</Link>
<Link to="/about">À propos</Link>

Pour les sites web externes :

import { Link } from "@heroui/link";

// ✅ Correct - Ouvre dans le navigateur
<Link href="https://github.com" isExternal>GitHub</Link>

❌ Erreur Commune :

import { Link } from "@heroui/link";

// Incorrect ! Cela provoque un rafraîchissement de page et casse le routage
<Link href="/docs">Documentation</Link>

🔐 Communication IPC

Du Moteur de Rendu au Principal

Script de Préchargement (electron/preload.ts) :

contextBridge.exposeInMainWorld("electronAPI", {
  sendMessage: (channel: string, data: any) => {
    ipcRenderer.send(channel, data);
  },
  onMessage: (channel: string, callback: Function) => {
    ipcRenderer.on(channel, (event, ...args) => callback(...args));
  },
});

Utilisation dans React :

window.electronAPI.sendMessage("custom-event", { data: "value" });

🐛 Dépannage

Problèmes Courants

Écran blanc après la compilation ?

  • Assurez-vous d'utiliser HashRouter pour Electron (déjà configuré)
  • Vérifiez que tous les actifs sont inclus dans le tableau files de package.json

Le rechargement à chaud ne fonctionne pas ?

  • Assurez-vous d'exécuter yarn dev et non yarn build
  • Vérifiez que HMR est activé dans vite.config.ts

🤝 Contribuer

Les contributions sont les bienvenues ! N'hésitez pas à soumettre une Pull Request.

📄 Licence

Ce projet est sous licence MIT - consultez le fichier LICENSE pour plus de détails.

🙏 Remerciements

  • Electron - Framework multiplateforme
  • HeroUI - Bibliothèque de composants magnifiques
  • Vite - Outil de compilation ultra-rapide
  • Tailwind CSS - CSS utility-first
  • React - Bibliothèque UI

📞 Support

Si vous avez trouvé ce modèle utile, pensez à lui donner une ⭐ sur GitHub !

Pour des questions ou des problèmes :

Construit avec ❤️ en utilisant Electron, React, Vite et HeroUI