Wat is SvelteKit en hoe begin je ermee?

Als je nog niet weet wat een framework precies is of hoe frontend, backend en full-stack verschillen, lees dan eerst de pagina met de populairste frameworks. Hier begin je direct met SvelteKit. Dat is het officiële full-stack framework voor Svelte. Svelte doet alleen het deel van de pagina dat de bezoeker ziet. Voor adressen, pagina's en de server heb je SvelteKit nodig. In deze pagina leer je hoe je een eerste project opzet en welke onderdelen je nodig hebt.

Waarom kies je voor SvelteKit?

Het Svelte-team bouwde SvelteKit. Het verscheen in 2021. Het is bedoeld als de volledige oplossing bovenop Svelte. Denk aan Svelte als de motor van een auto en SvelteKit als de rest van de auto: de wielen, de stuurinrichting en het dashboard. Lees de Svelte-pagina als je de motor eerst wil leren kennen.

SvelteKit combineert de kleine, snelle code van Svelte met een slim systeem voor pagina's en gegevens. Je schrijft minder code dan bij veel andere full-stack frameworks. Dat is prettig voor een beginner.

Wat is routering?

Routering bepaalt welke pagina de bezoeker ziet als hij een adres opent. Het adres /over-ons moet een andere pagina tonen dan /contact. Routering zorgt dat elk adres bij de juiste pagina uitkomt.

SvelteKit gebruikt bestandsgebaseerde routering. Een map in src/routes wordt een adres op je site. Een bestand met de naam +page.svelte wordt de pagina die je ziet.

Hoe zet je een eerste SvelteKit-project op?

Je hebt Node.js nodig. Installeer het via de officiële Node.js-website. Daarna maak je een project aan met de officiële opzetter:

Terminal

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

Wat doen deze commando's?

• npx sv create my-app start de officiële Svelte-opzetter. Die maakt de map my-app en vraagt een paar keuzes. Voor een eerste project kies je de standaardopties.
• cd my-app zet je in de nieuwe map.
• npm install downloadt de benodigde pakketten.
• npm run dev start de ontwikkelserver op je eigen computer.

Open daarna http://localhost:5173 in je browser. Je ziet de startpagina van je SvelteKit-project. Pas je code aan en sla op? Dan ververst de pagina zichzelf.

Gebruik de officiële gids

De opzetter kan na een update iets anders vragen. Lees de officiële SvelteKit-documentatie voor de meest actuele stappen.

Hoe ziet een SvelteKit-project eruit?

Een SvelteKit-project bevat ongeveer deze onderdelen:

my-app/
  src/
    routes/
      +page.svelte      ← de startpagina (adres /)
      +layout.svelte    ← de vaste opmaak om alle pagina's heen
    lib/                ← gedeelde componenten en code
    app.html            ← het basis-HTML-bestand
  static/               ← bestanden zoals plaatjes die ongewijzigd blijven
  svelte.config.js      ← instellingen voor SvelteKit
  package.json          ← de lijst met pakketten van je project

Het plusteken in de namen +page.svelte en +layout.svelte is een speciaal teken. SvelteKit herkent daaraan welk bestand een pagina is. Je mag er niet zomaar iets anders van maken.

Wil je een nieuwe pagina op het adres /over-ons? Maak dan een map src/routes/over-ons aan met daarin een +page.svelte. Dat is alles.

Hoe ziet een eerste SvelteKit-pagina eruit?

Maak een map src/routes/over-ons aan en zet daar dit bestand in:

src/routes/over-ons/+page.svelte

<script>
  let name = $state('Anna')
</script>

<h1>Over ons</h1>
<p>Welkom bij onze site, {name}.</p>
<input bind:value={name} placeholder="Typ je naam" />

Wat gebeurt hier?

• $state('Anna') maakt een waarde aan die kan veranderen. Svelte houdt die in de gaten.
• {name} toont de waarde op het scherm.
• bind:value={name} koppelt het invoerveld aan de waarde. Typ je iets, dan past de tekst zich direct aan.

Open nu http://localhost:5173/over-ons in je browser. De pagina verschijnt zonder dat je iets aan de server hoeft in te stellen. Dat is het mooie van bestandsgebaseerde routering.

Wil je gegevens ophalen voordat de pagina verschijnt? Dan maakt SvelteKit daar een apart bestand voor, met de naam +page.js of +page.server.js. Daarin schrijf je een load-functie. Dat is een onderwerp voor later. Lees erover in de officiële SvelteKit-documentatie.

Welke kernbegrippen moet je kennen in SvelteKit?

• Routes zijn de mappen in src/routes. Elke map met een +page.svelte wordt een pagina.
• Layouts met +layout.svelte bevatten de onderdelen die op alle pagina's staan, zoals een menu.
• Load-functies halen gegevens op voordat een pagina getoond wordt. Ze staan in +page.js of +page.server.js.
• Server-code draait alleen op de server. Gebruik +page.server.js voor gevoelige taken, zoals het controleren van een wachtwoord.
• Formulieren en acties laten de bezoeker gegevens naar de server sturen. Ze staan in +page.server.js als actions.
• Statische bestanden zoals plaatjes zet je in de map static.

Alles rustig doornemen? De officiële SvelteKit-documentatie heeft een korte tutorial en goede voorbeelden. Begin bij het hoofdstuk over routing.

Wanneer kies je voor SvelteKit?

• Je werkt met Svelte en wil ook pagina's, adressen en server-code bouwen.
• Prestaties en kleine bestanden zijn belangrijk voor je project.
• Je wil een moderne full-stack ervaring met weinig complexiteit.
• Je wil een project dat licht blijft als het groeit.

Vergelijk SvelteKit met Next.js voor React en Nuxt voor Vue. Ze lossen hetzelfde probleem op, met een andere basis. Wil je de keuzes naast elkaar? Kijk dan naar de overzichtspagina.

Veelgemaakte fout

Heb je een nieuwe pagina aangemaakt maar zie je een foutmelding met "404"? Controleer dan of de map in src/routes staat en of het bestand precies +page.svelte heet. Het plusteken en de hoofdletters tellen mee.

Wat leer je hierna?

Je weet nu hoe een SvelteKit-project is opgebouwd, hoe een route werkt en waar de belangrijkste bestanden staan. Probeer eens een tweede pagina toe te voegen met een eigen adres en een gedeeld menu in +layout.svelte. Daarna is het goed om te leren werken met load-functies. De officiële SvelteKit-documentatie is daar de beste plek voor.

Je hebt nu de volledige keten van Svelte gezien, van component tot complete site. Blijf oefenen en bouw gerust kleine projecten. Zo groeit je kennis vanzelf!