astro/docs/src/pages/fr/installation.md at 741411306553668083a8977b94755d557577197c

* add "astro preview" command

* Update green-buttons-reflect.md

* Update cli-reference.md

2021-08-26 12:08:52 -07:00

5.8 KiB

Raw Blame History

layout	title	lang
~/layouts/MainLayout.astro	Installation	fr

Il y a plusieurs façons d'installer Astro dans un nouveau projet.

Prérequis

Node.js - v12.20.0, v14.13.1, v16.0.0, or plus.
Éditeur de texte - Privilégiez VS Code et l'extension Astro officielle.
Terminal - Astro s'utilise principalement en ligne de commande.

Ce guide utilise npm dans les exemples ci-après, mais vous pouvez utiliser yarn ou pnpm si vous y êtes habitué·e.

Initialisation complète

npm init astro est le moyen le plus facile de créer un nouveau projet avec Astro. Entrez cette commande dans un terminal pour lancer create-astro, l'assistant d'installation.

# Avec NPM
npm init astro

# Yarn
yarn create astro

L'assistant d'installation create-astro vous propose de choisir entre différents squelettes d'application, mais offre aussi la possibilité d'importer un projet Astro directement depuis GitHub.

# Note : remplacez "my-astro-project" avec le nom de votre projet.

# npm 6.x
npm init astro my-astro-project --template starter
# npm 7+ (tiret -- supplémentaire)
npm init astro my-astro-project -- --template starter
# yarn
yarn create astro my-astro-project --template starter
# À partir d'un template disponible sur GitHub
npm init astro my-astro-project -- --template [GITHUB_USER]/[REPO_NAME]
# ... ou si ce template ce trouve à l'intérieur d'un dépôt GitHub
npm init astro my-astro-project -- --template [GITHUB_USER]/[REPO_NAME]/path/to/template

Après que create-astro a mis en place l'architecture de votre projet, n'oubliez pas d'installer les dépendances avec npm, yarn ou pnpm. Par exemple avec npm:

npm install

Vous pouvez maintenant lancer votre projet. Une fois votre projet prêt à être déployé, vous pourrez le compiler. Astro va empaqueter votre application et produire les fichiers statiques nécessaires pour que vous puissiez déployer votre application.

Installation manuelle

Vous pouvez installer Astro en vous passant de l'assistant create-astro avec les quelques étapes suivantes.

Créer un projet

# Créez et placez vous dans un nouveau dossier
mkdir my-astro-project
cd my-astro-project

Créer un `package.json`

# Cette commande va créer un fichier package.json basique
npm init --yes

Astro est conçu pour fonctionner avec tout l'ecosystème npm. Cela est rendu possible par un fichier de projet nommé package.json à la racine de votre projet. Si vous n'êtes pas familier·e avec le fichier package.json, nous vous recommandons fortement de lire la documentation officielle sur le site de npm.

Installer Astro

En suivant les instructions précédentes, vous devriez avoir un dossier avec un seul fichier package.json dedans. Vous pouvez maintenant ajouter Astro à votre projet.

npm install astro

Vous pouvez aussi remplacer la section "scripts" du fichier package.json avec les lignes suivantes :

  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
  },
}

La commande dev démarre le serveur de développement Astro à l'adresse http://localhost:3000. Une fois votre projet terminé, la commande build produit votre site dans le dossier dist/. En savoir plus sur le déploiement d'un site développé avec Astro.

Créer une première page

Ouvrez votre éditeur favori, et créez un nouveau fichier :

Créez un nouveau fichier à l'emplacement src/pages/index.astro.
Copiez-collez l'extrait suivant (--- compris) dedans.

---
// Le code JS/TS écrit entre les (---) n'est exécuté que par le serveur
console.log('Coucou dans le terminal')
---

<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

<style lang="scss">
  body {
    h1 {
      color: orange;
    }
  }
</style>

<script>
  // Le code JS écrit ici n'est exécuté que dans le navigateur
  console.log('Coucou dans la console du navigateur')
</script>

Vous venez de lire un exemple de syntaxe des composants Astro, inspirée par le HTML et le JSX.

Vous pouvez continuer à ajouter des fichiers dans le dossier src/pages, et Astro se servira du nom du fichier pour ajouter des pages à votre site. Par exemple, si vous ajoutez une page src/pages/a-propos.astro (par exemple en reprenant le code ci-dessus), Astro va générer une nouvelle page à l'adresse http://localhost:3000/a-propos.

Démarrer Astro

npm run dev

Astro va démarrer votre site à l'adresse http://localhost:3000. En ouvrant cette URL dans votre navigateur, vous devriez voir s'afficher "Hello, World", ou bien la page créée précédemment.