Développer et construire
Une fois que vous avez un projet Astro, vous êtes prêt à construire avec Astro ! 🚀
Modifier votre projet
Titre de la section Modifier votre projetPour apporter des modifications à votre projet, ouvrez votre dossier de 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 les aspects de votre environnement de développement telles que la configuration de TypeScript ou l’installation des extensions officielles de l’éditeur Astro.
Démarrer le serveur de développement Astro
Titre de la section Démarrer le serveur de développement 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 Astro.
npm run devpnpm run devyarn run devSi tout se passe bien, Astro va désormais servir votre projet sur http://localhost:4321/. Visitez cette adresse 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 les modifications en direct dans votre répertoire src/ et mettre à jour votre aperçu du site en le construisant, de sorte que vous n’aurez pas à 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 votre navigateur, vous aurez accès à la barre d’outils de développement d’Astro. Au fur et à mesure que vous construisez, elle vous aidera à inspecter vos îles, à repérer les problèmes d’accessibilité et plus encore.
Si vous ne pouvez pas ouvrir votre projet dans votre navigateur après avoir démarré le serveur de développement, revenez à la console où vous avez lancé la commande dev et vérifiez le message affiché. Il devrait vous indiquer si une erreur s’est produite ou si votre projet est servi à une URL différente de http://localhost:4321/.
Construire et prévisualiser votre site
Titre de la section Construire et prévisualiser votre sitePour vérifier la version de votre site qui sera créée à l’exécution du build, quittez le serveur de développement (Ctrl + C) et exécutez la commande de construction appropriée pour votre gestionnaire de paquets dans votre terminal :
npm run buildpnpm buildyarn run buildAstro va construire 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 la console. Cela vous avertira des erreurs de construction dans votre projet avant de déployer sur le web. Si TypeScript est configuré pour strict ou strictest, la commande build de build vérifiera également votre projet pour les erreurs de type.
Lorsque la construction est terminée, exécutez la commande appropriée preview (par exemple, npm run preview) dans votre terminal et vous pouvez voir la version construite de votre site localement dans la même fenêtre de prévisualisation du navigateur.
Notez que cet aperçu de votre code comme il existait lorsque la commande de construction a été exécutée pour la dernière fois. Cela est conçu pour vous donner une prévisualisation de la façon dont votre site sera affiché lorsqu’il sera déployé sur le web. Toute modification ultérieure apportée à votre code après la construction ne sera pas reflétée pendant que vous prévisualisez votre site jusqu’à ce que vous exécutiez à nouveau la commande de construction.
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 à construire 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 laisser notre documentation un peu et jouer dans votre nouvelle base de code de 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éveloppementExplorer 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’AstroSuivez le tutoriel d’introduction
Titre de la section Suivez le tutoriel d’introductionConstruisez 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 îles 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