Installer Astro proprement, sans perdre du temps sur les réglages de base.
Astro permet de poser rapidement un projet moderne, mais un démarrage propre reste décisif pour éviter les écarts entre environnement local, build et production. L'objectif n'est pas seulement d'installer un framework, mais de partir avec une base stable, lisible et prête à évoluer.
Ce guide rassemble les étapes utiles pour initialiser Astro, vérifier les prérequis, comprendre la structure générée et sécuriser les premières décisions de configuration avant d'aller plus loin.
Prérequis et initialisation du projet
Avant de commencer, assurez-vous que Node.js (version 18.14.1 ou supérieure) est installé sur votre machine. L'outil officiel create-astro automatise l'initialisation du projet et réduit les erreurs de configuration au démarrage.
Ouvrez votre terminal et exécutez la commande suivante pour lancer l'assistant de création de projet :
Terminal : Astro installation
npm create astro@latest
Structure du projet et première exploration une fois l'installation
Une fois l'installation terminée, naviguez dans le dossier de votre projet et examinez sa structure. La hiérarchie par défaut révèle la philosophie d'Astro : Structure du projet
mon-projet-astro/
├── public/ # Fichiers statiques
│ ├── favicon.svg
│ └── robots.txt
├── src/
│ ├── components/ # Composants Astro, React, Vue, etc.
│ │ ├── Header.astro
│ │ └── Button.jsx
│ ├── layouts/ # Layouts de page
│ │ └── Layout.astro
│ ├── pages/ # Pages du site (basé sur le routing de fichiers)
│ │ ├── index.astro
│ │ └── about.astro
│ └── styles/ # Fichiers CSS/SCSS
│ └── global.css
├── astro.config.mjs # Configuration d'Astro
├── package.json
├── tsconfig.json # Configuration TypeScript (optionnel)
└── tailwind.config.js # Configuration Tailwind (optionnel)
Pour lancer le serveur de développement, exécutez :
Terminal
npm run dev
Votre application sera accessible à l'adresse http://localhost:4321. Ce serveur bénéficie du Hot Module Reload (HMR), permettant de voir vos modifications en temps réel.
Configuration essentielle avec astro.config.mjs
Le fichier astro.config.mjs est le centre de contrôle de votre projet. Même si Astro fonctionne avec très peu de configuration, ce point d'entrée devient vite essentiel dès que vous ajoutez des intégrations, des règles de build ou un contexte de déploiement plus exigeant.
Une configuration typique peut inclure l'intégration de frameworks UI comme React ou Vue, la définition de l'URL de production et le choix d'options qui influencent directement la qualité du build final.
Exemple d'intégration de React :
javascript
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
integrations: [react()],
site: 'https://mondomaine.com',
});
Commandes indispensables pour le cycle de travail
Au-delà du dev, maîtrisez ces commandes clés :
- npm run build : Génère la version de production dans le dossier dist/
- npm run preview : Prévisualise localement la version buildée
- npm run astro check : Vérifie les erreurs TypeScript (si configuré)
Prochaines étapes et bonnes pratiques
Après l'installation, explorez la création de votre première page dans src/pages/index.astro et expérimentez avec les composants. La documentation officielle d'Astro reste la ressource la plus complète pour approfondir les concepts d'îlots d'interactivité et de collections de contenu. Avec cette base technique solidement établie, vous êtes désormais équipé pour exploiter pleinement le potentiel d'Astro et développer des sites web exceptionnellement performants.
Sources : Astro site officiel, le blog, quelques sites crées avec Astro.
