1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
layout: ~/layouts/MainLayout.astro
title: Installation
lang: 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](https://code.visualstudio.com/) et [l'extension Astro officielle](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Terminal** - Astro s'utilise principalement en ligne de commande.
Ce guide utilise [`npm`](https://www.npmjs.com/) dans les exemples ci-après, mais vous pouvez utiliser [`yarn`](https://yarnpkg.com/) ou [`pnpm`](https://pnpm.io/) 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.
```bash
# Avec NPM
npm init astro
# Yarn
yarn create astro
```
L'assistant d'installation [`create-astro`](https://github.com/snowpackjs/astro/tree/main/packages/create-astro) vous propose de choisir entre différents [squelettes d'application](/examples), mais offre aussi la possibilité d'importer un projet Astro directement depuis GitHub.
```bash
# 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:
```bash
npm install
```
Vous pouvez maintenant [lancer](#démarrer-astro) votre projet. Une fois votre projet prêt à être déployé, vous pourrez [le compiler](#compiler-avec-astro). Astro va empaqueter votre application et produire les fichiers statiques nécessaires pour que vous puissiez [déployer](/guides/deploy) 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
```bash
# Créez et placez vous dans un nouveau dossier
mkdir my-astro-project
cd my-astro-project
```
### Créer un `package.json`
```bash
# 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](https://docs.npmjs.com/creating-a-package-json-file).
### 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.
```bash
npm install astro
```
Vous pouvez aussi remplacer la section "scripts" du fichier `package.json` avec les lignes suivantes :
```diff
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "dev": "astro dev",
+ "build": "astro build",
+ "preview": "astro preview"
},
}
```
La commande [`dev`](#start-astro) démarre le serveur de développement Astro à l'adresse `http://localhost:3000`. Une fois votre projet terminé, la commande [`build`](#build-astro) produit votre site dans le dossier `dist/`. [En savoir plus sur le déploiement d'un site développé avec Astro.](/guides/deploy)
### Créer une première page
Ouvrez votre éditeur favori, et créez un nouveau fichier :
1. Créez un nouveau fichier à l'emplacement `src/pages/index.astro`.
2. Copiez-collez l'extrait suivant (`---` compris) dedans.
```astro
---
// 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](#démarrer-astro)
```bash
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.
## [Compiler avec Astro](#compiler-avec-astro)
```bash
npm run build
```
Astro va produire une version allégée du site et la sauvegarder directement sur le disque. Votre application se trouvera dans le dossier `dist/`.
## Prochaines étapes
Vous êtes désormais prêt·e à développer !
Nous vous recommandons de prendre le temps de vous familiariser avec Astro et son fonctionnement. Nous vous recommandons les guides suivants :
📚 En savoir plus sur [la structure des projets Astro](/core-concepts/project-structure).
📚 En savoir plus sur [la syntaxe des composants Astro](/core-concepts/astro-components).
📚 En savoir plus sur [la génération des adresses à partir de l'arborescence.](/core-concepts/astro-pages).
|
