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
    })
  }
};

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 that 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.