Framework · Depuis 2020

SvelteKit

SvelteKit est le framework officiel des applications web Svelte : routage par fichiers, rendu serveur, chargement de données et déploiement flexible.

Commencer le guide Discussions

SvelteKit est le framework d'application officiel de l'équipe Svelte, présenté pour la première fois en 2020 et développé en open source. Il s'appuie sur Svelte, qui compile les composants en JavaScript efficace lors du build, et ajoute le routage, le rendu côté serveur (SSR), le chargement de données, la gestion des formulaires ainsi que le build et le déploiement ; Vite assure le serveur de développement et le bundling. La génération actuelle de Svelte exprime la réactivité avec des runes comme $state, $derived, $effect et $props.

Son principal atout est de pouvoir choisir la stratégie de rendu page par page. Les contenus identiques pour tous, comme les articles de blog ou la documentation, peuvent être prérendus au build ; les pages propres à chaque utilisateur sont rendues sur le serveur, et les écrans qui dépendent fortement des API du navigateur peuvent n'être rendus que côté client. Les form actions fonctionnent sans JavaScript et sont améliorées progressivement, et il suffit de changer d'adaptateur pour déployer le même code sur un serveur Node.js, un hébergement statique ou des plateformes comme Vercel, Netlify et Cloudflare.

Pour commencer, créez un projet avec npx sv create et suivez le tutoriel interactif de svelte.dev, d'abord les bases de Svelte puis SvelteKit. Les ressources anciennes montrent souvent une syntaxe et une configuration qui ont changé depuis, comme export let, $lib ou svelte.config.js : appuyez-vous donc sur la documentation officielle et la syntaxe actuelle des runes.

Points forts

Composants compilés avec les runes

$state, $derived, $effect et $props rendent la réactivité explicite, et le compilateur produit un code qui ne met à jour que ce qui change, sans DOM virtuel.

Routage par fichiers et layouts

L'arborescence de src/routes définit les URL ; les fichiers +page, +layout, +server et +error décrivent pages, gabarits, API et écrans d'erreur.

Rendu choisi par page

Choisissez le rendu serveur, le rendu client ou le prérendu pour chaque page avec les options prerender, ssr et csr.

Fonctions load et form actions

Chargez les données avec des fonctions load typées automatiquement et modifiez-les avec des form actions qui fonctionnent même sans JavaScript.

Domaines d'utilisation

Sites de contenu comme les blogs et la documentation
Applications web full stack avec authentification et base de données
Outils d'administration et tableaux de bord
Sites vitrines sur hébergement statique

Installation

1
Préparer Node.js
Le développement avec SvelteKit repose sur Node.js. Installez une version LTS récente puis, dans un nouveau terminal, vérifiez que node et npm affichent leur version.
```
node --version && npm --version
```
2
Créer un projet
Utilisez sv, l'outil officiel en ligne de commande, pour créer un projet. Vous choisirez un modèle, TypeScript et des intégrations comme Prettier, ESLint, Vitest ou Playwright.
```
npx sv create my-app
```
3
Lancer le serveur de développement
Placez-vous dans le dossier du projet, installez les dépendances et lancez le serveur de développement. Le navigateur ouvre http://localhost:5173 et les modifications s'affichent dès l'enregistrement.
```
cd my-app && npm install && npm run dev -- --open
```

Votre premier programme

Votre première page

src/routes/+page.svelte est la page d'accueil (/). La variable count, créée avec la rune $state, met à jour l'interface à chaque changement, et la fonction passée à l'attribut onclick l'incrémente à chaque clic. Ajoutez d'autres pages en créant des dossiers, par exemple src/routes/about/+page.svelte.

src/routes/+page.svelte

<script lang="ts">
  let count = $state(0);
</script>

<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>

npx sv create my-app && cd my-app && npm install && npm run dev

Outils du quotidien

sv: La CLI officielle de Svelte. sv create génère des projets et sv add configure des intégrations comme Tailwind CSS, Vitest, Playwright et Drizzle.
Vite: L'outil derrière le serveur de développement et le build de production. Il démarre vite, gère le HMR, et SvelteKit fonctionne comme un plugin Vite.
svelte-check: Un outil en ligne de commande qui signale les erreurs de type et les problèmes propres à Svelte dans tout le projet. Lancez-le avec npm run check.
Svelte for VS Code: L'extension officielle pour VS Code : coloration syntaxique, autocomplétion, erreurs de type en ligne et formatage des fichiers .svelte.

Guide pas à pas

Six chapitres pour aller de l'installation aux notions essentielles de SvelteKit.

Documentation officielle et ressources

Langages

Discussions

Lancer une discussion

Posez vos questions, partagez votre expérience et échangez vos avis sur SvelteKit.

Aucune discussion pour l'instant. Lancez la première.