Astro : Guide d'installation

• By Loriginal

Procédure étape par étape pour installer Astro et créer son premier projet, avec les bonnes pratiques de configuration et les commandes essentielles.

La prise en main d’Astro se distingue par sa simplicité et sa rapidité. En quelques commandes, les développeurs peuvent initialiser un projet performant et commencer à coder immédiatement. Ce guide couvre l’installation complète et la configuration de base pour démarrer sur des bases solides.

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 en ligne de commande officiel d’Astro, javascript create-astro, automatise entièrement le processus de configuration.

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 text astro.config.mjs est le centre de contrôle de votre projet. Bien qu’Astro fonctionne par défaut sans configuration, ce fichier vous permet d’étendre ses capacités. Une configuration typique peut inclure l’intégration de frameworks UI comme React ou Vue, et la définition de paramètres de build.

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 Workflow

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.

source : Astro site officiel, le blog, quelques sites crées avec Astro.

Découvrez également