Skip to main content
Svelte Fundamentals
CHAPTER 03 Beginner

Svelte Project Structure

Updated: May 18, 2026
5 min read

# CHAPTER 3

Svelte Project Structure

1. Chapter Introduction

Understanding the project structure is the foundation of productive Svelte development. Every file has a purpose, and knowing where code belongs keeps projects maintainable as they grow. In this chapter, we explore every file and folder in a Svelte/Vite project and establish best practices for organizing large applications.

2. Learning Objectives

  • Understand the role of every file in a new Svelte project.
  • Know where to place components, utilities, and assets.
  • Understand vite.config.js and package.json.
  • Establish a scalable folder structure for real applications.

3. Full Project Structure

text
123456789101112131415161718 
my-svelte-app/
│
├── public/                    ← Static files served as-is
│   └── favicon.png
│
├── src/                       ← ALL your source code lives here
│   ├── lib/                   ← Reusable components & utilities
│   │   └── MyButton.svelte
│   ├── assets/                ← Images, fonts (imported in JS)
│   │   └── logo.svg
│   ├── App.svelte             ← Root component (the app entry UI)
│   └── main.js               ← JavaScript entry point
│
├── index.html                 ← The single HTML page (SPA shell)
├── vite.config.js             ← Vite bundler configuration
├── package.json               ← Project metadata and dependencies
├── package-lock.json          ← Locked dependency versions
└── .gitignore                 ← Files excluded from git

4. index.html — The SPA Shell

Unlike traditional websites, Svelte has ONE HTML file. The browser loads this, then Svelte JavaScript takes over rendering all content dynamically.
html
123456789101112131415 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Svelte App</title>
  </head>
  <body>
    <!-- Svelte mounts the entire app here -->
    <div id="app"></div>
    <!-- Entry point — Vite processes this -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

5. src/main.js — The Entry Point

This file bootstraps the Svelte application by mounting App.svelte to the DOM:
javascript
123456789 
// src/main.js
import { mount } from &#039;svelte&#039;;
import App from &#039;./App.svelte&#039;;

const app = mount(App, {
  target: document.getElementById(&#039;app&#039;),
});

export default app;

6. src/App.svelte — Root Component

This is the top of your component tree. It is the first component rendered:
svelte
12345678 
<!-- src/App.svelte -->
<script>
  import MyComponent from &#039;./lib/MyComponent.svelte';
</script>

<main>
  <MyComponent />
</main>

7. src/lib/ — The Component Library Folder

The lib folder is the conventional home for all reusable components and utility functions. In SvelteKit, $lib is a special import alias:
text
123456789 
src/lib/
├── components/
│   ├── Button.svelte
│   ├── Card.svelte
│   └── Modal.svelte
├── stores/
│   └── cartStore.js
└── utils/
    └── formatCurrency.js

8. vite.config.js — Build Configuration

vite.config.js
123456 
import { defineConfig } from &#039;vite&#039;;
import { svelte } from &#039;@sveltejs/vite-plugin-svelte&#039;;

export default defineConfig({
  plugins: [svelte()], // Tells Vite how to process .svelte files
});

9. package.json — Project Manifest

json
1234567891011121314 
{
  "name": "my-svelte-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "svelte": "^4.0.0",
    "vite": "^5.0.0"
  }
}

10. public/ vs src/assets/

  • public/: Files placed here are served exactly as-is. Reference them with absolute paths: <img src="/logo.png">. Ideal for favicons and files that must not be processed.
  • src/assets/: Files here are processed by Vite (hashed filenames for cache-busting). Import them in your JavaScript: import logo from './assets/logo.svg'.

11. Recommended Folder Structure for Real Apps

text
123456789101112 
src/
├── lib/
│   ├── components/      ← Reusable UI components
│   │   ├── ui/          ← Generic (Button, Card, Modal)
│   │   └── feature/     ← Feature-specific (ProductCard, CartItem)
│   ├── stores/          ← Svelte stores (state management)
│   ├── services/        ← API calls and external services
│   ├── utils/           ← Helper functions
│   └── types/           ← TypeScript types (if using TS)
├── routes/              ← Page components (for SPA routing)
├── App.svelte
└── main.js

12. Common Mistakes

  • Putting components in src/ root: As apps grow, dumping all components in src/ becomes chaotic. Always use the lib/components/ structure from day one.
  • Confusing public/ and src/assets/: For images used in components, use src/assets/ for the Vite optimization benefits (content hashing).

13. MCQs with Answers

Question 1

What is the entry JavaScript file for a Svelte/Vite application?

Question 2

What HTML element does Svelte mount the entire application into?

Question 3

What is the conventional folder for reusable components and utilities?

Question 4

What is the purpose of vite.config.js?

Question 5

What @sveltejs/vite-plugin-svelte does in vite.config.js?

Question 6

Files in the public/ folder are:

Question 7

What is the benefit of placing images in src/assets/ versus public/?

Question 8

In SvelteKit, what special alias allows importing from src/lib/ from anywhere in the project?

Question 9

What does nodemodules/ contain and should it be committed to Git?

Question 10

What command rebuilds nodemodules/ from package.json after cloning a project?

14. Interview Questions

  • Q: What is the purpose of the lib folder in a Svelte project and how does it differ from page components?
  • Q: Explain the difference between files in public/ and src/assets/.

15. Summary

A well-organized Svelte project is a maintainable one. By understanding the roles of main.js (entry), App.svelte (root component), lib/ (reusable code), and public/ (static assets), you establish a solid architecture from day one that scales smoothly from prototype to production.

16. Next Chapter Recommendation

In Chapter 4: Svelte Syntax and Components, we write our first real component, learn Svelte's unique single-file component format, and explore reactive variable declarations.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Installing Svelte and Environment Setup
Next Chapter Svelte Syntax and Components

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1