Svelte File Structure

A Svelte project keeps files inside labeled folders. Each folder holds a specific type of file, so the project stays organized as it grows larger over time.

The Main Folders

A new project looks like a small office building. Each floor holds a different department, and every department handles one job. Knowing which floor to visit saves time when you look for a specific file.

Folder Diagram

my-app/
├── src/              (Department: your app code)
│   ├── routes/        -> pages of your app
│   ├── lib/           -> shared components and helpers
│   └── app.html       -> the base page shell
├── static/           (Department: files served as-is, like images)
├── package.json      (Department: project settings and dependencies)
└── svelte.config.js  (Department: build and framework settings)

The Src Folder

The src folder holds the code you write most often. This folder is the busiest floor in the building, since new pages and components land here first.

The Routes Folder

Inside src, the routes folder holds one file per page. A file named about inside routes creates a page reachable through an address ending in about. This mapping between folder names and web addresses removes the need for a separate routing configuration file.

The Lib Folder

The lib folder holds pieces you reuse across many pages, such as a header, a footer, or a button component. Placing shared pieces here keeps your routes folder focused only on page-specific content.

The App Shell File

The app.html file holds the base page structure that wraps every page in your project. Think of it as the outer shell of a building, while each page acts as a room inside that shell.

The Static Folder

The static folder holds files that do not change during the build, like logo images, fonts, or a favicon icon. The build step copies these files directly into the final output without altering them.

A logo placed in the static folder appears at the same web address in both development and the finished live site. This predictability makes the static folder a safe home for any file that needs a fixed, unchanging address.

The Config Files

The package.json file lists the packages your project depends on, along with scripts for running and building the app. Opening this file shows every external tool your project relies on.

The svelte.config.js file tells the build tool how to handle your project, including which adapter to use for deployment. An adapter prepares your project for a specific hosting platform, such as a static host or a serverless platform.

A Quick Walkthrough Example

Imagine a small blog project. The routes folder holds a file for the home page and another file for a single blog post page. The lib folder holds a reusable comment box component used on every post page. The static folder holds the site logo and a background image. The package.json file lists Svelte itself along with a markdown parser package used to render blog content.

Key Points

• The src folder holds the code you write for pages and shared components
• The routes folder maps folder names directly to page addresses
• The lib folder stores reusable pieces shared across pages
• The static folder holds files copied over without changes
• Config files control dependencies and build settings