Bonus — Node, npm, Astro et TypeScript

Hors programme : à quoi ressemble un vrai projet

ImportantCette page n’est pas au programme

Elle n’est pas évaluée. Elle existe pour deux raisons :

  1. Vous entendrez ces mots partout, autant savoir ce qu’ils désignent
  2. Si vous voulez continuer après le cours, c’est par là qu’il faut aller

Ne vous y aventurez qu’une fois à l’aise avec les 14 séances.

Pourquoi on ne s’en sert pas dans le cours

Tout ce qu’on a fait tient dans trois fichiers ouverts par un navigateur. C’est volontaire :

  • Aucune installation ne peut échouer
  • Aucune ligne de commande obligatoire
  • On voit immédiatement ce que fait chaque ligne qu’on écrit

Les outils ci-dessous n’apportent rien tant qu’on apprend les bases. Ils deviennent utiles quand un site dépasse une dizaine de pages.

Le vocabulaire

Mot Ce que c’est
Node.js Permet d’exécuter du JavaScript hors du navigateur — sur votre machine ou sur un serveur
npm Le gestionnaire de paquets fourni avec Node : il télécharge les bibliothèques écrites par d’autres
Astro Un outil qui assemble un site à partir de morceaux réutilisables
TypeScript Du JavaScript avec des étiquettes de types, qui attrapent des erreurs avant l’exécution

Installer Node

Téléchargez la version LTS sur https://nodejs.org/fr.

Vérifiez ensuite dans un terminal :

node --version
npm --version

Vous devez voir deux numéros de version.

AvertissementWindows Si npm est refusé

PowerShell bloque parfois les scripts avec un message parlant d’execution policy. Deux solutions :

  1. Basculer le terminal de VS Code sur Git Bash ou cmd

  2. Ou autoriser les scripts pour votre compte :

    Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Créer un projet Astro

npm create astro@latest mon-site

Répondez aux questions (choisissez le template minimal, acceptez TypeScript). Puis :

cd mon-site
npm install
npm run dev

Ouvrez l’adresse affichée (http://localhost:4321).

Commande Rôle
npm install Télécharge les bibliothèques nécessaires
npm run dev Lance un serveur de développement (l’équivalent de Live Server)
npm run build Fabrique le site final, prêt à être mis en ligne
NoteLe dossier node_modules

npm install crée un dossier node_modules de plusieurs milliers de fichiers. C’est normal : ce sont les bibliothèques. On ne le sauvegarde jamais, on ne le lit jamais, et il se recrée avec npm install.

L’apport d’Astro : les composants

Le problème que résout Astro : sur un site de 20 pages, le menu est recopié 20 fois. Le changer demande 20 modifications.

Avec Astro, on l’écrit une fois :

src/components/Menu.astro
---
const liens = [
  { texte: "Accueil", url: "/" },
  { texte: "Contact", url: "/contact" },
];
---

<nav>
  <ul>
    {liens.map((lien) => (
      <li><a href={lien.url}>{lien.texte}</a></li>
    ))}
  </ul>
</nav>

Et on le réutilise partout :

src/pages/index.astro
---
import Menu from "../components/Menu.astro";
---

<html lang="fr">
  <body>
    <Menu />
    <h1>Bienvenue</h1>
  </body>
</html>
AstuceCe que vous reconnaissez déjà
  • Le tableau d’objets liens → séance 11
  • La boucle qui génère des <li> → séance 8
  • Le HTML → séances 1 et 2

Astro n’invente rien : il range ce que vous savez déjà faire.

TypeScript en trois exemples

TypeScript, c’est du JavaScript avec des étiquettes :

let prenom: string = "Camille";
let age: number = 19;
let inscrit: boolean = true;

Sur une fonction :

function doubler(n: number): number {
  return n * 2;
}

doubler("bonjour"); // ❌ signalé DANS L'ÉDITEUR, avant même d'exécuter

Sur une classe :

class Contact {
  nom: string;
  email: string;

  constructor(nom: string, email: string) {
    this.nom = nom;
    this.email = email;
  }

  resume(): string {
    return `${this.nom} — ${this.email}`;
  }
}
NoteCe que ça apporte, concrètement

Rappelez-vous le piège de la séance 10 : champ.value est du texte, donc champ.value + 1 colle au lieu d’additionner. Le bug est silencieux en JavaScript.

En TypeScript, l’éditeur souligne la ligne en rouge pendant que vous écrivez. Sur un projet de 10 000 lignes, ça change la vie.

En contrepartie : plus de code à écrire, et une compilation. C’est pour ça qu’on ne commence pas par là.

Mettre un site en ligne

Une fois npm run build exécuté, le dossier dist/ contient le site fini. Plusieurs hébergements gratuits l’acceptent :

  • GitLab Pages / GitHub Pages — via un dépôt Git
  • Netlify / Vercel — glisser-déposer du dossier
AstuceEt sans Astro ?

Vos pages du cours (HTML + CSS + JS) sont déjà un site web complet. Vous pouvez les déposer telles quelles sur n’importe quel hébergeur : aucun outil n’est nécessaire.

Pour continuer

Ressource Contenu
MDN Web Docs La référence, en français. Le premier réflexe
Astro Documentation officielle, en français
TypeScript Site officiel
ImportantLe conseil le plus utile

Ne cherchez pas à apprendre un outil de plus. Construisez un projet qui vous intéresse vraiment — un site sur un sujet que vous aimez — et n’ajoutez un outil que le jour où vous butez sur un problème qu’il résout.

C’est comme ça qu’on progresse vraiment.