Outillage — Mode d’emploi

Tout ce qui est nécessaire est déjà installé dans ce dossier. Il n’y a rien à télécharger et rien à installer.

Les machines sont hors ligne. La commande npm install ne fonctionnera pas et n’est pas nécessaire.

Ce que contient ce dossier

outillage/
├── README.html          ← ce mode d'emploi
├── reponse_NOM.txt      ← le fichier de réponses à remplir et à rendre
└── projet_template/     ← projet Astro prêt à l'emploi (à copier)

Étape 1 — Copier le projet template

Copiez le dossier projet_template en entier et renommez la copie mon_projet.

Vous pouvez le faire de deux manières, au choix :

Avec l’explorateur de fichiers (souris)

1. Clic droit sur le dossier projet_template → Copier
2. Clic droit dans le dossier parent → Coller
3. Clic droit sur la copie → Renommer → tapez mon_projet

Avec le terminal

cp -R outillage/projet_template mon_projet

Utilisez bien -R en majuscule.

Important : copiez le dossier en entier, sans rien enlever. Il contient node_modules/ (les bibliothèques Astro et TypeScript déjà installées). Sans ce dossier, rien ne fonctionnera.

Étape 2 — Démarrer le serveur Astro

Ouvrez un terminal, placez-vous dans le dossier mon_projet, puis lancez le serveur :

cd mon_projet
npx astro dev

Le serveur affiche une adresse, en général :

http://localhost:4321/

Ouvrez cette adresse dans le navigateur. Vous devez voir la page « Le projet fonctionne ! ».

Astuce : le serveur recharge automatiquement la page à chaque fois que vous enregistrez un fichier. Laissez-le tourner pendant toute la durée de l’examen.

Pour arrêter le serveur : Ctrl+C dans le terminal.

Étape 3 — Où mettre vos fichiers

Le projet est déjà organisé. Vous n’avez aucun dossier à créer :

mon_projet/
├── node_modules/        ← ne pas toucher
├── package.json         ← ne pas toucher
├── tsconfig.json        ← ne pas toucher
└── src/
    ├── pages/
    │   └── index.astro  ← vos pages HTML (déjà présent, à remplacer)
    └── scripts/
        └── app.ts       ← vos scripts TypeScript (déjà présent, à remplacer)

Règle simple :

Dans un fichier .astro, on charge un script TypeScript avec :

<script src="../scripts/app.ts"></script>

Le chemin ../scripts/ fonctionne car on part de src/pages/ pour remonter dans src/.

Étape 4 — Tester du TypeScript seul (sans page web)

Si vous voulez juste tester un bout de code TypeScript dans la console, sans page web :

1. Créez un fichier test.ts à la racine de mon_projet
2. Dans le terminal, placez-vous dans mon_projet puis :

npx tsc
node test.js

Important : tapez npx tsc sans nom de fichier. Si vous écrivez npx tsc test.ts, le fichier tsconfig.json est ignoré et vous aurez des erreurs.

Commandes utiles

À taper depuis le dossier mon_projet :

Rendu de votre copie

Vous ne rendez qu’un seul fichier : reponse_NOM.txt (renommé avec votre nom).

• Toutes vos réponses (théorie et code) vont dans ce fichier, entre les balises prévues.
• Enregistrez très régulièrement (Ctrl+S).
• Vérifiez avant l’envoi que toutes vos réponses y figurent bien.

Les consignes détaillées de rendu se trouvent dans le sujet (SUJET.html).

Résolution de problèmes

« command not found: tsc »

→ Utilisez npx tsc et non tsc. TypeScript est installé localement dans node_modules/.

« command not found: astro »

→ Utilisez npx astro dev et non astro dev.

« Cannot find module ‘astro’ » / « Cannot find module … »

→ Vous n’êtes pas dans le bon dossier, ou node_modules/ n’a pas été copié. Tapez pwd pour voir où vous êtes, puis ls : vous devez voir node_modules, package.json et src. Si node_modules est absent, recopiez projet_template en entier.

« Cannot find module …/node_modules/.bin/dist/cli/index.js »

→ La copie a abîmé le dossier node_modules. Supprimez mon_projet et recommencez la copie avec cp -R (majuscule) ou avec l’explorateur de fichiers.

« No inputs were found in config file »

→ npx tsc n’a trouvé aucun fichier .ts à la racine de mon_projet. Créez-y un fichier (par exemple test.ts) avant de relancer la commande.

Le serveur Astro ne démarre pas

→ Vérifiez avec pwd que vous êtes bien dans mon_projet (le dossier qui contient package.json).

« Port 4321 is already in use »

→ Un serveur tourne déjà. Soit vous le réutilisez (ouvrez http://localhost:4321/), soit vous démarrez sur un autre port : npx astro dev --port 4322.

La page affiche 404 / page introuvable

→ Votre page doit s’appeler index.astro et se trouver dans src/pages/. Vérifiez l’orthographe et l’emplacement.

La page s’affiche mais le script ne fait rien

→ Ouvrez la console du navigateur avec F12, onglet Console, pour voir les erreurs. → Vérifiez le chemin du script : depuis src/pages/, c’est <script src="../scripts/app.ts"></script>.

« document is null » / « Cannot read properties of null »

→ Le getElementById ne trouve pas l’élément. Vérifiez que l’id dans le .astro correspond exactement (majuscules comprises) à celui utilisé dans le .ts.

Mes modifications ne s’affichent pas

→ Enregistrez le fichier (Ctrl+S), puis rechargez la page avec Ctrl+Shift+R (rechargement forcé).

Le terminal est « bloqué » et ne répond plus

→ C’est normal : le serveur Astro tourne en continu dans ce terminal. Ouvrez un deuxième terminal pour taper d’autres commandes, ou faites Ctrl+C pour arrêter le serveur.

Erreur « Digital envelope routines::unsupported »

→ Tapez export NODE_OPTIONS=--openssl-legacy-provider puis relancez la commande.

J’ai cassé mon projet, je veux repartir de zéro

→ Supprimez mon_projet et recopiez projet_template. Vos réponses sont dans reponse_NOM.txt, elles ne sont pas perdues.

Une page web extérieure ne se charge pas

→ C’est normal, les machines sont en mode examen hors ligne. Seul le site du cours est accessible.