import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import ReadMore from '/components/ReadMore.astro';

La commande CLI create astro 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.

Vous pouvez également exécuter la commande CLI avec l'option template pour commencer votre projet en utilisant n'importe quel thème ou modèle de démarrage existant. Découvrez notre vitrine de thèmes et de modèles de démarrage où vous pouvez parcourir des thèmes pour les blogs, les portfolios, les sites de documentation, les pages d'atterrissage et plus encore !

Si vous préférez installer Astro manuellement, consultez notre guide d'installation manuelle étape par étape.

:::tip[Aperçus en ligne] Vous préférez essayer Astro dans votre navigateur ? Consultez 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.20.8 ou v20.3.0, v22.0.0 ou supérieure. ( v19 et v21 ne sont pas prises en charge.)
  • Éditeur de texte - Nous recommandons VS Code avec notre extension officielle Astro.
  • Terminal - Astro est accessible via son interface en ligne de commande (CLI).

Compatibilité avec les navigateurs

Astro est construit avec Vite, qui cible par défaut les navigateurs prenant en charge le JavaScript moderne. Pour une référence complète, vous pouvez consulter la liste des versions de navigateurs actuellement prises en charge par Vite.

Installer à partir de l'assistant CLI

Vous pouvez exécuter create astro n'importe où sur votre machine, il n'est donc pas nécessaire de créer un nouveau répertoire vide pour votre projet avant de commencer. Si vous n'avez pas encore de répertoire vide pour votre nouveau projet, l'assistant vous aidera à en créer un automatiquement.

<PackageManagerTabs> <Fragment slot="npm"> ```shell # créer un nouveau projet avec npm npm create astro@latest ``` </Fragment> <Fragment slot="pnpm"> ```shell # créer un nouveau projet avec pnpm pnpm create astro@latest ``` </Fragment> <Fragment slot="yarn"> ```shell # créer un nouveau projet avec yarn yarn create astro ``` </Fragment> </PackageManagerTabs> Si tout se passe bien, vous verrez un message de réussite suivi de quelques étapes complémentaires recommandées.

2. Maintenant que votre projet a été créé, vous pouvez accéder à votre nouveau répertoire de projet pour commencer à utiliser Astro.

  1. Si vous avez ignoré l’étape « Installer les dépendances ? » de l’assistant CLI, assurez-vous d’installer vos dépendances avant de continuer.

  2. Vous pouvez maintenant démarrer le serveur de développement d'Astro et visualiser un aperçu en direct de votre projet pendant que vous le construisez !

Options d'installation du CLI

Vous pouvez exécuter la commande create astro avec des options supplémentaires pour personnaliser le processus de configuration (par exemple, répondre « oui » à toutes les questions, ignorer l'animation de Houston) ou votre nouveau projet (par exemple installer ou non git, ajouter des intégrations).

Voir toutes les options disponibles pour la commande create astro

Ajouter des intégrations

Vous pouvez démarrer un nouveau projet Astro et installer toutes les intégrations officielles ou intégrations communautaires prenant en charge la commande astro add en passant l'argument --add à la commande create astro.

Exécutez la commande suivante dans votre terminal, en remplaçant toute intégration prenant en charge la commande astro add :

Utiliser un thème ou un modèle de démarrage

Vous pouvez démarrer un nouveau projet Astro en vous basant sur un exemple officiel ou sur la branche main de n'importe quel dépôt Github en utilisant l'argument --template avec la commande create astro.

Exécutez la commande suivante dans votre terminal, en remplaçant le nom officiel du modèle de démarrage Astro ou le nom d'utilisateur GitHub et le dépôt du thème que vous souhaitez utiliser :

créer un nouveau projet basé sur la branche principale d'un dépôt GitHub

npm create astro@latest -- --template /

</Fragment> <Fragment slot="pnpm"> ```shell # créer un nouveau projet avec un exemple officiel pnpm create astro@latest --template <nom-exemple> # créer un nouveau projet basé sur la branche principale d'un dépôt GitHub pnpm create astro@latest --template <utilisateur-github>/<depot-github>

créer un nouveau projet basé sur la branche principale d'un dépôt GitHub

yarn create astro --template /

</Fragment> </PackageManagerTabs> Par défaut, cette commande utilisera la branche `main` du dépôt de modèles. Pour utiliser un nom de branche différent, transmettez-le en tant que valeur pour l'argument `--template` : `<utilisateur-github>/<depot-github>#<branche>`. ## 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. <Steps> 1. Créez votre dossier Créez un dossier vide portant le nom de votre projet, puis déplacez-vous à 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. <PackageManagerTabs> <Fragment slot="npm"> ```shell npm init --yes ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm init ``` </Fragment> <Fragment slot="yarn"> ```shell yarn init --yes ``` </Fragment> </PackageManagerTabs> 2. Installez 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`. ::: <PackageManagerTabs> <Fragment slot="npm"> ```shell npm install astro ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add astro ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add astro ``` </Fragment> </PackageManagerTabs> Puis, remplacez la section « scripts » par défaut de votre fichier `package.json` par ce qui suit : ```json title="package.json" del={3} ins={4-6} { "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "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 délimiteurs 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 !"); --- <!-- Ci-dessous se trouve le « modèle de votre composant ». C'est simplement du HTML, mais avec un peu de magie à l'intérieur pour vous aider à construire de superbes modèles. --> <html> <body> <h1>Hello, World!</h1> </body> </html> <style> h1 { color: orange; } </style> ``` 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 le fichier `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 MDX 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 la prise en charge 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 puissent comprendre votre projet. Certaines fonctionnalités (comme l'importation de paquets npm) ne sont pas entièrement prises en charge 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ée. 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 le fichier `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" } ``` 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 : <FileTree> - node_modules/ - public/ - robots.txt - src/ - pages/ - index.astro - astro.config.mjs - package-lock.json ou `yarn.lock`, `pnpm-lock.yaml`, etc. - package.json - tsconfig.json </FileTree> 8. Vous pouvez maintenant [démarrer le serveur de développement d'Astro](/fr/develop-and-build/#démarrer-le-serveur-de-développement-dastro) et visualiser un aperçu en direct de votre projet pendant que vous le construisez ! </Steps>
Commencer
Développer et construire