114 lines
2.7 KiB
Markdown
114 lines
2.7 KiB
Markdown
# 🚀 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# Générer les fichiers statiques
|
|
npm run build
|
|
|
|
# Prévisualiser le build
|
|
npm run preview
|
|
```
|
|
|
|
### Docker
|
|
|
|
```bash
|
|
# 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:*` :
|
|
|
|
```astro
|
|
<!-- 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/` :
|
|
|
|
```astro
|
|
---
|
|
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](https://astro.build) - Framework web moderne
|
|
- [React](https://react.dev) - Bibliothèque UI
|
|
- [Tailwind CSS](https://tailwindcss.com) - Framework CSS utility-first
|
|
- [Docker](https://www.docker.com) - Containerisation
|
|
|
|
|