Configuration de l'environnement

Avant de partir à la conquête, nous devons préparer notre équipement. Chaque Viking a besoin de bonnes armes : il nous faut Node.js et un éditeur de code.

Prérequis

1. Node.js (version 22.17 ou plus récente)

Node.js est un environnement d'exécution JavaScript. SvelteKit 3 exige Node.js 22.17 ou plus récent. Vérifie si tu l'as déjà installé :

node --version
# Devrait afficher v22.17.0 ou plus (par exemple v24.x.x)

Si tu n'as pas Node.js ou si ta version est plus ancienne, télécharge la version LTS actuelle depuis nodejs.org.

2. Éditeur de code

Je recommande VS Code avec l'extension « Svelte for VS Code » :

• Coloration syntaxique
• Autocomplétion
• Indications d'erreurs

3. Terminal

Nous utiliserons le terminal pour :

• Créer des projets
• Installer les dépendances
• Lancer le serveur de développement

Créer un projet Svelte

Nous allons utiliser l'outil officiel sv (la CLI de Svelte) :

# Créer un nouveau projet
npx sv create my-village

# Se déplacer dans le projet
cd my-village

# Installer les dépendances (si l'assistant ne l'a pas fait pour toi)
npm install

# Lancer le serveur de développement
npm run dev

Le serveur démarre à l'adresse http://localhost:5173.

Dans les tutoriels plus anciens, tu verras la commande npm create svelte@latest. Aujourd'hui, elle ne crée plus rien : elle te renvoie simplement vers npx sv create.

Options lors de la création du projet :

1. Which template would you like? (quel modèle ?)

   • SvelteKit minimal - projet vide (recommandé pour débuter)
   • SvelteKit demo - avec un petit jeu d'exemple
   • Svelte library - pour créer des bibliothèques

2. Add type checking with TypeScript? (vérification de types ?)

   • Yes, using TypeScript syntax - recommandé !
   • Yes, using JavaScript with JSDoc comments
   • No

3. What would you like to add to your project? (les add-ons)

   • prettier - formatage du code
   • eslint - vérification de la qualité du code
   • vitest - tests unitaires
   • et bien d'autres, comme tailwindcss ou playwright

4. Which package manager do you want to install dependencies with? (gestionnaire de paquets)

   • npm, pnpm, yarn, bun ou deno - l'assistant installe tout de suite les dépendances
   • None - lance alors npm install toi-même

Tu peux aussi ajouter des add-ons plus tard avec npx sv add, par exemple npx sv add tailwindcss.

Structure d'un projet SvelteKit

my-village/
├── src/
│   ├── lib/                # Composants et utilitaires (alias #lib)
│   │   ├── assets/         # Par exemple favicon.svg
│   │   └── index.ts        # Exports communs de l'alias #lib
│   ├── routes/             # Pages de l'application
│   │   ├── +layout.svelte  # Mise en page commune à toutes les pages
│   │   └── +page.svelte    # Page d'accueil
│   ├── app.d.ts            # Types de l'application
│   └── app.html            # Template HTML
├── static/                 # Fichiers statiques (par exemple robots.txt)
├── package.json            # Dépendances et alias #lib (champ "imports")
├── tsconfig.json           # Configuration TypeScript
└── vite.config.js          # Configuration de Vite et de SvelteKit

C'est comme la carte de notre village : chaque répertoire a son utilité !

Toute la configuration de SvelteKit 3 se trouve dans vite.config.js : tu passes les réglages au plugin sveltekit() :

import adapter from '@sveltejs/adapter-auto';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit({
      adapter: adapter()
    })
  ]
});

Dans les projets plus anciens (SvelteKit 2), tu verras encore un fichier svelte.config.js séparé et l'alias $lib au lieu de #lib. SvelteKit 3 ne les a plus : nous reparlerons de l'alias #lib à Yggdrasil (module 2).