Svelte journey | SvelteKit: Introduction, Routing, Data Loading, Shared Modules

Svelte journey (9 Part Series)

1Svelte journey | Templating, Reactivity2Svelte journey | Props, Template Directives, Events...5 more parts...8Svelte journey | SvelteKit: Server-side, SvelteKit utility stores, Error handling, Hooks9Svelte journey | SvelteKit: Page options, Link Options, Envir

Welcome,

This article marks the beginning of our exploration of @sveltejs/kit! SvelteKit is a metaframework that contains the core toolset needed to build a variety of applications. In this article, we embark on a journey through key aspects: Routing, Data Loading, and Shared Modules, unveiling the power and simplicity that SvelteKit brings to web development.

General Information

SvelteKit, a robust framework, offers a seamless transition from Server-Side Rendering (SSR) to a Single Page Application (SPA) after the initial load. Default configuration files, such as svelte.config.js and vite.config.js, along with a well-defined folder structure in /src, provide a solid foundation for building modern web applications. The /routes directory, following filesystem-based routing, makes navigation intuitive and efficient.

• SSR by default → improved load performance, SEO-friendly:
• Transitions to SPA after the initial load;
• Still, this can be configured if needed.
• Default configuration files in the root folder:
• svelte.config.js;
• vite.config.js;
• package.json, .prettierrc, etc.
• Default folder structure:
• /src
• /app.html — page template file;
• /app.d.ts — app-wide interfaces (for TypeScript);
• /routes — the routes of the app;
• /lib — files that can be imported via $lib alias in this folder;
• /static — for any assets used in the app.

Routing

SvelteKit's routing system is structured, with each +page.svelte file inside src/routes creating a corresponding page in the app. This approach simplifies route structuring and allows for easy parameterization using square brackets in the file path.

SvelteKit uses filesystem-based routing — the route path is the same as the folder path.

Route structuring | +page.svelte

Every +page.svelte file inside src/routes creates a page in the app.

• e.g. src/routes/+page.svelte → /, src/routes/about/+page.svelte → /about

Common layout | +layout.svelte

To have a common layout for some of the routes, you need to create a +layout.svelte file in the topmost folder that shares this layout. You need to specify the common layout here and put the <slot /> element to indicate where pages should mount.