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. This is 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, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
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/:slugThe 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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
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. 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. The Sveltejs Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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
- What Is Svelte and Why It Compiles
- Creating a Project with npm create svelte
- Project Structure: src routes static
- The Dev Server and Hot Module Replacement