🚀 Astro Starter Kit

Un starter kit moderne optimisé pour la performance et le SEO, utilisant Astro, React et Tailwind CSS.

✨ Fonctionnalités

• ⚡ Ultra rapide : Génération statique avec Astro
• ⚛️ React : Hydratation partielle intelligente (Islands Architecture)
• 🎨 Tailwind CSS : Styling moderne et responsive
• 🔍 SEO optimisé : Meta tags et structure HTML5
• 🐳 Docker ready : Build multi-stage optimisé

📦 Structure du projet

/
├── src/
│   ├── layouts/
│   │   └── BaseLayout.astro    # Layout de base avec SEO
│   ├── components/
│   │   └── InteractiveCounter.jsx  # Composant React démo
│   ├── pages/
│   │   └── index.astro         # Page d'accueil
│   └── styles/
│       └── global.css          # Styles Tailwind
├── public/
├── Dockerfile                  # Build multi-stage
├── docker-compose.yml
└── astro.config.mjs

🚀 Démarrage rapide

Développement local

# Installer les dépendances
npm install

# Lancer le serveur de dev
npm run dev

Le site sera accessible sur http://localhost:4321

Build de production

# Générer les fichiers statiques
npm run build

# Prévisualiser le build
npm run preview

Docker

# Build et lancement avec Docker Compose
docker compose up -d --build

# Le site sera accessible sur http://localhost:8080

🎯 Concepts clés

Hydratation partielle (Islands Architecture)

Astro envoie zéro JavaScript par défaut. Les composants React ne sont hydratés que si vous utilisez une directive client:* :

<!-- Rendu statique uniquement (pas de JS) -->
<InteractiveCounter />

<!-- Hydraté côté client (interactif) -->
<InteractiveCounter client:load />

Directives client disponibles

• client:load : Hydrate immédiatement
• client:idle : Hydrate quand le navigateur est inactif
• client:visible : Hydrate quand visible dans le viewport
• client:media : Hydrate selon une media query

📝 Personnalisation

Ajouter une nouvelle page

Créez un fichier .astro dans src/pages/ :

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Ma nouvelle page">
  <h1>Contenu de ma page</h1>
</BaseLayout>

Ajouter un composant React

Créez un fichier .jsx dans src/components/ et utilisez-le avec une directive client:* pour l'interactivité.

🛠️ Technologies

• Astro - Framework web moderne
• React - Bibliothèque UI
• Tailwind CSS - Framework CSS utility-first
• Docker - Containerisation

📄 Licence

MIT