Configuration

Your project's configuration lives in a svelte.config.js file at the root of your project. As well as SvelteKit, this config object is used by other tooling that integrates with Svelte such as editor extensions.

ts
import adapter from '@sveltejs/adapter-auto';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};
 
export default config;

ts
interface Config {…}

ts
compilerOptions?: CompileOptions;

ts
extensions?: string[];

ts
kit?: KitConfig;

ts
package?: {
  source?: string;
  dir?: string;
  emitTypes?: boolean;
  exports?(filepath: string): boolean;
  files?(filepath: string): boolean;
};

ts
preprocess?: any;

ts
[key: string]: any;

The kit property configures SvelteKit, and can have the following properties:

adapterpermalink

Your adapter is run when executing vite build. It determines how the output is converted for different platforms.

aliaspermalink

An object containing zero or more aliases used to replace values in import statements. These aliases are automatically passed to Vite and TypeScript.

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    alias: {
      // this will match a file
      'my-file': 'path/to/my-file.js',
 
      // this will match a directory and its contents
      // (`my-directory/x` resolves to `path/to/my-directory/x`)
      'my-directory': 'path/to/my-directory',
 
      // an alias ending /* will only match
      // the contents of a directory, not the directory itself
      'my-directory/*': 'path/to/my-directory/*'
    }
  }
};

The built-in $lib alias is controlled by config.kit.files.lib as it is used for packaging.

You will need to run npm run dev to have SvelteKit automatically generate the required alias configuration in jsconfig.json or tsconfig.json.

appDirpermalink

The directory relative to paths.assets where the built JS and CSS (and imported assets) are served from. (The filenames therein contain content-based hashes, meaning they can be cached indefinitely). Must not start or end with /.

csppermalink

Content Security Policy configuration. CSP helps to protect your users against cross-site scripting (XSS) attacks, by limiting the places resources can be loaded from. For example, a configuration like this...

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    csp: {
      directives: {
        'script-src': ['self']
      },
      reportOnly: {
        'script-src': ['self']
      }
    }
  }
};
 
export default config;

...would prevent scripts loading from external sites. SvelteKit will augment the specified directives with nonces or hashes (depending on mode) for any inline styles and scripts it generates.

To add a nonce for scripts and links manually included in src/app.html, you may use the placeholder %sveltekit.nonce% (for example <script nonce="%sveltekit.nonce%">).

When pages are prerendered, the CSP header is added via a <meta http-equiv> tag (note that in this case, frame-ancestors, report-uri and sandbox directives will be ignored).

When mode is 'auto', SvelteKit will use nonces for dynamically rendered pages and hashes for prerendered pages. Using nonces with prerendered pages is insecure and therefore forbidden.

Note that most Svelte transitions work by creating an inline <style> element. If you use these in your app, you must either leave the style-src directive unspecified or add unsafe-inline.

If this level of configuration is insufficient and you have more dynamic requirements, you can use the handle hook to roll your own CSP.

ts
mode?: 'hash' | 'nonce' | 'auto';

ts
directives?: CspDirectives;

ts
reportOnly?: CspDirectives;

csrfpermalink

Protection against cross-site request forgery attacks.

ts
checkOrigin?: boolean;

embeddedpermalink

Whether or not the app is embedded inside a larger app. If true, SvelteKit will add its event listeners related to navigation etc on the parent of %sveltekit.body% instead of window, and will pass params from the server rather than inferring them from location.pathname.

envpermalink

Environment variable configuration

ts
dir?: string;

ts
publicPrefix?: string;

filespermalink

Where to find various files within your project.

ts
assets?: string;

ts
hooks?: {…}

ts
client?: string;

ts
server?: string;

ts
lib?: string;

ts
params?: string;

ts
routes?: string;

ts
serviceWorker?: string;

ts
appTemplate?: string;

ts
errorTemplate?: string;

inlineStyleThresholdpermalink

Inline CSS inside a <style> block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file to be inlined. All CSS files needed for the page and smaller than this value are merged and inlined in a <style> block.

This results in fewer initial requests and can improve your First Contentful Paint score. However, it generates larger HTML output and reduces the effectiveness of browser caches. Use it advisedly.

moduleExtensionspermalink

An array of file extensions that SvelteKit will treat as modules. Files with extensions that match neither config.extensions nor config.kit.moduleExtensions will be ignored by the router.

outDirpermalink

The directory that SvelteKit writes files to during dev and build. You should exclude this directory from version control.

pathspermalink

ts
assets?: string;

ts
base?: string;

prerenderpermalink

See Prerendering.

ts
concurrency?: number;

ts
crawl?: boolean;

ts
entries?: Array<'*' | `/${string}`>;

ts
handleHttpError?: PrerenderHttpErrorHandlerValue;

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    prerender: {
      handleHttpError: ({ path, referrer, message }) => {
        // ignore deliberate link to shiny 404 page
        if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
          return;
        }
 
        // otherwise fail the build
        throw new Error(message);
      }
    }
  }
};

ts
handleMissingId?: PrerenderMissingIdHandlerValue;

ts
origin?: string;

serviceWorkerpermalink

ts
register?: boolean;

ts
files?(filepath: string): boolean;

typescriptpermalink

ts
config?: (config: Record<string, any>) => Record<string, any> | void;

versionpermalink

Client-side navigation can be buggy if you deploy a new version of your app while people are using it. If the code for the new page is already loaded, it may have stale content; if it isn't, the app's route manifest may point to a JavaScript file that no longer exists. SvelteKit helps you solve this problem through version management. If SvelteKit encounters an error while loading the page and detects that a new version has been deployed (using the name specified here, which defaults to a timestamp of the build) it will fall back to traditional full-page navigation. Not all navigations will result in an error though, for example if the JavaScript for the next page is already loaded. If you still want to force a full-page navigation in these cases, use techniques such as setting the pollInverval and then using beforeNavigate:

/// +layout.svelte
<script>
import { beforeNavigate } from '$app/navigation';
import { updated } from '$app/stores';

beforeNavigate(({ willUnload, to }) => {
  if ($updated && !willUnload && to?.url) {
    location.href = to.route.url.href;
  }
});
</script>

If you set pollInterval to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the updated store to true when it detects one.

ts
name?: string;

ts
pollInterval?: number;