Project Structure

Typicall structure of SvelteKit project is something like:

my-app/
 |
 +---- .svelte-kit/                 # (generated at dev)
 +---- build/                       # (generated at build)
 +---- src/
 |       |
 |       +---- lib/                 # (optional)
 |       +---- params/              # (optional)
 |       +---- routes/
 |       +---- app.css              # (optional)
 |       +---- app.d.ts             # (optional)
 |       +---- app.html
 |       +---- hooks.js             # or 'hooks/' (optional)
 |       +---- service-worker.js    # (optional)
 +---- static/
 +---- tests/                       # (optional)
 +---- .eslintrtc.cjs               # (optional)
 +---- .gitignore                   # (optional)
 +---- .npmrc
 +---- .prettierrc                  # (optional)
 +---- CHANGELOG.md                 # (optional)
 +---- jsconfig.json                # or 'tsconfig.json' (optional)
 +---- package.json
 +---- playwright.config.js         # (optional)
 +---- README.md                    # (optional)
 +---- svelte.config.js

note that in case of TypeScript scripts files in src/ directory have .ts file extension.

package.jsonpermalink

Same as in any node.js app, contain name, version, scripts, devDependencies, type and dependencies and other informations about your project.

Content depends on what options you used when initializing project. SvelteKit is ESM first so we use "type": "module" settings. In "scripts" property, we can see scripts used for building SvelteKit project, running dev server, packaging and to run other tools for linting, formating, type-checking, testing etc.

When you decide to install adapter, you should use -D option to install it as devDependency.

svelte.config.jspermalink

Contains configuration of SvelteKit project.

static/permalink

Is folder that holds your static assets. Those are files that are not processed by compiler but instead are copied as are to build/ folder, that is generated by adapter when building application.

src/permalink

Holds all Svelte, JS and other files used to implement your app.

app.htmlpermalink

Is entry files, to which is Svelte app parsed. It contain some placeholders like %svelte.head%, %svelte.body% or %svelte.assets%. These placeholders will be removed and replaced by actual content at build or ssr.

%svelte.head% is replaced mostly with <link> and <script> tags, that makes your application possible to work. But it's also used as place to which put content from your <svelte:head> tags defined in your layouts and pages.

%svelte.body% is where whole content (HTML) as well as self-hydratating JavaScript code is put.

%svelte.assets% is replaced by actual base path to assets. This is typically empty string and often not needed, but if you choose to change config.kit.paths option in svelte.config.js for some reasons, it will help to correctly load assets.

routes/permalink

Is most important folder in your project. Those contain Pages and Endpoints as well as Layouts and private module files. SvelteKit use file-based routing, so Pages and Endpoints in this folder map to path of URL.

lib/permalink

Is folder that contain other files you use in app. Those files can be Components, Stores, util files, some data, or even server-side files (if they are not imported to any client-side file (like .svelte Page or Component file), they are not exposed to client-side). But if you are creating package, whole content of lib/ folder is used to generate package, if it's not configured otherwise in svelte.config.js.

hooks.js or hooks/permalink

Is folder or file that contain hooks. Those are functions executed at every request. Read more about them in Hooks section. Top scope of this file can be used for initialization code like database connection for example.

params/permalink

Contain param matchers that can be used for dynamic pages or endpoints.

service-worker.js or service-worker/permalink

Contain your code for service-worker. If is present, service-worker will be automatically registered by SvelteKit.

other files in src/ folder.permalink

src/ folder can contain also app.css files that contain global styles, or app.d.ts (if you use type-checking) used by TypeScript that contains type definitions in App namespace.

build/permalink

Is folder generated at build, that contain your compiled app prepared for deploying to production. In case You use adapter-node, you can execute it with node build command.

.svelte-kit/permalink

Folder used when npm run dev command is used.

README.mdpermalink

Contain some informations about how to create, develop and build or deploy your app.

other optional files and tests folder in root directorypermalink

based on options you selected when initializing project, there are generated bunch of other files used for tools like Git, ESLint, Prettier, TypeScript, or PlayWright.