Créer votre premier projet Astro

Préparez-vous à…

• Exécuter l’assistant de configuration create astro pour créer un nouveau projet Astro
• Démarrer le serveur Astro en mode développement (dev)
• Afficher un aperçu en direct de votre site web dans votre navigateur

Exécuter l’assistant de configuration d’Astro

Titre de la section Exécuter l’assistant de configuration d’Astro

La méthode préférée pour créer un nouveau site Astro est d’utiliser notre assistant de configuration create astro.

1. Dans la ligne de commande de votre terminal, exécutez la commande suivante en utilisant votre gestionnaire de paquets préféré :

   npm

   # créez un nouveau projet avec npm
   npm create astro@latest

   pnpm

   # créez un nouveau projet avec pnpm
   pnpm create astro@latest

   Yarn

   # créez un nouveau projet avec yarn
   yarn create astro

2. Saisissez y pour installer create-astro.

3. Lorsque l’invite vous demande où créer le projet, saisissez le nom d’un dossier pour créer un nouveau répertoire pour votre projet, par exemple : ./tutoriel

   Note

   Un nouveau projet Astro ne peut être créé que dans un dossier complètement vide, alors choisissez un nom pour votre dossier qui n’existe pas encore !

4. Vous verrez une courte liste de modèles de démarrage parmi lesquels choisir. Utilisez les touches fléchées (haut et bas) pour accéder au modèle minimal (« empty »), puis appuyez sur Entrée pour soumettre votre choix.

5. Lorsque l’invite vous demande si vous souhaitez ou non installer des dépendances, saisissez y.

6. Lorsque l’invite vous demande si vous souhaitez ou non initialiser un nouveau dépôt git, saisissez y.

Une fois l’assistant d’installation terminé, vous n’avez plus besoin de ce terminal. Vous pouvez maintenant ouvrir VS Code pour continuer.

Ouvrir votre projet dans VS Code

Titre de la section Ouvrir votre projet dans VS Code

7. Ouvrez VS Code. Vous serez invité à ouvrir un dossier. Choisissez le dossier que vous avez créé lors de l’assistant de configuration.

8. Si c’est la première fois que vous ouvrez un projet Astro, vous devriez voir une notification vous demandant si vous souhaitez installer les extensions recommandées. Cliquez pour voir les extensions recommandées, et choisissez l’extension de prise en charge du langage Astro. Celle-ci fournira la coloration syntaxique et la saisie semi-automatique pour votre code Astro.

9. Assurez-vous que le terminal est visible et que vous pouvez voir l’invite de commande, comme ceci :

   utilisateur@machine:~/tutoriel$

   Raccourci clavier

   Pour modifier la visibilité du terminal, utilisez Ctrl + J (macOS : Cmd ⌘ + J).

Vous pouvez maintenant utiliser le terminal intégré à cette fenêtre, plutôt que l’application Terminal de votre ordinateur, pour le reste de ce tutoriel.

Exécuter Astro en mode dev

Titre de la section Exécuter Astro en mode dev

Pour prévisualiser les fichiers de votre projet comme un site web pendant que vous travaillez, vous devez exécuter Astro en mode développement (dev).

Démarrer le serveur de développement

Titre de la section Démarrer le serveur de développement

10. Exécutez la commande pour démarrer le serveur dev d’Astro en tapant dans le terminal de VS Code :

    npm

    npm run dev

    pnpm

    pnpm run dev

    Yarn

    yarn run dev

    Vous devriez maintenant voir une confirmation dans le terminal indiquant qu’Astro fonctionne en mode dev. 🚀

Afficher un aperçu de votre site web

Titre de la section Afficher un aperçu de votre site web

Les fichiers de votre projet contiennent tout le code nécessaire pour afficher un site web Astro, mais c’est le navigateur qui est responsable de l’affichage de votre code sous forme de pages web.

11. Cliquez sur le lien localhost dans la fenêtre du terminal pour voir un aperçu en direct de votre nouveau site web Astro !

    (Astro utilise http://localhost:4321 par défaut si le port 4321 est disponible.)

    Voici à quoi devrait ressembler le site web de départ « Empty Project » d’Astro dans l’aperçu du navigateur :

    

Utilisation du serveur de développement d’Astro

Tant que le serveur d’Astro fonctionne en mode dev, vous NE pourrez PAS exécuter de commandes dans la fenêtre du terminal. À la place, cette fenêtre vous donnera des commentaires pendant que vous prévisualisez votre site.

Vous pouvez arrêter le serveur dev à tout moment et revenir à l’invite de commande en tapant Ctrl + C dans le terminal.

Parfois, le serveur dev s’arrêtera de lui-même pendant que vous travaillez. Si votre aperçu en direct cesse de fonctionner, retournez dans le terminal et redémarrez le serveur dev en tapant npm run dev.

Liste de contrôle

Titre de la section Liste de contrôle

• Je peux créer un nouveau projet Astro.
• Je peux démarrer le serveur dev d’Astro.

Ressources

Titre de la section Ressources

• Bien démarrer avec Visual Studio Code (Anglais) externe — un tutoriel vidéo pour installer, configurer et travailler avec VS Code