Deploy Svelte Kit App To Vercel Using Vercel Adapter

 In this blog, you will learn How to deploy your Svelte Kit Project to Vercel using the vercel adapter.

1. Changing Adapter

First, you need to change the adapter from your package.json and install the dependencies.

	{
	"name": "lyrics-app",
	"version": "0.0.1",
	"scripts": {
	"dev": "svelte-kit dev",
	"build": "svelte-kit build",
	"start": "svelte-kit start"
	},
	"devDependencies": {
	"@sveltejs/adapter-vercel": "next",
	"@sveltejs/kit": "next",
	"svelte": "^3.29.0",
	"vite": "^2.1.0"
	},
	"type": "module"
	}

view raw package.json hosted with ❤ by GitHub

If you notice we have changed the devDependencies, from adapter-node to adapter-vercel and now you have to install the new dependencies. 

After that, we will now change the adapter from svelte.config.js

	const node = require("@sveltejs/adapter-vercel");
	const pkg = require("./package.json");
	/** @type {import('@sveltejs/kit').Config} */
	module.exports = {
	kit: {
	// By default, `npm run build` will create a standard Node app.
	// You can create optimized builds for different platforms by
	// specifying a different adapter
	adapter: node(),
	// hydrate the <div id="svelte"> element in src/app.html
	target: "#svelte",
	vite: {
	ssr: {
	noExternal: Object.keys(pkg.dependencies || {}),
	},
	},
	},
	};

view raw svelte.config.js hosted with ❤ by GitHub

And now you are ready to deploy it to vercel.

2. Deploying To Vercel

First, go to vercel.com and create a new project and import the Svelte Kit Project from your GitHub.

and when it asks for the build configuration change the output folder to ".vercel_build_output"

and you can now deploy with Serverless Functions and Routing.

If you want to see the tutorial on How to deploy Svelte Kit to Vercel here's is the video on Youtube