Svelte logo

SvelteKit by Example: Filesystem & Routing

SvelteKit is a meta-framework to build full-stack web applications with Svelte. SvelteKit comes with routing and the necessary build tools to create an application.

If you want to follow along with these examples, use the instructions on kit.svelte.dev to create a new project.

In this example, we'll review the skeleton of a SvelteKit app and its file-based routing.

A hidden folder for SvelteKit to cache and temporarily store generated code.

Your application lives in src.

Use lib to store application code not tied to specific routes.

The routes folder dictates the structure of your application.

Each page has a +page.svelte component. The one in routes is your home page.

SvelteKit also supports layout components and scripts to apply a layout to all descendants.

Use subfolders for additional pages, this one will be used for the /about page. Page components can be accompanied by page scripts & server scripts to fetch & prepare data.

This will be the index page for your lists at /lists. Use square brackets to add a route parameter. This will be the "show" page of a todo list at /lists/<id>.

Your application's main CSS file and HTML skeleton.

svelte.config.js contains SvelteKit specific configuration.

SvelteKit is built with Vite, which means additional Vite plugins can be registered.

.svelte-kit


src/

——— lib/


——— routes/


——— ——— +page.svelte


——— ——— +layout.js
——— ——— +layout.svelte


——— ——— about/
——— ——— ——— +page.js
——— ——— ——— +page.server.js
——— ——— ——— +page.svelte


——— ——— lists/
——— ——— ——— +page.svelte
——— ——— ——— [id]/
——— ——— ——— ——— +page.svelte

——— app.css
——— app.html

.gitignore

package.json

README.md

svelte.config.js


vite.config.js