Développer et compiler
Une fois que vous avez un projet Astro, vous êtes prêt à créer avec Astro ! 🚀
Modifier votre projet
Titre de la section Modifier votre projetPour apporter des modifications à votre projet, ouvrez le dossier de votre projet dans votre éditeur de code. Travailler en mode développement avec le serveur de développement en marche vous permet de voir les mises à jour de votre site au fur et à mesure que vous modifiez le code.
Vous pouvez également personnaliser certains aspects de votre environnement de développement telles que la configuration de TypeScript ou l’installation des extensions officielles d’Astro pour les éditeurs.
Démarrer le serveur de développement d’Astro
Titre de la section Démarrer le serveur de développement d’AstroAstro est livré avec un serveur de développement intégré qui contient tout ce dont vous avez besoin pour le développement de projets. La commande CLI astro dev démarrera le serveur de développement local afin que vous puissiez voir votre nouveau site en action pour la première fois.
Chaque modèle de démarrage contient un script préconfiguré qui démarrera astro dev pour vous. Après avoir navigué dans le dossier de votre projet, utilisez votre gestionnaire de paquets préféré pour exécuter cette commande et démarrer le serveur de développement d’Astro.
npm run devpnpm run devyarn run devSi tout se passe bien, Astro va désormais mettre à disposition votre projet à l’adresse http://localhost:4321/. Visitez cette dernière dans votre navigateur et découvrez votre nouveau site !
Travailler en mode développement
Titre de la section Travailler en mode développementAstro va écouter en direct les modifications de fichiers dans votre répertoire src/ et mettre à jour l’aperçu de votre site au fur et à mesure que vous le construisez. Vous n’aurez donc pas besoin de redémarrer le serveur à chaque fois que vous apportez des modifications pendant le développement. Vous serez toujours en mesure de voir une version à jour de votre site dans votre navigateur lorsque le serveur de développement est en cours d’exécution.
Lorsque vous consultez votre site dans le navigateur, vous aurez accès à la barre d’outils de développement d’Astro. Au fur et à mesure que vous le construisez, elle vous aidera à inspecter vos îlots, à repérer les problèmes d’accessibilité et plus encore.
Si vous ne parvenez pas à ouvrir votre projet dans un navigateur après avoir démarré le serveur de développement, revenez dans le terminal où vous avez exécuté la commande dev et vérifiez le message affiché. Il devrait vous indiquer si une erreur s’est produite ou si votre projet est diffusé à une URL différente de http://localhost:4321/.
Compiler et prévisualiser votre site
Titre de la section Compiler et prévisualiser votre sitePour vérifier la version de votre site qui sera créée au moment de la compilation, quittez le serveur de développement (Ctrl + C) et exécutez la commande de compilation appropriée pour votre gestionnaire de paquets dans votre terminal :
npm run buildpnpm buildyarn run buildAstro va compiler une version prête à déployer de votre site dans un dossier séparé (dist/ par défaut) et vous pouvez surveiller sa progression dans le terminal. Cela vous avertira des erreurs de compilation dans votre projet avant de déployer sur le web. Si TypeScript est configuré sur strict ou strictest, le script build vérifiera également les erreurs de type dans votre projet.
Lorsque la compilation est terminée, exécutez la commande preview appropriée (par exemple, npm run preview) dans votre terminal et vous pourrez afficher la version compilée de votre site localement dans la même fenêtre d’aperçu du navigateur.
Notez que cette commande prévisualise votre code tel qu’il existait lors de la dernière exécution de la commande de compilation. Elle est destinée à vous donner un aperçu de l’apparence de votre site lorsqu’il sera déployé sur le web. Toute modification ultérieure apportée à votre code après la compilation ne sera pas reflétée pendant que vous prévisualisez votre site jusqu’à ce que vous exécutiez à nouveau la commande de compilation.
Utilisez (Ctrl + C) pour quitter l’aperçu et lancer une autre commande de terminal, comme redémarrer le serveur de développement pour revenir au travail en mode développement qui se met à jour au fur et à mesure que vous éditez pour afficher un aperçu en direct de vos modifications de code.
Étapes suivantes
Titre de la section Étapes suivantesSuccès ! Vous êtes maintenant prêt à commencer à créer avec Astro ! 🥳
Voici quelques éléments que nous vous recommandons d’explorer ensuite. Vous pouvez les lire dans n’importe quel ordre. Vous pouvez même quitter notre documentation pendant un moment et jouer dans la base de code de votre nouveau projet Astro, en revenant ici à chaque fois que vous rencontrez des difficultés ou que vous avez une question.
Configurer votre environnement de développement
Titre de la section Configurer votre environnement de développementExplorez les guides ci-dessous pour personnaliser votre expérience de développement.
Explorer les fonctionnalités d’Astro
Titre de la section Explorer les fonctionnalités d’AstroSuivre le tutoriel d’introduction
Titre de la section Suivre le tutoriel d’introductionCréez un blog Astro entièrement fonctionnel en partant d’une seule page vierge dans notre tutoriel d’introduction.
C’est une excellente façon de voir comment Astro fonctionne et de vous guider dans les bases des pages, des mises en page, des composants, du routage, des îlots et plus encore. Il inclut également une unité facultative, adaptée aux débutants, pour ceux qui sont novices en matière de concepts de développement web en général, qui vous guidera à travers l’installation des applications nécessaires sur votre ordinateur, la création d’un compte GitHub et le déploiement de votre site.
Learn