Know Your Workspace
Before we start building BookIt, let’s understand what we’re working with. SvelteKit generated several folders and files, each with a specific purpose. Knowing where things go will save you confusion later.
What You’ll Learn
- The purpose of each folder in a SvelteKit project
- Which files you’ll edit frequently vs. rarely touch
- Where BookIt’s pages, components, and data will live
The Big Picture
Open the bookit folder in your code editor. You’ll see a structure like this:
bookit/
├── src/
│ ├── lib/
│ │ └── index.ts
│ ├── routes/
│ │ └── +page.svelte
│ ├── app.d.ts
│ └── app.html
├── static/
├── .gitignore
├── .prettierrc
├── eslint.config.js
├── package.json
├── svelte.config.js
├── tsconfig.json
└── vite.config.tsDon’t worry about memorizing everything. We’ll focus on what matters for building BookIt.
The src Folder
This is where you’ll spend 95% of your time. All your application code lives here.
src/routes/
This folder defines your pages. SvelteKit uses file-based routing, which means the folder structure here directly maps to URLs in your app.
Right now there’s just one file:
src/routes/
└── +page.svelte → http://localhost:5173/That +page.svelte file is your homepage. When we add more pages to BookIt, we’ll create more files and folders here:
src/routes/
├── +page.svelte → /
├── about/
│ └── +page.svelte → /about
├── services/
│ ├── +page.svelte → /services
│ └── [slug]/
│ └── +page.svelte → /services/lawn-mowing
└── bookings/
└── +page.svelte → /bookingsThe folder name becomes the URL path. We’ll explore routing in depth in Module 2.
src/lib/
This is your component library and shared code. Anything you want to reuse across multiple pages goes here.
For BookIt, this folder will eventually contain:
- Reusable components like
ServiceCard.svelteandBookingForm.svelte - Utility functions for formatting prices and dates
- Shared data and type definitions
SvelteKit provides a special import alias for this folder: $lib. Instead of writing ../../../lib/components/ServiceCard.svelte, you can write $lib/components/ServiceCard.svelte from anywhere in your project.
src/app.html
This is the HTML shell that wraps your entire application. Open it and you’ll see:
<!-- filename: src/app.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>The %sveltekit.head% and %sveltekit.body% placeholders are where SvelteKit injects your page content. You’ll rarely edit this file, but it’s useful for adding global meta tags or external stylesheets.
src/app.d.ts
This TypeScript declaration file defines types that are available throughout your app. SvelteKit uses it for things like typing the locals object in server-side code. You won’t need to touch this until we get to authentication in the advanced modules.
The static Folder
Files in static/ are served as-is at your site’s root URL. Put images, fonts, and other assets here.
For example, static/logo.png becomes available at http://localhost:5173/logo.png.
For BookIt, we’ll add:
- Service images
- A favicon
- Any downloadable files
Don’t put files here that need processing (like Sass or TypeScript). Those belong in src/.
Configuration Files
These files configure various tools in your project. You’ll rarely edit them after initial setup.
package.json
Lists your project’s dependencies and scripts. The important scripts are:
{
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview"
}
}npm run dev— Start development servernpm run build— Build for productionnpm run preview— Preview the production build locally
svelte.config.js
Configures the Svelte compiler and SvelteKit. The default settings work fine for BookIt. We’ll revisit this file when we deploy in Module 32.
vite.config.ts
Configures Vite, the build tool that powers SvelteKit’s dev server and production builds. The defaults work well; you’ll only edit this to add plugins.
tsconfig.json
TypeScript configuration. The defaults are tuned for SvelteKit and work out of the box.
eslint.config.js and .prettierrc
Code quality tools. ESLint catches potential bugs; Prettier formats your code consistently. Your editor can run these automatically on save.
Files You’ll Edit Often
As you build BookIt, you’ll primarily work in:
| Location | What Goes There |
|---|---|
src/routes/ | Pages and layouts |
src/lib/ | Reusable components and utilities |
static/ | Images and assets |
Files You’ll Rarely Touch
These are mostly “set and forget”:
| File | Purpose |
|---|---|
svelte.config.js | Compiler settings |
vite.config.ts | Build tool settings |
tsconfig.json | TypeScript settings |
app.html | HTML shell |
A Preview of BookIt’s Structure
By the end of this course, your src/ folder will look something like this:
src/
├── lib/
│ ├── components/
│ │ ├── ServiceCard.svelte
│ │ ├── BookingForm.svelte
│ │ ├── PriceBadge.svelte
│ │ └── ...
│ ├── stores/
│ │ └── cart.ts
│ ├── utils/
│ │ └── format.ts
│ └── data/
│ └── services.ts
├── routes/
│ ├── +layout.svelte
│ ├── +page.svelte
│ ├── about/
│ ├── services/
│ ├── bookings/
│ └── api/
└── app.htmlWe’ll build this structure piece by piece. Each lesson adds something new to the right place.
Summary
SvelteKit projects have a clear organization: pages live in src/routes/, shared code lives in src/lib/, and static assets go in static/. Configuration files at the root rarely need editing after setup.
Key takeaways:
src/routes/defines your pages — folder structure = URL structuresrc/lib/holds reusable components, accessible via$libstatic/serves files directly at your site’s root- Configuration files are mostly “set and forget”
Next Steps
Now you know where everything goes. In the next lesson, Understanding .svelte Files, we’ll look inside a Svelte component and learn about its three sections: script, markup, and style.