DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

hideckies
hideckies

Posted on • Updated on • Originally published at blog.hdks.org

Deploy SvelteKit App with Vercel

I've been fond of Svelte since last year, and just the other day I made a new web app with SvelteKit.

It is deployed with Vercel, but I struggled a little when deploying it so I write how to deploy with Vercel.

1. Create a SvelteKit app

npm init svelte@next my-app
cd my-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

2. Add an adapter in a configuration file

At first, install the depencency.

npm i -D @sveltejs/adapter-vercel@next
Enter fullscreen mode Exit fullscreen mode

Don't forget to add a suffix (@next) to the package name at this point.

And then, add a value into adapter in a svelte.config.js.

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

const config = {
    kit: {
        // ...
        adapter: vercel(),
        // ...
    }
}
Enter fullscreen mode Exit fullscreen mode

This will output .vercel_build_output/ directory for hosting by Vercel.

3. Push it on GitHub

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/<YOUR-USER-NAME>/<YOUR-REPOSITORY-NAME>
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Please see the guides for details.

4. Go to Vercel. It's done.

Ok, Vercel should now build correctly and display your web app.

Go to Vercel and import your git repository.

Top comments (4)

Collapse
 
goncalodiasmm profile image
Gonçalo Dias

Thanks a lot! Was really struggling with deployment, solved by adding the adapter!

Collapse
 
krry profile image
Kerry Snyder

Friggin perfect! Thank you thank you for making this so easy and sharing it.

Collapse
 
mwdd profile image
Mark Wilson

A little note of thanks for this, very helpful indeed!

Collapse
 
happylittleone profile image
littleone

will it translate sveltekit endpoints files to cloud functions? that will be awesome

18 Useful Github Repositories Every Developer Should Bookmark

>> Check out this classic DEV post <<