Skip to main content
Bases de Svelte
Introduction
Réactivité
Props
Logique
Évènements
Liaisons
Classes et styles
Actions
Transitions
Svelte avancé
Réactivité avancée
Réutiliser du contenu
Mouvements
Liaisons avancées
Transitions avancées
API de contexte
Éléments spéciaux
<script module>
Next steps
Bases de SvelteKit
Introduction
Routing
Chargement de données
En-têtes et cookies
Modules partagés
Formulaires
Routes d’API
$app/state
Erreurs et redirections
SvelteKit avancé
Hooks
Options de page
Options de lien
Routing avancé
Chargement avancé
Variables d’environnement
Conclusion

Alors que Svelte est un framework de composants, SvelteKit est un framework d’application (ou "metaframework”, selon à qui vous demandez), dont l’objectif est de résoudre les problématiques complexes liées à la construction d’une application taillée pour la production :

  • Routing
  • Rendu côté serveur
  • Chargement des données
  • Service workers
  • Intégration de TypeScript
  • Pré-rendu
  • Single-page apps
  • Empaquetage de librairie
  • Optimisation des builds de production
  • Déploiements sur différentes solutions d’hébergements
  • ... et bien d’autres

Les applications SvelteKit sont par défaut rendues sur le serveur (comme les applications "multi-pages” traditionnelles, ou MPAs) afin de bénéficier d’excellentes performances au premier chargement ainsi que de bonnes caractéristiques de référencement, mais transitionnent ensuite sur de la navigation côté client (comme le font les SPAs modernes) pour éviter de recharger brutalement tous les morceaux de l’application (comme par exemple d’éventuels script tiers activant des analytics) lors que l’on navigue. Les applications SvelteKit peuvent être exécutées partout où JavaScript existe, même si — comme nous le verrons — vos utilisateurs et utilisatrices n’ont pas forcément de JavaScript pour en profiter.

Si tout cela semble compliqué, ne vous en faites pas : SvelteKit est un framework qui vous aide à progresser ! Commencez par des choses simples, et ajoutez de nouvelles fonctionnalités au fur et à mesure de vos besoins.

Structure d’un projet

Sur la droite, dans le visualisateur de fichiers, vous verrez un certain nombre de fichiers que SvelteKit s’attend à trouver dans un projet.

package.json doit vous être familier si vous êtes habitué•e à travailler avec Node.js. Ce fichier liste les dépendances du projet — incluant svelte et @sveltejs/kit — ainsi que des scripts permettant d’interagir avec certaines commandes du CLI de SvelteKit. (Il y a actuellement la commande npm run dev qui tourne dans la fenêtre du bas.)

Notez que ce fichier précise aussi "type": "module", ce qui signifie que les fichiers .js sont traités comme des modules JavaScript par défaut, plutôt que comme des fichiers CommonJS, format aujourd’hui déprécié.

svelte.config.js contient votre configuration de projet. Nous n’avons pas besoin de nous soucier de ce fichier pour le moment, mais si vous êtez curieux ou curieuse, jetez un oeil à la documentation.

vite.config.js contient la configuration de Vite. Puisque SvelteKit utilise Vite, vous pouvez utiliser les fonctionnalités de Vite comme le remplacement de modules à la volée (HMR), l’intégration de TypeScript, la gestion des fichiers statiques, et d’autres.

src est l’endroit où se trouve le code de votre application. src/app.html est votre gabarit de page (SvelteKit remplace les %sveltekit.head% et %sveltekit.body% par ce qui est approprié), et le dossier src/routes définit les routes de votre application.

Enfin, le dossier static contient tout asset (comme les fichiers favicon.png ou robots.txt) qui devraient être inclus lors du déploiement de votre application.

Modifier cette page sur Github

précédent suivant
1
2
<h1>Bienvenue dans le monde de SvelteKit</h1>