/
├── 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