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

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:

[build]
  command = "npm run build"
  publish = "build/"
  functions = "functions/"

---

3. Use the Netlify adapter

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

npm i -D @sveltejs/adapter-netlify@next

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 https://github.com/sveltejs/svelte-preprocess
  // 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 || {}),
      },
    },
  },
}

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 Dev.to, Twitter and Github for more web dev and startup related content 🤓

Comments

[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?

crinkle.dev/writing/journey-from-g...

[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: github.com/danawoodman/kit/blob/pa...

[development-vargamarcel]

Dynamic routes not working when trying to access a dynamic route directly. (site.com/blog/50).Or does it? I found no solution.

[Dana Woodman]

They should. What does your code look like?

[development-vargamarcel]

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

tesssssst.netlify.app/test
-- 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