0Pricing
Sveltejs Academy · Lesson

Project Structure: src routes static

Explore the directory layout of a SvelteKit project and the purpose of each folder.

Project Structure: src routes static is a free Sveltejs Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Top-Level Folders

A SvelteKit project has these key folders: src/, static/, and config files at the root.

The src Folder

src/ contains all your application code: routes, components, library code, and the app entry point.

The src/routes Folder

Each subfolder of src/routes maps to a URL. A file named +page.svelte in a folder defines what renders at that path.

Routes Example

The path src/routes/about/+page.svelte renders at /about in the browser.

src/routes/
  +page.svelte         -> /
  about/+page.svelte   -> /about
  blog/[slug]/+page.svelte -> /blog/:slug

The src/lib Folder

src/lib is for shared modules and components. Import from it using the alias $lib.

import Button from "$lib/Button.svelte";

The static Folder

Files in static/ are served as-is at the URL root. Use it for favicon.png, robots.txt, and other unprocessed assets.

Config Files

The root contains svelte.config.js, vite.config.js, package.json, and optionally tsconfig.json.

svelte.config.js

Defines preprocessors, adapter, and kit-level options. The adapter decides how your app is built for deployment.

import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };

vite.config.js

Configures Vite (the underlying bundler). Add plugins, aliases, server proxy rules, and build options here.

The app.html File

src/app.html is the HTML shell that wraps every page. Placeholders like %sveltekit.head% get filled in at build time.

Hooks File

src/hooks.server.js lets you intercept requests on the server. We will cover hooks in a later course.

Quick Check

Where does a SvelteKit page route file live?

Recap

You now know the project layout: src for code, routes for pages, lib for shared code, and static for raw assets.

Frequently asked questions

Is the “Project Structure: src routes static” lesson free?

Yes — the full text of “Project Structure: src routes static” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.

What will I learn in “Project Structure: src routes static”?

Explore the directory layout of a SvelteKit project and the purpose of each folder. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Sveltejs Academy?

No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Project Structure: src routes static” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Sveltejs Academy lesson?

Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. What Is Svelte and Why It Compiles
  2. Creating a Project with npm create svelte
  3. Project Structure: src routes static
  4. The Dev Server and Hot Module Replacement
← Back to Sveltejs Academy