Skip to main content

Vercel

Edit this page on GitHub

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.

Usage

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

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 Variables

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:

+layout.server.js
ts
import { VERCEL_COMMIT_REF } from '$env/static/private';
 
/** @type {import('./$types').LayoutServerLoad} */
export function load() {
return {
deploymentGitBranch: VERCEL_COMMIT_REF
};
}
+layout.server.ts
ts
import { VERCEL_COMMIT_REF } from '$env/static/private';
import type { LayoutServerLoad } from './$types';
 
export const load = (() => {
return {
deploymentGitBranch: VERCEL_COMMIT_REF
};
}) satisfies LayoutServerLoad;
+layout.svelte
<script>
  /** @type {import('./$types').LayoutServerData} */  export let data;
</script>

<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>
+layout.svelte
<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.

Notes

Vercel functions

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 version

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:

Vercel project settings

Troubleshooting

Accessing the file system

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.