Vercel

To deploy to Vercel, use adapter-vercel.

This adapter will be installed by default when you use adapter-auto, but adding it to your project allows you to specify Vercel-specific options.

Usagepermalink

Install with npm i -D @sveltejs/adapter-vercel, then add the adapter to your svelte.config.js:

ts
import adapter from '@sveltejs/adapter-vercel';
 
export default {
  kit: {
    // default options are shown
    adapter: adapter({
      // if true, will deploy the app using edge functions
      // (https://vercel.com/docs/concepts/functions/edge-functions)
      // rather than serverless functions
      edge: false,
 
      // an array of dependencies that esbuild should treat
      // as external when bundling functions
      external: [],
 
      // if true, will split your app into multiple functions
      // instead of creating a single one for the entire app
      split: false
    })
  }
};

Config optionspermalink

Besides the config options shown above, the Vercel adapter also supports route level config through export let config. You can deploy parts of your app to the edge and others to serverless functions.

ts
// Deploy the about page to the edge ...
/** @type {import('@sveltejs/adapter-vercel').Config} */
export const config = {
  runtime: 'edge'
};

ts
import type { Config } from '@sveltejs/adapter-vercel';
// Deploy the about page to the edge ...
 
export const config: Config = {
  runtime: 'edge'
};

ts
// ... and all admin pages to serverless 
/** @type {import('@sveltejs/adapter-vercel').Config} */
export const config = {
  runtime: 'serverless'
};

ts
import type { Config } from '@sveltejs/adapter-vercel';
// ... and all admin pages to serverless 
 
export const config: Config = {
  runtime: 'serverless'
};

Besides that, the following options are supported:

• runtime, regions, maxDuration and memory options for serverless functions
• regions and envVarsInUse options for edge functions

You can set defaults through the adapter options and override them inside +page/layout(.server).js files using the config export.

Routes with the same config are bundled into one function, unless split: true is set.

Environment Variablespermalink

Vercel makes a set of deployment-specific environment variables available. Like other environment variables, these are accessible from $env/static/private and $env/dynamic/private (sometimes — more on that later), and inaccessible from their public counterparts. To access one of these variables from the client:

ts
import { VERCEL_COMMIT_REF } from '$env/static/private';
 
/** @type {import('./$types').LayoutServerLoad} */
export function load() {
  return {
    deploymentGitBranch: VERCEL_COMMIT_REF
  };
}

ts
import { VERCEL_COMMIT_REF } from '$env/static/private';
import type { LayoutServerLoad } from './$types';
 
export const load = (() => {
  return {
    deploymentGitBranch: VERCEL_COMMIT_REF
  };
}) satisfies LayoutServerLoad;

<script>
  /** @type {import('./$types').LayoutServerData} */  export let data;
</script>

<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>

<script lang="ts">
  import type { LayoutServerData } from './$types';

  export let data: LayoutServerData;
</script>

<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>

Since all of these variables are unchanged between build time and run time when building on Vercel, we recommend using $env/static/private — which will statically replace the variables, enabling optimisations like dead code elimination — rather than $env/dynamic/private. If you're deploying with edge: true you must use $env/static/private, as $env/dynamic/private and $env/dynamic/public are not currently populated in edge functions on Vercel.

Notespermalink

Vercel functionspermalink

Vercel functions contained in the /api directory at the project's root will not be included in the deployment — these should be implemented as server endpoints in your SvelteKit app.

Node versionpermalink

Projects created before a certain date will default to using Node 14, while SvelteKit requires Node 16 or later. You can change the Node version in your project settings.

Troubleshootingpermalink

Accessing the file systempermalink

You can't access the file system through methods like fs.readFileSync in Serverless/Edge environments. If you need to access files that way, do that during building the app through prerendering. If you have a blog for example and don't want to manage your content through a CMS, then you need to prerender the content (or prerender the endpoint from which you get it) and redeploy your blog everytime you add new content.