Aller au contenu principal

Frontend (baldr-template)

Le template frontend Baldr est un modèle de site web prêt pour la production pour construire des sites publics avec Baldr. Il fournit les fondations pour créer des sites web rapides, optimisés pour le SEO avec des fonctionnalités modernes.

Vue d'ensemble​

Le template frontend est construit avec React Router v7 et conçu pour des performances optimales et le SEO. Il s'intègre de manière transparente avec l'API backend Baldr pour récupérer et afficher le contenu.

Fonctionnalités principales​

  • Rendu côté serveur (SSR) : Chargement initial rapide des pages et optimisation SEO
  • Système de modules : Chargement dynamique du contenu basé sur les modules disponibles
  • Données structurées : Support intégré des données structurées schema.org
  • Multi-langue : Support de plusieurs langues
  • Design responsive : Layouts responsive mobile-first
  • Gestion des pages : Routing et contenu de pages dynamiques
  • Optimisation SEO : Génération de meta tags, sitemaps, robots.txt

Sections de documentation​

Guides principaux​

Données structurées​

Structure du projet​

app/
├── api/           # Hooks d'intégration API
├── assets/        # Assets statiques (icônes, styles)
├── components/    # Composants React (atoms, molecules, organisms)
├── config/        # Fichiers de configuration
├── context/       # Providers React Context
├── hooks/         # Hooks React personnalisés
├── interfaces/    # Interfaces TypeScript
├── pages/         # Composants de pages
├── routes/        # Définitions des routes
├── services/      # Services de logique métier
├── types/         # Types TypeScript
└── utils/         # Fonctions utilitaires

Démarrage​

  1. Clonez le template
  2. Installez les dépendances : npm install
  3. Configurez les variables d'environnement (voir .env.example)
  4. Démarrez le serveur de développement : npm run dev
  5. Build pour la production : npm run build

Variables d'environnement​

Variables d'environnement clés à configurer :

  • API_URL : URL de l'API backend
  • SITE_URL : URL de votre site web
  • DEFAULT_LANGUAGE : Code de langue par défaut

Stack technique​

  • React Router v7 : Routing et SSR
  • TypeScript : Type safety
  • Vite : Outil de build
  • Tailwind CSS : Styling (optionnel, selon votre configuration)

Bonnes pratiques​

  1. Utilisez le système de modules : Exploitez le système de modules pour le contenu dynamique
  2. Implémentez les données structurées : Ajoutez des données structurées schema.org à toutes les pages
  3. Optimisez les images : Utilisez des formats et tailles d'images appropriés
  4. SEO en premier : Considérez toujours le SEO lors de la création de pages
  5. Typez tout : Utilisez des interfaces TypeScript pour toutes les structures de données