Getting Started with SvelteKit

Enda Lee 2025

PDF version

Introduction

Setting up and running a SvelteKit application for the first time.

For more details read the following guides:

1. Sveltekit Docs: https://svelte.dev/docs/kit/introduction
2. Svelte 5 Docs: https://svelte.dev/docs/svelte/overview

These will serve as useful references and examples in future labs. Use the Svelte Playground to try it, without installing anything.

Creating a new application

1. Start by adding a new folder named lab2 to your webapps folder:

2. Open the lab2 folder in VS Code

It is very important that you open the correct folder

Options:

1. Right click the folder and open in vs code (if available).
2. Open Folder from the VS Code File menu.
3. Open webapps/lab2 in a terminal and enter the command code .

1. Important: the working folder, lab2 in this case, should be at the very top of the vs code explorer. If it is not then you have opened the wrong folder.

2. Open a new terminal from the vs code terminal menu (click the ... if the menu is missing ). You should also see webapps/lab2 in the terminal prompt.

3. Setup a Sveltekit app in the folder

Enter the following command to start the setup process. . refers to the current directory.

npx sv create .

You will be asked a series of questions about how the application should be configured - use up/ down arrow keys to select single choice and tab to select multiple options. Then Enter to confirm choice:

1. Choose the SvelteKit minimal template:

2. Choose TypeScript syntax:

3. Use the tab key to choose the following to be included in the project:

   

4. Testing options, pick both:

   

5. sveltekit-adaptor choice, pick auto:

   

6. Use npm as the package manager:

   

7. Successfully installed:

   

8. Start the web app using npm run dev:

   

Running the Web App

Open the address displayed in the terminal http://localhost:5173 in your web browser. The application home page should load and display the Welcome message..

The content displayed is generated from the home route page: lab2/src/routes/+page.svelte

Examine the App and file structure

The home page served to the browser was generated from the /src/routes/ folder. This is is the root directory of the application and +page.svelte defines the content which will be servered to clients.

Note the file naming scheme, the framework expects to find a file named +page.svelte for each route.

1. Try changing the page text. The browser should automaically update when +page.svelte is saved.

2. Adding new page routes

Currently the site has a home page, served from the root, src/routes. Each new page requires the addition of a folder (named as the page name) and a +page.svelte in the new folder.

For example, to add a new page named about:

1. Create src\routes\about.
2. Create a new +page.svelte in the about folder.
3. Add the page contents to src\routes\about\+page.svelte
4. Load the new page in a browser using http://localhost:5173/about

Add a H1 element to both pages to indicate the page content. Note that only html body content is required.

The rest of the HTML page is loaded from src/app.html and src/routes/+layout.svelte

Exercise: Add a contact page, based on the about page example above

4. Testing the new routes

Open the the page/ routes in a browser. You will see that the page names are derived from the names of the folders added to src/routes/

Adding a navigation menu

A shared layout definition can be used to easily add navigation links to all the pages. The +layout.svelte

page in routes is used for this purpose. In this example a navigation menu will be added to the layout, aking it part of every page.

Add the <nav> element to +layout.svelte as shown below. Note the format of the links this is important:

Save the file and reload the pages. They should all include the new nav menu.

Styling with Bootstrap

Bootstrap 5 can be installed for use in the website but care must be taken to ensure that it only works client-side and doesn't interfere with SvelteKit's SSR (Server-side Rendering)

1. Install Bootstrap with types (to support TypeScript)

   npm install bootstrap
   npm install -D @types/bootstrap
   

2. Import bootstrap in +layout.svelte so that it is included in all pages

   onMount Guarantees the code only runs after the component is in the DOM and never runs during SSR (server-side rendering).

   Add the code below to +layout.svelte :

   

Once loaded, Bootstrap 5 styles can be applied in any page.

Exercise: style the nav menu based on one of the Bootstrap Examples

Component variable example

Each .svelte page is a self contained component which can include its own script, style, and HTML content. This simple example shows how to define a variable and use it in the page.

1. Add a <script lang"ts"></script> block at the top of routes\+page.svelte and declare a variable of type scring to store the wecome message.
2. Display the {message} value in the page in place of the existing static message.

3. Save the page and test. Modify the variable and reload.

Exercise: See if you can pass the message value as a URL parameter, based on https://svelte.dev/docs/kit/load#Using-URL-data-params

Loading data (from an API)

The next step is to fetch some products from https://dummyjson.com/products and dsplay them in a page.

1. Follow the same process as above and add a new products route and +page.svelte. also add +page.ts

   which will contain the load() function.

   

2. The product data must be read from the API before the page can be rendered. This is achieved in a load

   function in +page.ts see: https://svelte.dev/docs/kit/load#Making-fetch-requests

3. Now open Open src/routes/product/+page.svelte (in VS Code_

   Add the following