Svelte : Une application blog avec SvelteKit

Par wgharbi, 1 mars, 2025

Dans ce nouvel article, je vous propose de découvrir une mini application blog développée avec SvelteKit. Cette application affiche une liste d’articles et permet de consulter le détail de chacun grâce au système de routage automatique de SvelteKit. Inspirée par la documentation officielle de SvelteKit[1] et un article technique sur CSS-Tricks[2], cette application démontre la simplicité et la puissance de SvelteKit pour créer des interfaces réactives.

Fonctionnalités

  • Liste des articles : Affichage d’un résumé pour chaque article.
  • Détail d’un article : Navigation dynamique vers une page affichant le contenu complet.
  • Routing automatique : Création des routes basée sur l’arborescence des fichiers.

Code de l'application

Liste des articles (src/routes/blog/+page.svelte)

<script context="module">
  export async function load() {
    const posts = [
      { slug: 'article-1', titre: 'Premier Article', résumé: 'Résumé du premier article...' },
      { slug: 'article-2', titre: 'Deuxième Article', résumé: 'Résumé du deuxième article...' }
    ];
    return { posts };
  }
</script>

<script>
  export let data;
  const posts = data.posts;
</script>

<h1>Liste des articles</h1>
<ul>
  {#each posts as post}
    <li>
      <a href="/blog/{post.slug}">{post.titre}</a>
      <p>{post.résumé}</p>
    </li>
  {/each}
</ul>

Détail d’un article (src/routes/blog/[slug]/+page.svelte)

<script context="module">
  import { error } from '@sveltejs/kit';
  export async function load({ params }) {
    const posts = [
      { slug: 'article-1', titre: 'Premier Article', contenu: 'Contenu complet du premier article...' },
      { slug: 'article-2', titre: 'Deuxième Article', contenu: 'Contenu complet du deuxième article...' }
    ];
    const post = posts.find(p => p.slug === params.slug);
    if (!post) throw error(404, 'Article non trouvé');
    return { post };
  }
</script>

<script>
  export let data;
  const { post } = data;
</script>

<h1>{post.titre}</h1>
<p>{post.contenu}</p>
<a href="/blog">← Retour à la liste</a>

Explications

  • Chargement des données : La fonction load récupère côté serveur un tableau d’articles et injecte ces données dans le composant.
  • Routing dynamique : Grâce au dossier [slug], SvelteKit gère automatiquement la correspondance entre l’URL et l’article.
  • Gestion des erreurs : Si aucun article n’est trouvé, une erreur 404 est levée pour une meilleure expérience utilisateur.

Réflexions personnelles

J’apprécie particulièrement la simplicité de SvelteKit. La configuration minimale et le routage automatique permettent de se concentrer sur le développement fonctionnel sans être submergé par des configurations complexes. Ce projet de blog illustre parfaitement comment, avec peu de code, il est possible de créer une application réactive, performante. Pour moi, SvelteKit représente une solution moderne pour aborder le développement web.

Références

[1]: Documentation officielle SvelteKit, https://kit.svelte.dev/docs
[2]: CSS-Tricks, "Getting Started with SvelteKit", https://css-tricks.com/getting-started-with-sveltekit/

Étiquettes

Commentaires