Creating New SvelteKit Project

• Open your terminal and change directory to where you wanna create your new project.
• After changing to your working directory:

When you create SvelteKit project you will get some option choose them according your need.

• After creating project, Your project directory will going to look like:

				├── package-lock.json
				├── package.json
				├── playwright.config.ts
				├── pnpm-lock.yaml
				├── src
				│   ├── app.d.ts
				│   ├── app.html
				│   └── routes
				│       └── +page.ts
				├── static
				│   └── favicon.png
				├── svelte.config.js
			

• Now you can run your development server using:

pnpm dev // For pnpm

npm run dev // For npm

This completes the part how we create new sveltekit project. I'll be explaining some more things about sveltekit after setting up basic needs for app.

Adding TailwindCSS and daisyUI for Design

• Now we are going to add Tailwind CSS and DaisyUI to our project, so first open your terminal and make sure you are in root directory of project.
• Install TailwindCSS and DaisyUI using package manager and then initiate the tailwind config like:

• Now, we have initiatedtailwind.config.cjswe have to change contentobject according to svelte files.
• For DaisyUI, we need to add it aspluginintailwind.config.cjs.

• After setting up tailwind config we have to add aapp.cssfile insrcdirectory of your project and then add following lines of code in that file.

• After addingapp.css,add+layout.sveltefile insrc/routesdirectory.
• Add following lines of code:

• After adding TailwindCSS in project, Your project directory will going to look like:

				├── package.json
				├── playwright.config.ts
				├── pnpm-lock.yaml
				├── postcss.config.cjs
				├── src
				│   ├── app.css
				│   ├── app.d.ts
				│   ├── app.html
				│   └── routes
				│       ├── +layout.server.ts
				│       ├── +layout.svelte
				│       ├── +page.svelte
				│       └── +page.ts
				├── static
				│   └── favicon.png
				├── svelte.config.js
				├── tailwind.config.cjs
				├── tests
				│   └── test.ts
				├── tsconfig.json
				└── vite.config.js
			

This completes the part how we add TailwindCSS with daisyUI in project.

SvelteKit Routing

• SvelteKit uses filesystem-based router which are defined by directories in yoursrc/routes.
• Examples:
1. src/routesis root directory of routes which is/on your app.
2. src/routes/aboutas you can seeaboutis a directory so it's a route for app which is accessible as/abouton your app.
3. src/routes/student/[slug]creates a routes which is dynamic in nature on the basis ofslug so if you want to access something like/student/1here1is slug's value which is accessible inside your route files.
• Each route directory contains one or more route files, which can be identified by their+prefix.
• File Names:
1. +layout.svelte, +layout.ts/layout.js, +layout.server.ts/+layout.server.js
2. +page.svelte, +page.ts/+page.js, +page.server.ts/+page.server.js
3. +server.ts/+server.js
4. +error.svelte
• You can change routes root directory insvelte.config.tsand you can look here for config details
• +prefixed files explanation:

1. +page.svelte,In this file we write our HTML, CSS and JS for your frontend view.
2. +page.js/+page.ts and +layout.js/+layout.ts,In thesse file we write our load function which is a universal load which runs on both server as well as in browser.