Maîtriser SvelteKit : Développement Web Réactif et Ultra-Performant
Maîtriser SvelteKit : Développement Web Réactif et Ultra-Performant

Introduction à SvelteKit et Configuration de l'Environnement

Bienvenue dans le premier module de notre cours sur Maîtriser SvelteKit : Développement Web Réactif et Ultra-Performant ! Cette leçon fondamentale vous introduira au monde de SvelteKit, un framework puissant et moderne pour le développement web. Nous aborderons ses concepts clés, ses avantages, et surtout, nous vous guiderons pas à pas dans la configuration de votre environnement de développement et la création de votre tout premier projet SvelteKit.

À l'issue de cette leçon, vous comprendrez ce qui rend SvelteKit unique et vous serez prêt à démarrer concrètement vos développements.

Prérequis

Pour tirer le meilleur parti de cette leçon, une compréhension de base des concepts suivants est recommandée :

  • JavaScript (ES6+) : Variables, fonctions, modules, asynchrone.
  • HTML et CSS : Structure de base d'une page web et stylisation.
  • Ligne de commande (Terminal/CMD) : Navigation dans les répertoires, exécution de commandes.
  • Node.js et npm (ou Yarn/pnpm) : Ces outils sont essentiels pour exécuter SvelteKit.

Qu'est-ce que SvelteKit ?

SvelteKit est un framework complet pour la construction d'applications web modernes, reposant sur le compilateur Svelte. Il offre une solution pour le développement de sites statiques, d'applications rendues côté serveur (SSR), et de SPAs (Single Page Applications), le tout avec une expérience développeur et utilisateur optimisée.

Svelte vs. SvelteKit

Il est crucial de distinguer Svelte de SvelteKit :

  • Svelte : C'est un compilateur. Il prend votre code Svelte (qui ressemble à du HTML, CSS, et JavaScript dans un seul fichier) et le compile en petit JavaScript vanilla très optimisé au moment de la compilation, et non à l'exécution dans le navigateur. Cela signifie qu'il n'y a pas de "runtime" volumineux chargé par le navigateur, ce qui rend les applications Svelte extrêmement rapides et légères. Svelte est le moteur UI.
  • SvelteKit : C'est un méta-framework bâti autour de Svelte. Il ajoute toutes les fonctionnalités nécessaires pour construire des applications web complexes et robustes :
    • Routage basé sur le système de fichiers : Facilite la création de pages et de routes API.
    • Rendu Côté Serveur (SSR) et Génération de Sites Statiques (SSG) : Améliore le SEO et la performance initiale.
    • Chargement de données intelligent : Permet de récupérer des données avant que les composants ne soient rendus.
    • Adaptateurs : Pour déployer votre application sur diverses plateformes (Node, Vercel, Netlify, etc.).
    • Gestion des erreurs, préchargement, etc.

En résumé, si Svelte est le moteur, SvelteKit est la voiture complète, prête à rouler sur n'importe quel terrain.

Philosophie de SvelteKit

La philosophie de SvelteKit s'articule autour de plusieurs piliers :

  • Performance Inhérente : Grâce à la compilation de Svelte, les applications SvelteKit sont parmi les plus rapides et légères. Moins de JavaScript à envoyer et à exécuter côté client.
  • Simplicité et Intuitivité : SvelteKit vise à minimiser la quantité de "boilerplate" (code répétitif) et à rendre le développement aussi intuitif que possible. Le modèle de composant et le routage sont très naturels.
  • Flexibilité : SvelteKit est agnostique quant à la façon dont vous déployez votre application. Ses "adaptateurs" vous permettent de cibler n'importe quel environnement, d'un serveur Node.js traditionnel à des plateformes serverless ou des CDN.
  • Full-stack par défaut : Avec ses routes API intégrées (+server.js), SvelteKit permet de développer à la fois le frontend et le backend de votre application dans le même projet.

Configuration de l'Environnement de Développement

Avant de plonger dans le code, assurons-nous que votre environnement de développement est correctement configuré.

Vérification de Node.js

SvelteKit s'exécute sur Node.js et utilise npm (Node Package Manager) ou Yarn/pnpm pour la gestion des dépendances.

Ouvrez votre terminal (ou invite de commande) et vérifiez les versions installées :

node -v
npm -v
# Ou si vous utilisez Yarn
# yarn -v

Vous devriez voir des numéros de version (par exemple, v18.x.x pour Node.js, 9.x.x pour npm). SvelteKit nécessite Node.js version 16 ou supérieure. Si ce n'est pas le cas, veuillez installer la dernière version LTS (Long Term Support) de Node.js depuis nodejs.org.

L'éditeur de code

Bien que vous puissiez utiliser n'importe quel éditeur de texte, VS Code est fortement recommandé pour le développement SvelteKit. Il offre une excellente prise en charge des extensions qui améliorent considérablement l'expérience de développement.

Une fois VS Code installé, recherchez et installez l'extension suivante :

  • Svelte for VS Code : Fournit la coloration syntaxique, l'autocomplétion, le formatage, et d'autres fonctionnalités spécifiques à Svelte.

Création d'un Nouveau Projet SvelteKit

Maintenant que notre environnement est prêt, nous allons créer notre premier projet SvelteKit.

La commande create-svelte

SvelteKit fournit un outil de scaffolding (create-svelte) qui permet de générer rapidement un nouveau projet avec une structure de base.

Ouvrez votre terminal et naviguez vers le répertoire où vous souhaitez créer votre projet. Ensuite, exécutez la commande suivante :

npm create svelte@latest mon-premier-projet-sveltekit
  • npm create svelte@latest : C'est la commande qui lance l'outil de création de projet SvelteKit. @latest assure que vous utilisez la dernière version de l'outil.
  • mon-premier-projet-sveltekit : C'est le nom de votre projet. Remplacez-le par le nom de votre choix. Un nouveau dossier sera créé avec ce nom.

Après avoir exécuté la commande, l'outil vous posera quelques questions interactives pour configurer votre projet :

  1. Which SvelteKit project template? Choisissez SvelteKit Demo App pour un projet avec quelques pages d'exemple, ou Skeleton project pour un projet vide. Pour cette introduction, le Skeleton project est suffisant.
  2. Add type checking with TypeScript? Recommandé : Yes, using TypeScript syntax ou Yes, using JSDoc comments (si vous préférez ne pas utiliser TypeScript directement mais bénéficier de l'aide à la complétion). Pour ce cours, nous utiliserons TypeScript syntax.
  3. Add ESLint for code linting? Recommandé : Yes. ESLint vous aide à maintenir un code propre et cohérent.
  4. Add Prettier for code formatting? Recommandé : Yes. Prettier formate automatiquement votre code pour une meilleure lisibilité.
  5. Add Playwright for browser testing? (Optionnel) : No. Nous n'aborderons pas les tests dans cette leçon.
  6. Add Vitest for unit testing? (Optionnel) : No.

Une fois que vous avez répondu aux questions, SvelteKit va créer les fichiers et dossiers nécessaires.

Structure de base d'un projet SvelteKit

Naviguez dans le nouveau répertoire créé :

cd mon-premier-projet-sveltekit

Installez ensuite les dépendances du projet :

npm install
# Ou si vous utilisez Yarn
# yarn
# Ou si vous utilisez pnpm
# pnpm install

Ouvrez le projet dans votre éditeur de code. Vous verrez une structure de dossiers similaire à ceci :

mon-premier-projet-sveltekit/
├── .svelte-kit/  # Fichiers générés par SvelteKit (ne pas modifier)
├── src/
│   ├── app.html   # Template HTML principal de l'application
│   ├── lib/       # Fichiers réutilisables (composants, fonctions, etc.)
│   └── routes/    # Dossier principal pour les pages et API routes
│       └── +page.svelte  # Page d'accueil par défaut
├── static/       # Fichiers statiques (images, polices, etc.)
├── .env          # Variables d'environnement (non-versionné)
├── .gitignore
├── package.json
├── svelte.config.js # Configuration de Svelte et SvelteKit
├── tsconfig.json    # Configuration TypeScript (si choisi)
└── vite.config.ts   # Configuration de Vite (outil de build utilisé par SvelteKit)

Les dossiers les plus importants à retenir pour l'instant sont :

  • src/routes : C'est le cœur de votre application. SvelteKit utilise un système de routage basé sur les fichiers et dossiers contenus ici. Chaque fichier .svelte ou dossier avec un fichier +page.svelte représente une route.
  • src/lib : C'est l'endroit idéal pour placer vos composants Svelte réutilisables, vos fonctions utilitaires, et tout ce qui peut être importé dans plusieurs parties de votre application.
  • static : Pour les fichiers statiques qui doivent être servis directement (images, fichiers CSS globaux, favicons, etc.).

Lancement du Serveur de Développement

Pour voir votre application en action, lancez le serveur de développement :

npm run dev

Vous devriez voir une sortie similaire à celle-ci dans votre terminal :

> mon-premier-projet-sveltekit@0.0.1 dev
> vite dev

  VITE v4.5.2  ready in 324 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Ouvrez votre navigateur et naviguez vers l'URL indiquée (généralement http://localhost:5173/). Vous devriez voir la page d'accueil par défaut de SvelteKit.

Exploration de la Structure Initiale du Projet

Examinons de plus près les fichiers générés dans src/routes.

src/routes/+page.svelte

C'est la page d'accueil de votre application. Dans SvelteKit, les fichiers +page.svelte sont les composants qui représentent une page spécifique à une URL donnée. Le + indique à SvelteKit que ce fichier a une signification spéciale pour le routage.

Si vous avez choisi le "Skeleton project" (projet vide), le contenu de src/routes/+page.svelte sera très simple, par exemple :

<!-- src/routes/+page.svelte -->
<h1>Bienvenue sur SvelteKit !</h1>
<p>C'est votre première page SvelteKit.</p>

<style>
	h1 {
		color: #ff3e00;
	}
</style>

Ce fichier démontre la simplicité d'un composant Svelte : du HTML, du CSS encapsulé dans une balise <style>, et si besoin, du JavaScript dans une balise <script>.

Routage Basé sur le Système de Fichiers

Le routage est l'une des fonctionnalités les plus puissantes et intuitives de SvelteKit. Chaque dossier ou fichier +page.svelte sous src/routes correspond à une route de votre application.

  • src/routes/+page.svelte -> / (racine)
  • src/routes/about/+page.svelte -> /about
  • src/routes/blog/[slug]/+page.svelte -> /blog/mon-article (routage dynamique, [slug] est un paramètre)

Layouts (+layout.svelte)

Les layouts sont des composants Svelte (+layout.svelte) qui encapsulent d'autres pages ou layouts, permettant de partager des éléments d'interface utilisateur (comme un en-tête, un pied de page, une barre de navigation) entre plusieurs pages.

Un +layout.svelte peut être défini à n'importe quel niveau dans le dossier src/routes.

  • src/routes/+layout.svelte : S'applique à toutes les pages de l'application.
  • src/routes/dashboard/+layout.svelte : S'applique à toutes les pages sous /dashboard (par exemple, /dashboard/settings, /dashboard/analytics).

Voici un exemple simple de src/routes/+layout.svelte (vous devrez le créer si vous avez choisi le "Skeleton project") :

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import '../app.css'; // Importe un fichier CSS global (si vous en avez un)
</script>

<header>
	<nav>
		<a href="/">Accueil</a>
		<a href="/about">À propos</a>
	</nav>
</header>

<main>
	<!-- Le slot est l'endroit où le contenu de la page ou du layout enfant sera inséré -->
	<slot />
</main>

<footer>
	<p>&copy; 2023 Mon Application SvelteKit</p>
</footer>

<style>
	header {
		background-color: #f0f0f0;
		padding: 1em;
		text-align: center;
	}
	nav a {
		margin: 0 10px;
		text-decoration: none;
		color: #333;
	}
	main {
		padding: 20px;
	}
	footer {
		background-color: #eee;
		padding: 1em;
		text-align: center;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>

Le <slot /> est un concept clé : c'est là que le contenu de la page actuellement affichée (ou du layout enfant) sera "injecté".

Fichiers Serveur (+server.js ou +server.ts)

SvelteKit permet également de créer des points d'API backend directement dans le dossier src/routes en utilisant des fichiers +server.js (ou .ts si vous utilisez TypeScript). Ces fichiers exportent des fonctions qui correspondent aux méthodes HTTP (GET, POST, PUT, DELETE, etc.).

Par exemple, src/routes/api/hello/+server.js pour une route API /api/hello :

// src/routes/api/hello/+server.js
/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
	const name = url.searchParams.get('name') || 'Monde';
	return new Response(`Bonjour, ${name} !`);
}

/** @type {import('./$types').RequestHandler} */
export async function POST({ request }) {
	const data = await request.json();
	return new Response(JSON.stringify({ message: `Reçu : ${data.message}` }), {
		headers: {
			'Content-Type': 'application/json'
		}
	});
}

Ce fichier créerait deux endpoints :

  • GET /api/hello?name=Alice qui renverrait "Bonjour, Alice !"
  • POST /api/hello qui accepterait un corps JSON.

Premier Pas avec le Code SvelteKit

Ouvrons src/routes/+page.svelte et faisons une petite modification.

<!-- src/routes/+page.svelte -->
<script lang="ts">
	let nom = 'Visiteur'; // Déclare une variable réactive
</script>

<h1>Bonjour, {nom} !</h1>
<p>C'est votre première page SvelteKit. <br> Amusez-vous à explorer ce puissant framework.</p>

<button on:click={() => (nom = 'Cher apprenant')}>
	Me saluer personnellement
</button>

<style>
	h1 {
		color: #ff3e00;
		font-family: Arial, sans-serif;
	}
	button {
		background-color: #007bff;
		color: white;
		padding: 10px 15px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: 1em;
		transition: background-color 0.3s ease;
	}
	button:hover {
		background-color: #0056b3;
	}
</style>

Enregistrez le fichier. Votre navigateur devrait automatiquement recharger la page et afficher les changements.

  • let nom = 'Visiteur'; : En Svelte, les variables déclarées avec let dans le bloc <script> sont réactives par défaut. Si leur valeur change, le DOM sera automatiquement mis à jour.
  • <h1>Bonjour, {nom} !</h1> : Utilisation de l'interpolation pour afficher la valeur de la variable nom.
  • <button on:click={() => (nom = 'Cher apprenant')}> : Un gestionnaire d'événements on:click est attaché au bouton. Lorsque le bouton est cliqué, la variable nom est mise à jour, et Svelte met à jour le <h1> en conséquence.

C'est la magie de Svelte en action : pas de code impératif pour manipuler le DOM, juste une simple modification de variable.

Conclusion

Félicitations ! Vous avez fait vos premiers pas dans le monde de SvelteKit. Dans cette leçon, vous avez appris :

  • La distinction entre Svelte (le compilateur) et SvelteKit (le méta-framework).
  • L'importance de Node.js et des outils de développement comme VS Code.
  • Comment créer un nouveau projet SvelteKit avec la commande create-svelte.
  • La structure de base d'un projet SvelteKit, en particulier le routage basé sur le système de fichiers (src/routes), les layouts (+layout.svelte) et les routes API (+server.js).
  • Comment lancer le serveur de développement et voir vos modifications en direct.
  • Les principes fondamentaux de la réactivité dans Svelte en modifiant un composant de page.

Vous êtes maintenant équipé des bases pour explorer davantage SvelteKit. Dans la prochaine leçon, nous plongerons plus profondément dans la création de composants, la gestion des props, et les concepts avancés de la réactivité.