DEV Community

Dana Woodman
Dana Woodman

Posted on

Deploying a SvelteKit app to Netlify

Want to deploy your SvelteKit app to Netlify? Well, you're in luck because it's actually quite easy!

Let's jump right in 👇

1. Create your SvelteKit project

First, obviously you'll need a SvelteKit project. If you don't have one yet, setup is super simple:

npm init svelte@next my-app
cd my-app
npm i
Enter fullscreen mode Exit fullscreen mode

Then you can run npm run dev to play 👯‍♀️ with your new app.

2. Create netlify.toml

You'll need to let Netlify know where the SvelteKit build will be located (/build) and where the serverless functions will live (/functions).

In the root of your project, create a netlify.toml file:

  command = "npm run build"
  publish = "build/"
  functions = "functions/"
Enter fullscreen mode Exit fullscreen mode

3. Use the Netlify adapter

Now you'll want to install the @sveltejs/adapter-netlify adapter:

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

In your svelte.config.cjs file, change adapter-node to adapter-netlify, like so (diff):

const sveltePreprocess = require('svelte-preprocess')
-const node = require('@sveltejs/adapter-node')
+const netlify = require('@sveltejs/adapter-netlify')
const pkg = require('./package.json')

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  // Consult
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
  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(),
+    adapter: netlify(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',

    vite: {
      ssr: {
        noExternal: Object.keys(pkg.dependencies || {}),
Enter fullscreen mode Exit fullscreen mode

Now you have everything you need to deploy your Netlify site!

4. Deploy on Netlify

Now all you need to do is:

  1. Create a Github repo
  2. Push your code to it
  3. Add the new repo to Netlify (e.g. the "New site from Git" button)
    • Accept the default options
  4. Wait for it to build and after about a minute, you should have a SvelteKit app on Netlify! 🎉

Now you can add routes to your SvelteKit app and they will be served by Netlify's global serverless infrastructure 🛰

That's it!

Deploying SvelteKit to Netlify (or Vercel) is quite simple and gives you a global CDN and serverless function out the gate!

Hope this was helpful! 🍻

If you want to check out the source code, see the Github repo here.

Follow me on, Twitter and Github for more web dev and startup related content 🤓

Top comments (5)

vyckes profile image
Kevin Pennekamp

As I describe in the below link, I had troubles getting the Netlify functions to work due to dependencies. Did you encounter similar issues?

danawoodman profile image
Dana Woodman

Not entirely sure, but could be related to the issue with Vite and some CommonJS packages. I just added some notes to the SvelteKit docs that might help:

developmentvargamarcel profile image

Dynamic routes not working when trying to access a dynamic route directly. ( does it? I found no solution.

danawoodman profile image
Dana Woodman

They should. What does your code look like?

developmentvargamarcel profile image
development-vargamarcel • Edited

hi and thx for the reply. This is a repo i made to show you .you could try to deploy it to netlify,go to test in the header,then click on the only link will work;now refresh and it won't anymore.
-- deploy was made using cli netlify deploy --prod

About the repo:
1.Generated using the official guide (demo app)
2.In routes,added test route
3.Added adapter netlify
3.added netlify.toml
that is all