diff --git a/src/content/docs/fr/basics/project-structure.mdx b/src/content/docs/fr/basics/project-structure.mdx index 7075098aa7842..a2a67c7f10d94 100644 --- a/src/content/docs/fr/basics/project-structure.mdx +++ b/src/content/docs/fr/basics/project-structure.mdx @@ -112,7 +112,7 @@ C'est un fichier utilisé par les gestionnaires de paquets JavaScript pour gére Il existe [deux types de dépendances](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) que vous pouvez spécifier dans le fichier `package.json` : `dependencies` et `devDependencies`. Dans la plupart des cas, elles fonctionnent de la même manière : Astro a besoin de toutes les dépendances au moment de la construction, et votre gestionnaire de paquets les installera toutes les deux. Nous recommandons de mettre toutes vos dépendances dans `dependencies` pour commencer, et de n'utiliser `devDependencies` que si vous avez un besoin spécifique. -Pour plus d'informations en ce qui concerne la création d'un nouveau fichier `package.json` pour votre projet, consultez les instructions de [configuration manuelle](/fr/install-and-setup/#manual-setup). +Pour plus d'informations en ce qui concerne la création d'un nouveau fichier `package.json` pour votre projet, consultez les instructions de [configuration manuelle](/fr/install-and-setup/#configuration-manuelle). ### `astro.config.mjs` diff --git a/src/content/docs/fr/guides/deploy/render.mdx b/src/content/docs/fr/guides/deploy/render.mdx index 9e6d9df873506..3b580ebe97c78 100644 --- a/src/content/docs/fr/guides/deploy/render.mdx +++ b/src/content/docs/fr/guides/deploy/render.mdx @@ -20,7 +20,7 @@ Vous pouvez déployer votre projet Astro sur [Render](https://render.com/), un s 4. Donnez un nom à votre site web, sélectionnez la branche et spécifiez la commande de construction et le répertoire de publication - **build command:** `npm run build` (Commande de construction) - **publish directory:** `dist` (Répertoire de publication) - - **Environment variables (advanced)**: (Variables d'environnement) Par défaut, Render utilise Node.js 14.17.0, mais Astro [nécessite une version supérieure](/fr/install-and-setup/#prerequisites). Ajoutez une variable d'environnement avec une **Variable key** (clé de variable) de `NODE_VERSION` et une **Value** (Valeur) de `v18.17.1` or `v20.3.0` ou plus pour dire à Render d'utiliser une version compatible de Node.js. Alternativement, ajoutez un fichier [`.node-version`](https://render.com/docs/node-version) ou [`.nvmrc`](https://render.com/docs/node-version) a votre projet pour spécifier la version de Node.js. + - **Environment variables (advanced)**: (Variables d'environnement) Par défaut, Render utilise Node.js 14.17.0, mais Astro [nécessite une version supérieure](/fr/install-and-setup/#prérequis). Ajoutez une variable d'environnement avec une **Variable key** (clé de variable) de `NODE_VERSION` et une **Value** (Valeur) de `v18.17.1` or `v20.3.0` ou plus pour dire à Render d'utiliser une version compatible de Node.js. Alternativement, ajoutez un fichier [`.node-version`](https://render.com/docs/node-version) ou [`.nvmrc`](https://render.com/docs/node-version) a votre projet pour spécifier la version de Node.js. 5. Cliquez sur le bouton **Create Static Site** diff --git a/src/content/docs/fr/install-and-setup.mdx b/src/content/docs/fr/install-and-setup.mdx new file mode 100644 index 0000000000000..08df4a7f5f3cf --- /dev/null +++ b/src/content/docs/fr/install-and-setup.mdx @@ -0,0 +1,426 @@ +--- +title: Installer et configurer Astro +description: 'Comment installer Astro et commencer un nouveau projet.' +i18nReady: true +--- +import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components'; +import ReadMore from '~/components/ReadMore.astro'; + +La [commande CLI `create astro`](#installer-à-partir-de-lassistant-cli) est le moyen le plus rapide pour démarrer un nouveau projet vierge Astro. Elle vous accompagnera à travers chaque étape pour configurer votre nouveau projet Astro et elle vous permettra de choisir parmi différents modèles de démarrage officiels. + +Ou, vous pouvez démarrer votre projet [en utilisant n'importe quel thème ou modèle de démarrage existant](#utiliser-un-thème-ou-un-modèle-de-démarrage). + +Si vous préférez installer Astro manuellement, consultez notre [guide d'installation manuelle étape par étape](#configuration-manuelle). + +:::tip[Aperçus en ligne] +Vous préférez essayer Astro dans votre navigateur ? Consultez [astro.new](https://astro.new/) pour parcourir nos modèles de démarrage et lancez un nouveau projet Astro sans avoir besoin de quitter votre navigateur. +::: + +## Prérequis + +- **Node.js** - `v18.17.1` ou `v20.3.0` ou supérieure. ( `v19` n'est pas supportée.) +- **Éditeur de texte** - Nous recommandons [VS Code](https://code.visualstudio.com/) avec notre [extension officielle Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). +- **Terminal** - Astro est accessible via son interface en ligne de commande (CLI). + +## Commencer un nouveau projet + +### Installer à partir de l'assistant CLI + + +1. Exécutez la commande suivante dans votre terminal pour commencer notre assistant d'installation pratique : + + + + ```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, ainsi vous n'avez pas besoin de créer un nouveau dossier vide pour votre projet avant de démarrer. Si vous n'avez pas encore de dossier vide pour votre nouveau projet, l'assistant vous aidera à en créer un automatiquement. + + Si tout se passe bien, vous verrez un message de réussite suivi par quelques étapes recommandées. Maintenant que votre projet a été créé, vous pouvez utiliser la commande `cd` pour vous déplacer dans le dossier de votre nouveau projet pour commencer à utiliser Astro. + +2. Si vous avez ignoré l'étape `npm install` proposée par l'assistant CLI, alors assurez-vous d'installer vos dépendances avant de continuer. + +3. Vous pouvez maintenant [démarrer le serveur de développement d'Astro](#démarrer-le-serveur-de-développement-dastro) et visualiser un aperçu en direct de votre projet pendant que vous le construisez ! + + +### Utiliser un thème ou un modèle de démarrage + +Vous pouvez également démarrer un nouveau projet Astro en vous basant sur un [exemple officiel](https://github.com/withastro/astro/tree/main/examples) ou sur la branche `main` de n'importe quel dépôt Github en utilisant l'argument `--template` avec la commande `create astro`. + + +1. Explorez notre [vitrine de thèmes et de modèles de démarrage](https://astro.build/themes/) où vous trouverez des thèmes pour construire des blogs, des portfolios, des sites de documentation, des pages de destination, et plus encore ! Ou, [recherchez sur GitHub](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories) pour trouver encore plus de projets de démarrage. + +2. Exécutez la commande suivante dans votre terminal, en remplaçant le nom du modèle de démarrage officiel d'Astro, ou les noms d'utilisateur et de dépôt GitHub du thème que vous souhaitez utiliser : + + + + ```shell + # créer un nouveau projet avec un exemple officiel + npm create astro@latest -- --template + + # créer un nouveau projet basé sur la branche main d'un dépôt GitHub + npm create astro@latest -- --template / + ``` + + + ```shell + # créer un nouveau projet avec un exemple officiel + pnpm create astro@latest --template + + # créer un nouveau projet basé sur la branche main d'un dépôt GitHub + pnpm create astro@latest --template / + ``` + + + ```shell + # créer un nouveau projet avec un exemple officiel + yarn create astro --template + + # créer un nouveau projet basé sur la branche main d'un dépôt GitHub + yarn create astro --template / + ``` + + + + Par défaut, cette commande utilisera la branche `main` du dépôt du modèle. Pour utiliser un nom de branche différent, renseignez-le au travers de l'argument `--template` : `/#`. + + +3. Répondez aux questions et suivez les instructions de l'assistant CLI. + +4. Vous pouvez maintenant [démarrer le serveur de développement d'Astro](#démarrer-le-serveur-de-développement-dastro) et visualiser un aperçu en direct de votre projet pendant que vous vous l'appropriez ! + + +## Éditer votre projet + +Pour 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 cours d'exécution vous permet de voir les mises à jour sur votre site pendant que vous éditez votre code. + +Vous pouvez aussi [personnaliser les aspects de votre environnement de développement](#configurer-votre-environnement-de-développement) comme configurer Typescript ou installer les extensions officielles d'Astro pour votre éditeur. + +### Démarrer le serveur de développement d'Astro + +Astro est livré avec un serveur de développement intégré qui possède tout ce dont vous avez besoin pour le développement de votre projet. La commande CLI `astro dev` démarrera le serveur de développement local pour que vous puissiez voir votre nouveau site web en action pour la toute première fois. + +Chaque modèle de démarrage est livré avec un script pré-configuré qui exécutera `astro dev` pour vous. Après être entré dans le dossier de votre projet, utilisez votre gestionnaire de paquet préféré pour exécuter cette commande et démarrer le serveur de développement d'Astro. + + + + ```shell + npm run dev + ``` + + + ```shell + pnpm run dev + ``` + + + ```shell + yarn run dev + ``` + + + + +Si tout se passe bien, Astro va maintenant rendre votre projet disponible à l'adresse [http://localhost:4321/](http://localhost:4321/). Visitez ce lien dans votre navigateur et consultez votre nouveau site ! + +### Travailler en mode développement + +Astro écoutera en direct les changements apportés aux fichiers dans votre dossier `src/` et mettra à jour l'aperçu de votre site au fur et à mesure de sa construction. Ainsi vous n'aurez pas besoin de redémarrer le serveur lorsque vous faîtes des changements au cours du développement. Vous verrez toujours une version à jour de votre site dans votre navigateur quand le serveur de développement est en cours d'exécution. + +Quand vous consultez votre site dans votre navigateur, vous aurez accès à la [barre d'outils de développement d'Astro](/fr/guides/dev-toolbar/). Au fur et à mesure que vous construisez, il vous aidera à inspecter vos [îles](/fr/concepts/islands/), à repérer les problèmes d'accessibilité, et plus encore. + +Si vous n'êtes pas en mesure d'ouvrir votre projet dans un navigateur après avoir démarré le serveur de développement, retournez dans le terminal où vous avez exécuté la commande `dev` et vérifiez le message affiché. Il devrait vous informer si une erreur est survenue, ou si votre projet est accessible à une adresse différente de [http://localhost:4321/](http://localhost:4321/). + +### Configurer votre environnement de développement + +Explorez les guides ci-dessous pour personnalier votre expérience de développement. + + + + + + +### TypeScript avec Astro + +Astro est livré avec un support intégré pour [TypeScript](https://www.typescriptlang.org/) ce qui peut aider à éviter les erreurs au moment de l'exécution en définissant les formes des objets et composants dans votre code. + +Vous n'avez pas besoin d'écrire du code Typescript dans vos projets Astro pour en bénéficier. Astro évalue toujours le code de votre composant comme étant du code Typescript, et [l'extension VSCode Astro](/fr/editor-setup/) déduira autant que possible pour fournir l'auto-complétion, des astuces et des erreurs dans votre éditeur. + +Apprenez-en plus sur l'utilisation et la configuration de [TypeScript avec Astro](/fr/guides/typescript/). + +## Créer et prévisualiser votre site + +Pour vérifier la version de votre site qui sera créé au moment de la génération, fermez le serveur (Ctrl + C) et exécutez la commande de construction appropriée pour votre gestionnaire de paquets dans votre terminal : + + + + ```shell + npm run build + ``` + + + ```shell + pnpm build + ``` + + + ```shell + yarn run build + ``` + + + +Astro construira une version prête à être déployée de votre site dans un dossier séparé (`dist/` par défaut) et vous pourrez suivre sa progression dans le terminal. Cela vous alertera de toute erreur de construction dans votre projet avant de le déployer en production. Si TypeScript est configuré sur `strict` ou `strictest`, le script `build` vérifiera également votre projet pour les erreurs de type. + +Une fois la construction terminée, exécutez la commande `preview` appropriée (par exemple `npm run preview`) dans votre terminal et vous pourrez afficher la version construite de votre site localement dans la même fenêtre d'aperçu du navigateur. + +Notez que cela donne un aperçu de votre code tel qu'il existait lors de la dernière exécution de la commande de construction. Ceci est destiné à vous donner un aperçu de l'apparence de votre site une fois [déployé sur le web](#déployer-votre-nouveau-site). Toute modification ultérieure que vous apporterez à votre code après la construction **ne sera pas** reflétée lors de la prévisualisation de votre site jusqu'à ce que vous exécutiez à nouveau la commande de construction. + +Utilisez (Ctrl + C) pour fermer l'aperçu et exécuter une autre commande de terminal, comme redémarrer le serveur de développement pour [travailler à nouveau in development mode](#travailler-en-mode-développement) qui est capable de suivre les modifications apportées à votre code pour afficher un aperçu en direct de ces modifications. + +Apprenez-en plus sur [le CLI d'Astro](/fr/reference/cli-reference/) et les commandes de terminal que vous utiliserez pour développer avec Astro. + +## Déployer votre nouveau site + +Vous souhaiterez peut-être [déployer votre nouveau site immédiatement](/fr/guides/deploy/) avant de commencer à ajouter ou modifier trop de code. Ceci est utile pour publier une version minimale et fonctionnelle de votre site et peut vous faire gagner du temps et des efforts supplémentaires pour dépanner votre déploiement ultérieurement. + +## Prochaines étapes + +Victoire ! 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 quitter un peu notre documentation et aller jouer dans la base de code de votre nouveau projet Astro, en revenant ici chaque fois que vous rencontrez des problèmes ou avez une question. + +### Explorer les fonctionnalités d'Astro + + + + + + + + +### Suivre le tutorial d'introduction + +Construire un blog Astro entièrement fonctionnel en commençant avec une seule page vierge dans notre [tutoriel d'introduction](/fr/tutorial/0-introduction/). + +C'est un excellent moyen de voir comment Astro fonctionne et vous guide à travers les bases des pages, des mises en page, des composants, du routage, des îles et bien plus encore. Il comprend également une unité facultative adaptée aux débutants pour les nouveaux venus dans les concepts de développement web en général, qui vous guidera dans l'installation des applications nécessaires sur votre ordinateur, la création d'un compte GitHub et le déploiement de votre site. + +## Configuration manuelle + +Ce guide vous accompagnera à travers les étapes pour installer et configurer manuellement un nouveau projet Astro. + +Si vous préférez ne pas utiliser notre outil CLI automatique `create astro`, vous pouvez configurer votre projet par vous-même en suivant le guide ci-dessous. + + +1. Créez votre dossier + + Créez un dossier vide portant le nom de votre projet, puis entrez à l'intérieur. + + ```bash + mkdir mon-projet-astro + cd mon-projet-astro + ``` + + Une fois que vous êtes dans votre nouveau répertoire, créez le fichier `package.json` de votre projet. C'est ainsi que vous gérerez les dépendances de votre projet, y compris Astro. Si vous n'êtes pas familier avec ce format de fichier, exécutez la commande suivante pour en créer un. + + + + ```shell + npm init --yes + ``` + + + ```shell + pnpm init + ``` + + + ```shell + yarn init --yes + ``` + + + +2. Installer Astro + + Commencez par installer les dépendances du projet Astro dans votre projet. + + :::note[Important] + Astro doit être installé localement, et non globalement. Assurez-vous que vous **n'utilisez pas** `npm install -g astro` `pnpm add -g astro` ou `yarn add global astro`. + ::: + + + + ```shell + npm install astro + ``` + + + ```shell + pnpm add astro + ``` + + + ```shell + yarn add astro + ``` + + + + Puis, remplacez toute section réservée « scripts » de votre `package.json` par ce qui suit : + + ```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" + }, + ``` + + Vous utiliserez ces scripts plus loin dans le guide pour démarrer Astro et exécuter ses différentes commandes. + +3. Créez votre première page + + Dans votre éditeur de texte, créez un nouveau fichier dans votre dossier à l'emplacement `src/pages/index.astro`. Ce sera votre première page Astro dans le projet. + + Pour ce guide, copiez et collez l'extrait de code suivant (en incluant les tirets `---`) dans votre nouveau fichier : + + ```astro title="src/pages/index.astro" + --- + // Bienvenue dans Astro ! Tout ce qui se trouve entre ces barrières de code + // à trois tirets est le « frontmatter de votre composant ». Il ne s'exécute + // jamais dans le navigateur. + console.log("Ceci s'exécute dans votre terminal, et non dans le navigateur !"); + --- + + + +

Hello, World!

+ + + + ``` + +4. Créez votre première ressource statique + + Vous voudrez également créer un dossier `public/` pour stocker vos ressources statiques. Astro inclura toujours ces ressources dans votre version finale, afin que vous puissiez les référencer en toute sécurité à partir de vos modèles de composants. + + Dans votre éditeur de texte, créez un nouveau fichier dans votre dossier à l'emplacement `public/robots.txt`. `robots.txt` est un fichier simple que la plupart des sites incluent pour indiquer aux robots de recherche comme Google comment traiter votre site. + + Pour ce guide, copiez et collez l'extrait de code suivant dans votre nouveau fichier : + + ```diff title="public/robots.txt" + # Exemple : Autoriser tous les robots à scanner et indexer votre site. + # Syntaxe complète : https://developers.google.com/search/docs/advanced/robots/create-robots-txt + User-agent: * + Allow: / + ``` + +5. Créez `astro.config.mjs` + + Astro est configuré en utilisant `astro.config.mjs`. Ce fichier est optionnel si vous n'avez pas besoin de configurer Astro mais vous souhaiterez peut-être le créer maintenant. + + Créez `astro.config.mjs` à la racine de votre projet et copiez le code ci-dessous à l'intérieur : + + ```js title="astro.config.mjs" + import { defineConfig } from 'astro/config'; + + // https://astro.build/config + export default defineConfig({}); + ``` + + Si vous souhaitez ajouter des [composants de framework UI](/fr/guides/framework-components/) comme React, Svelte, etc. ou utiliser d'autres outils comme Tailwind ou Partytown dans votre projet, c'est ici que vous [importerez et configurerez manuellement les intégrations](/fr/guides/integrations-guide/). + + Consultez la [référence de configuration de l'API](/fr/reference/configuration-reference/) d'Astro pour plus d'informations. + +6. Ajoutez le support de TypeScript + + TypeScript est configuré en utilisant `tsconfig.json`. Même si vous n'écrivez pas de code TypeScript, ce fichier est important pour que les outils comme Astro et VS Code puisse comprendre votre projet. Certaines fonctionnalités (comme l'import de paquets npm) ne sont pas entièrement supportés dans l'éditeur sans un fichier `tsconfig.json`. + + Si vous avez l'intention d'écrire du code Typescript, l'utilisation des modèles `strict` ou `strictest` d'Astro est recommandé. Vous pouvez consulter et comparer les trois modèles de configuration dans [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 modèle TypeScript) : + + ```json title="tsconfig.json" "base" + { + "extends": "astro/tsconfigs/base" + } + ``` + + Finalement, créez `src/env.d.ts` pour informer TypeScript des types ambiants disponibles dans un projet Astro : + + ```ts title="src/env.d.ts" + /// + ``` + + Consultez le [guide d'Astro sur la configuration de TypeScript](/fr/guides/typescript/#configuration) pour plus d'informations. + +7. Prochaines étapes + + Si vous avez suivi les étapes ci-dessus, le dossier de votre projet devrait maintenant ressembler à ça : + + + - node_modules/ + - public/ + - robots.txt + - src/ + - pages/ + - index.astro + - env.d.ts + - astro.config.mjs + - package-lock.json ou `yarn.lock`, `pnpm-lock.yaml`, etc. + - package.json + - tsconfig.json + + +8. Vous pouvez maintenant [démarrer le serveur de développement d'Astro](#démarrer-le-serveur-de-développement-dastro) et visualiser un aperçu en direct de votre projet pendant que vous le construisez ! + + diff --git a/src/content/docs/fr/recipes/bun.mdx b/src/content/docs/fr/recipes/bun.mdx index 6ff5dbac1c80b..1c5a6bea30ac5 100644 --- a/src/content/docs/fr/recipes/bun.mdx +++ b/src/content/docs/fr/recipes/bun.mdx @@ -26,7 +26,7 @@ bunx create-astro@latest my-astro-project-using-bun ``` :::tip -Vous pouvez également [créer un nouveau projet Astro à partir d'un dépôt Astro GitHub existant](/fr/install-and-setup/#use-a-theme-or-starter-template) en utilisant l'option `--template` : +Vous pouvez également [créer un nouveau projet Astro à partir d'un dépôt Astro GitHub existant](/fr/install-and-setup/#utiliser-un-thème-ou-un-modèle-de-démarrage) en utilisant l'option `--template` : ```bash bunx create-astro@latest my-astro-project-using-bun --template eliancodes/brutal ``` diff --git a/src/content/docs/fr/reference/cli-reference.mdx b/src/content/docs/fr/reference/cli-reference.mdx index 4853bb5105479..1fe7abe866375 100644 --- a/src/content/docs/fr/reference/cli-reference.mdx +++ b/src/content/docs/fr/reference/cli-reference.mdx @@ -94,7 +94,7 @@ Vous pouvez également utiliser des scripts dans `package.json` pour des version Pour les commandes `astro` les plus courantes (`astro dev`, `astro build` et `astro preview`), les scripts suivants sont ajoutés automatiquement lorsque vous créez un projet en utilisant [l'assistant d'installation `create astro`](/fr/install-and-setup/). -Lorsque vous suivez les instructions pour [installer Astro manuellement](/fr/install-and-setup/#manual-setup), vous êtes invité à ajouter vous-même ces scripts. Vous pouvez également ajouter manuellement d'autres scripts à cette liste pour toute commande que vous utilisez fréquemment. +Lorsque vous suivez les instructions pour [installer Astro manuellement](/fr/install-and-setup/#configuration-manuelle), vous êtes invité à ajouter vous-même ces scripts. Vous pouvez également ajouter manuellement d'autres scripts à cette liste pour toute commande que vous utilisez fréquemment. ```json title="package.json" {