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 🤓
Top comments (5)
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...
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...
Dynamic routes not working when trying to access a dynamic route directly. (site.com/blog/50).Or does it? I found no solution.
They should. What does your code look like?
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