diff --git a/src/pages/fr/install/auto.md b/src/pages/fr/install/auto.md index 3470dc86bf55d..61abbe82bee7b 100644 --- a/src/pages/fr/install/auto.md +++ b/src/pages/fr/install/auto.md @@ -2,14 +2,16 @@ title: Installation d'Astro avec l'ILC automatique description: Comment installer Astro avec NPM, PNPM, ou Yarn via l'outil de création create-astro inclus dans l'ILC. layout: ~/layouts/MainLayout.astro -setup: import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; +setup: | + import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; + import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' --- Prêt à installer Astro ? Suivez notre guide d'installation automatique ou manuel pour commencer. #### Prérequis -- **Node.js** - version `14.15.0`, `v16.0.0`, ou supérieure. +- **Node.js** - version `14.18.0`, `v16.12.0`, ou supérieure. - **Éditeur de code** - Nous recommandons [VS Code](https://code.visualstudio.com/) avec notre [extension officielle Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Console de terminal** - Astro est accessible via son interface par ligne de commande (ILC). @@ -17,135 +19,83 @@ Prêt à installer Astro ? Suivez notre guide d'installation automatique ou manu #### Installation -`create-astro` est le moyen le plus rapide et le plus simple de démarrer un nouveau projet Astro à partir de zéro. +`create-astro` est le moyen le plus rapide pour démarrer un nouveau projet Astro à partir de zéro. Il vous guidera lors de chaque étape d'installation de votre nouveau projet Astro. Il vous permet de choisir entre différents templates de démarrage ou fournir le votre en utilisant l'argument `--template`. -## 1. Utiliser l'ILC +:::tip[Aperçus en ligne] +Vous préférez essayer Astro dans votre navigateur ? Visitez [astro.new](https://astro.new/) pour naviguer entre nos différents templates de démarrage et démarrer un nouveau projet Astro sans jamais quitter votre navigateur. +::: + +## 1. Utiliser l'assistant d'installation Lancez la commande suivante dans votre terminal pour démarrer notre assistant d'installation, `create-astro`. Vous serez guidé dans la création de votre premier projet Astro à l'intérieur du répertoire où vous l'avez lancé. Pas besoin de créer un répertoire ! L'assistant d'installation créera automatiquement un répertoire pour vous. -```shell -# NPM -npm create astro@latest - -# Yarn -yarn create astro - -# PNPM -pnpm create astro@latest -``` - -En fonction de votre gestionnaire de Packages, vous pourriez recevoir une demande de confirmation pour installer `create-astro@latest`. Il vous sera par la suite demandé de choisir un dossier pour votre projet (ex: `./my-astro-site`) qui crééra un nouveau répertoire. - -### Choisir un Template de Démarrage - -Vous allez ensuite apercevoir une petite liste de Templates de démarrage dans laquelle choisir : - -- `Just the basics`: Un excellent modèle de démarrage pour tous ceux qui veulent explorer Astro. -- `Blog`, `Documentation`, `Portfolio`: thèmes prédéfinis pour des cas d'utilisation spécifiques. -- `Completely empty`: Un modèle minimal qui ne contient que les éléments essentiels pour commencer. - -Utilisez les flèches directionnelles (haut et bas) pour naviguer vers le Template que vous souhaitez installer, puis appuyez sur la touche entrée pour valider. - -> 💡 Vous voulez jeter un oeil aux Templates dans votre navigateur avant de choisir ? Allez sur [astro.new](https://astro.new/) - -## 2. Installer les Dépendances (Optionnel) - -L'assiistant d'installation vous proposera d'exécuter la commande `install` pour vous, qui est optionnelle. - -> ⚠️ Si vous ne le faites pas maintenant, vous devrez [installer les dépendances](/fr/install/auto/#2-installer-les-dépendances) après l'assistant d'installation, avant de commencer votre projet. - -### Installer Une ou Plusieurs Intégrations Astro (Optionnel) - -Il vous sera demandé à ce moment d'ajouter n'importe quelle [intégration de Framework UI](/fr/core-concepts/framework-components/) (React, Svelte, Vue, Solid, Preact, Lit) et d'ajouter ensuite d'autres intégrations officielles (tel que Tailwind, Partytown, Sitemap) en exécutant `astro add --yes`. - -Pour sélectionner les intégrations Astro que vous souhaitez inclure dans votre projet, utilisez les flèches directionnelles (haut et bas) pour naviguer et la touche espace pour sélectionner ou désélectionner. Vous pouvez sélectionner plusieurs éléments à la fois, ou continuer sans sélectionner d'intégrations. - -Quand vous êtes satisfait de votre sélection, appuyez sur la touche entrée pour valider. - -> Ces intégrations, et toutes les [intégrations de la communauté Astro](https://astro.build/integrations/), peuvent également être ajoutées plus tard en suivant les instructions dans notre [guide d'intégrations](/fr/guides/integrations-guide/). - -Après avoir sélectionné vos intégrations à ajouter, vous devriez voir le message suivant dans votre terminal pour vous affirmer que `create-astro` va appliquer les changements à votre fichier `astro.config.mjs` : - -```bash -Astro will make the following changes to your config file: -# Peut se traduire par : "Astro va faire les changements suivants dans votre fichier de configuration :" -``` - -Ce message vous informe que vos intégrations ont été ajoutées avec succès à votre fichier de configuration. (Si ce n'est pas le cas, vous pouvez toujours les ajouter manuellement plus tard.) - -### Initialiser un Dépot `.git` (Optionnel) - -À cette dernière étape, vous pouvez choisir d'initialiser un dépot Git dans votre nouveau répertoire. C'est optionnel, mais utile si vous souhaitez utiliser l'outil [Git](https://git-scm.com/) pour votre projet. - -### Étapes Suivantes - -Quand l'assistant d'installation `create-astro` est terminé, vous devriez voir quelques instructions recommandées sur votre écran ("Next Steps") qui vont vous aider à compléter votre configuration et démarrer votre nouveau projet. - -## 2. Installer les Dépendances - -Si vous n'avez pas installé les dépendances de votre projet avec l'assistant d'installation, vous allez maintenant en faire avec votre gestionnaire de Package préféré : - -```bash -# NPM -npm install - -# Yarn -yarn - -# PNPM -pnpm install -``` - -## 3. Lancer Astro ✨ + + + ```shell + # créer un nouveau projet avec npm + npm create astro@latest + ``` + + + ```shell + # créer un nouveau projet avec pnpm + pnpm create astro@latest + ``` + + + ```shell + # créer un nouveau projet avec yarn + yarn create astro + ``` + + + +Vous pouvez exécuter `create-astro` n'importe où sur votre machine, il n'y a donc pas besoin de créer un nouveau répertoire vide pour votre projet avant de commencer. Si vous n'avez encore pas de répertoire vide pour votre nouveau projet, l'assistant aidera à en créer un automatiquement. + +Si tout se passe bien, vous devriez voir un message "Ready for liftoff!" suivi de quelques "Étapes suivantes". Exécutez `cd` vers votre nouveau répertoire pour commencer à utiliser Astro. + +Si vous avez manqué l'étape `npm install` durant l'assistant `create-astro`, veuillez vous assurer d'installer les dépendances avant de continuer. + +## 2. Lancer Astro ✨ Vous pouvez vous attendre à utiliser le serveur de développement intégré d'Astro pour la plupart de vos projets. C'est de cette manière que vous lancerez votre projet localement pendant le développement. Pour commencer, utilisez votre gestionnaire de Packages pour lancer le script de démarrage par défaut : -```bash -# NPM -npm run dev - -# Yarn -yarn start - -# PNPM -pnpm run dev -``` + + + ```shell + npm run dev + ``` + + + ```shell + pnpm run dev + ``` + + + ```shell + yarn run dev + ``` + + Si tout se passe comme prévu, Astro devrait maintenant être en train de faire tourner votre projet à l'addresse [http://localhost:3000/](http://localhost:3000/) ! Astro va également suivre les modifications de fichiers dans le répertoire `src/`, vous n'aurez donc pas besoin de redémarrer le serveur à chaque fois que vous apporterez des modifications au cours du développement. -Si vous n'arrivez pas à ouvrir votre projet dans le navigateur, revenez au terminal où vous avez lancé le script `start` pour voir ce qui a mal tourné. - -## 4. Déployer sur le Web - -Il est temps de déployer votre projet sur la toile ! Lancez la commande `build` dans votre projet pour construire votre site web statique vers un nouveau répertoire nommé `dist/`. - -```bash -# NPM -npm run build - -# Yarn -yarn build - -# PNPM -pnpm run build -``` - -Quand la commande se termine, vous devriez avoir un nouveau répertoire `dist/` dans votre projet que vous pouvez déployer directement sur votre hébergeur web favori. - -Pour commencer à déployer votre site web gratuitement, allez jeter un oeil à notre fier partenaire d'hébergement, [Netlify](https://www.netlify.com/). Pour obtenir des instructions sur la mise en place d'un déploiement, lisez notre [guide de déploiement](/fr/guides/deploy/). +Si vous n'arrivez pas à ouvrir votre projet dans le navigateur, revenez au terminal où vous avez lancé le script `dev` pour voir ce qui a mal tourné, ou si votre projet est servi sur une url différente que celle mentionnée ci-dessus. ## Étapes Suivantes Bravo ! Vous êtes maintenant prêt à développer avec Astro ! -📚 En apprendre plus sur la structure de votre projet Astro dans notre [Guide de structure de projet](/fr/core-concepts/project-structure/). +Voici quelques sujets que nous vous recommendons de suivre. Vous pouvez les suivre dans l'ordre. Vous pouvez même laisser la documentation de côté pendant un temps et aller jouer dans le code de votre nouveau projet Astro, en revenant ici si vous avez des problèmes ou une question. + +📚 **Ajouter un framework:** Apprenez comment étendre Astro avec le support de React, Svelte, Tailwind et plus en utilisant `npx astro add` dans notre [guide d'Integrations](/fr/guides/integrations-guide/). -📚 En apprendre plus sur la structure des composants d'Astro dans notre [Guide de structure des composants](/fr/core-concepts/astro-components/). +📚 **Déployer votre site:** Apprenez-en plus sur la façon de builder et déployer un projet Astro sur le web dans notre [guide de Déploiement](/fr/guides/deploy/). -📚 En apprendre plus sur le routage par pages d'Astro dans notre [Guide de routage](/fr/core-concepts/astro-pages/). +📚 **Comprendre la structure de projet:** En apprendre plus sur la structure de votre projet Astro dans notre [Guide de structure de projet](/fr/core-concepts/project-structure/). diff --git a/src/pages/fr/install/manual.md b/src/pages/fr/install/manual.md index 2fd0a5e7085be..39f8908f13a98 100644 --- a/src/pages/fr/install/manual.md +++ b/src/pages/fr/install/manual.md @@ -2,14 +2,16 @@ title: Installer Astro manuellement description: Comment installer Astro manuellement avec NPM, PNPM, ou Yarn. layout: ~/layouts/MainLayout.astro -setup: import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; +setup: | + import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; + import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' --- Prêt à installer Astro ? Suivez notre guide d'installation automatique ou manuel pour commencer. #### Prérequis -- **Node.js** - version `14.15.0`, `v16.0.0`, ou supérieure. +- **Node.js** - version `14.18.0`, `v16.12.0`, ou supérieure. - **Éditeur de code** - Nous recommandons [VS Code](https://code.visualstudio.com/) avec notre [extension officielle Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). - **Console de terminal** - Astro est accessible via son interface de ligne de commande (ILC). @@ -30,27 +32,55 @@ cd my-astro-project Maintenant que vous êtes dans votre nouveau répertoire, créez votre fichier `package.json`. C'est avec ce fichier que vous pourrez gérer les dépendances de votre projet, y compris Astro. Si vous n'êtes pas familier avec ce format de fichier, lancez la commande suivante pour en créer un. -```bash -npm init --yes -``` + + + ```shell + npm init --yes + ``` + + + ```shell + pnpm init + ``` + + + ```shell + yarn init --yes + ``` + + ## 2. Installer Astro Premièrement, installez les dépendances d'Astro dans votre projet. -```bash -npm install astro -``` + + + ```shell + npm install astro + ``` + + + ```shell + pnpm install astro + ``` + + + ```shell + yarn add astro + ``` + + Ensuite, remplacez la section "scripts" de votre `package.json` par les lignes suivantes : -```diff - "scripts": \{ -- "test": "echo \"Error: no test specified\" && exit 1" -+ "dev": "astro dev", -+ "start": "astro dev", -+ "build": "astro build", -+ "preview": "astro preview" +```json title="package.json" del={2} ins={3-6} + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview" }, ``` @@ -91,7 +121,7 @@ Dans votre éditeur de texte, créez un nouveau fichier dans votre répertoire a Pour ce guide, copiez-collez le code suivant dans votre nouveau fichier : -``` +```diff title="public/robots.txt" # Exemple: Autorisez tous les robots à parcourir et indexer votre site. # Syntaxe Complète: https://developers.google.com/search/docs/advanced/robots/create-robots-txt User-agent: * @@ -104,7 +134,7 @@ Astro est configuré pour utiliser `astro.config.mjs` comme fichier de configura Créez le fichier `astro.config.mjs` à la racine de votre projet, et copiez le code ci-dessous dans le fichier : -``` +```js title="astro.config.mjs" import { defineConfig } from 'astro/config'; // https://astro.build/config/ @@ -115,7 +145,26 @@ Si vous souhaitez inclure un [composant de Framework](/fr/core-concepts/framewor 📚 Lisez l'[API de référence](/fr/reference/configuration-reference/) d'Astro pour plus d'informations. -## 6. Étapes Suivantes +## 6. Créer votre Fichier `tsconfig.json` + +Typescript est configuré en utilisant `tsconfig.json`. Même si vous n'écrivez pas de code TypeScript, ce fichier est important afin que les outils comme Astro et VS Code sachent de quelle façon comprendre votre projet. Certaines fonctionnalités (comme les imports de packages npm) ne sont pas complètement supportés dans l'éditeur sans un fichier `tsconfig.json`. + +Si vous avez l'intention d'écrire du code TypeScript, l'utilisation du template Astro `strict` or `strictest` est recommendé. Vous pouvez voir et comparer les trois configurations de template à [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/). + +Créez `tsconfig.json` à la racine de votre projet, et copiez le code ci-dessous à l'intérieur. (Vous pouvez utiliser `base`, `strict` ou `strictest` pour votre template TypeScript) : + +```json title="tsconfig.json" "base" +{ + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "types": ["astro/client"] + } +} +``` + +📚 Lisez le [guide d'installation de TypeScript](/fr/guides/typescript/#mise-en-place) d'Astro pour plus informations. + +## 7. Étapes Suivantes Si vous avez suivi les étapes ci-dessus, votre répertoire de projet devrait maintenant ressembler à ça : @@ -133,4 +182,4 @@ Si vous avez suivi les étapes ci-dessus, votre répertoire de projet devrait ma Bien joué, vous êtes prêt à utiliser Astro ! -Si vous avez suivi ce guide jusqu'au bout, vous pouvez aller directement à l'[Étape 3: Lancer Astro ✨](/fr/install/auto/#3-lancer-astro-) pour continuer et apprendre comment lancer Astro pour la première fois. +Si vous avez suivi ce guide jusqu'au bout, vous pouvez aller directement à l'[Étape 2: Lancer Astro ✨](/fr/install/auto/#2-lancer-astro-) pour continuer et apprendre comment lancer Astro pour la première fois.