Project Structure

A typical SvelteKit project looks like this:

my-project/
├ src/
│ ├ lib/
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ └ hooks.js
├ static/
│ └ [your static assets]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

You'll also find common files like .gitignore and .npmrc (and .prettierrc and .eslintrc.cjs and so on, if you chose those options when running npm create svelte@latest).

Project filespermalink

srcpermalink

The src directory contains the meat of your project.

• lib contains your library code, which can be imported via the $lib alias, or packaged up for distribution using svelte-kit package
• params contains any param matchers your app needs
• routes contains the routes of your application
• app.html is your page template — an HTML document containing the following placeholders:
  • %sveltekit.head% — <link> and <script> elements needed by the app, plus any <svelte:head> content
  • %sveltekit.body% — the markup for a rendered page
  • %sveltekit.assets% — a relative path from the page to paths.assets
  • %sveltekit.nonce% — a CSP nonce for manually included links and scripts, if used
• hooks.js (optional) contains your application's hooks
• service-worker.js (optional) contains your service worker

You can use .ts files instead of .js files, if using TypeScript.

staticpermalink

Any static assets that should be served as-is, like robots.txt or favicon.png, go in here.

package.jsonpermalink

Your package.json file must include @sveltejs/kit, svelte and vite as devDependencies.

When you create a project with npm create svelte@latest, you'll also notice that package.json includes "type": "module". This means that .js files are interpreted as native JavaScript modules with import and export keywords. Legacy CommonJS files need a .cjs file extension.

svelte.config.jspermalink

This file contains your Svelte and SvelteKit configuration.

tsconfig.jsonpermalink

This file (or jsconfig.json, if you prefer type-checked .js files over .ts files) configures TypeScript, if you added typechecking during npm create svelte@latest. Since SvelteKit relies on certain configuration being set a specific way, it generates its own .svelte-kit/tsconfig.json file which your own config extends.

vite.config.jspermalink

A SvelteKit project is really just a Vite project that uses the @sveltejs/kit/vite plugin, along with any other Vite configuration.

Other filespermalink

testpermalink

If you choose to add tests during npm create svelte@latest, they will go in a test directory.

.svelte-kitpermalink

As you develop and build your project, SvelteKit will generate files in a .svelte-kit directory (configurable as outDir). You can ignore its contents, and delete them at any time (they will be regenerated when you next dev or build).