Deploy Sveltekit Project on Vercel

Svelte was recently voted the most loved web framework with the most satisfied developers in a pair of industry surveys. I am not gonna lie. I love it too. In fact my entire blog/portfolio is built with svelte using svelte kit framework and deployed on Vercel.

Let's see how,

Creating the SvelteKit app

We can easily create a svelte kit app, using the svelte@next command. It will asks us a series of question on the project setup. you can choose the things you want for you project stack.

npm init svelte@next royal-gamma
√ Which Svelte app template? » Skeleton project
√ Use TypeScript? ... No / Yes
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
cd royal-gamma
pnpm i
npm run dev -- --open

Installing SvelteKit vercel adapter.

Next we need to install a sveltekit adapter for vercel.

What is an adapter?

Adapters are small plugins that take the built app as input and generate output for deployment.

By default, projects are configured to use @sveltejs/adapter-auto, which detects your production environment and selects the appropriate adapter where possible.

We can easily create a adapter on our own based on needs. But in our case we don't need to because SvelteKit team provides an adapter for vercel as a npm library.

run

npm i @sveltejs/adapter-vercel

This will add the adapter plugin to our devDependencies

Configure vercel-adapter

Configuring these adapter is very easy. We just have to go to our svelte.config.js file present in our root folder of our project. To configure vercel-adapter we just need to import and add it to the adapter config under kit.

import vercel from '@sveltejs/adapter-vercel';

export default {
	kit: {
		...
		adapter: vercel()
	}
};

So from now on whenever we run a preview build or build, it will generate the output to .vercel_build_output folder. So it is better to add the folder to our .gitignore file to avoid committing it to the repository.

you can now commit all the changes to remote git repo and head over to vercel.

After logging in and connected to github you will going to see your dashboard.

Click on New Project , you will see a list of your github repositories.

Select the repository you want to deploy. You will be prompted to the page where you can name you project for vercel and add any environment variables such as API Key, client secret etc.

Click deploy and wait for it to finish the deployment.

There you have it. you own CI/CD pipeline. Now whenever you commit any changes to you git repo, vercel will automatically detects and deploy it.

If its the main branch it will built and deployed to production. If you have branches other than such as dev/feature, it will do a preview deployment for you to test and from those you can directly promote it to production.