DEV Community

loading...

Deploying a SvelteKit app to Netlify

Dana Woodman
Software hacker working in the industry since 2003. Currently loves: #Typescript and #Svelte. Founder of Chimera, the first makerspace in northern California (https://www.chimeraarts.org/).
・2 min read

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:

[build]
  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 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 || {}),
      },
    },
  },
}
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 Dev.to, Twitter and Github for more web dev and startup related content 🤓

Discussion (5)

Collapse
crinklesio 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?

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

Collapse
danawoodman profile image
Dana Woodman Author

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...

Collapse
developmentvargamarcel profile image
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.

Collapse
danawoodman profile image
Dana Woodman Author

They should. What does your code look like?

Collapse
developmentvargamarcel profile image
development-vargamarcel • Edited

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