Sveltekit

Getting started Link to heading

Create a new project Make sure node 18+ is installed.

npm create svelte@latest

At the prompt select:

Skeleton project
Typescript syntax
We can then select the option to install Eslint, Prettier, Playwrite and Vite.

Install the dependancies:

npm i

To run the application

npm run dev

Application Structure Link to heading

vite.config.ts contains the build configuration svelte.config.ts contains the svelte configuration, this can be extended to deploy to numerous different environments. static contains all the static assets for the project such as images, fonts and other assets. src containst the source

The start page of the project is app.html

In the src folder create a lib folder, this will be accesible using the shorthand $lib through the application. We can place components and utilities in the folder and have a shorthand way to reference them.

Extensions Link to heading

Install the Svelte for VS Code extension. This has the ability to generate boiler plate pages, right click on a folder to access it though the context menu or bring up the command pallete and type sveltekit

## Routes

Sveltekit uses folder based routing, the url is determined by the folder structure.

Folders can be be:

static - hello would route to www.mysite.com/hello
dynamic - [username] svelte sees the variable username as a route parameter. We could use the code params.username = 'Bob' and Svelte would have the url route to www.mysite.com/bob