Dana Woodman
Posted on April 11, 2021
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:
- Create a Github repo
- Push your code to it
- Add the new repo to Netlify (e.g. the "New site from Git" button)
- Accept the default options
- 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 🤓
Posted on April 11, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.