Why would you want to be using Netlify Functions with SvelteKit instead of the inbuilt SvelteKit functionality? Like NextJS from the React world SvelteKit supports server side rendering as well as server side routes from which you can run your server side code. There are a couple of reasons that come to mind for using Netlify functions with SvelteKit though. Firstly, if you are migrating your site from another platform and have existing Netlify functions, you can speed up the migration by transplanting over the existing Netlify functions.
We'll look at these three steps in turn which will get you using Netlify Functions with SvelteKit in no time:
- Netlify adapter,
- create functions.
netlify.toml file in the root directory of your project
and add the following content:
Probably the most important part here is specifying the directory where we will put the Netlify
Svelte has build adapters which help customise your site build for your hosting platform. This is exactly what the Netlify adapter does . Part of its work is to convert any server endpoints to Netlify functions. This means your build app will have a render function (generated by the adapter) as well as any Netlify functions you define yourself.
The SvelteKit adapters are still evolving. As such, current best practice is to choose the
next version, which you can install with pnpm, npm or yarn:
On top, you will need to let SvelteKit know that you want it to use this adapter:
Import the adapter to your
svelte.config.js file (line
2) and then set it as SvelteKit's adapter (line
Next you can create the
netlify/functions directory in your project
In the Netlify tradition, configuration and boilerplate are kept to a minimum. To get these
functions running, you should just need to commit these changes to your git repository, and
deploy as normal. To test the
client-ip function, you need to point
your browser to the
/.netlify/functions/client-ip route (see the
working example here: sveltekit-netlify-functions.rodneylab.com/.netlify/functions/client-ip
). Similarly for the
good-morning function, point your browser to
/.netlify/functions/good-morning. Again, there is a live test
site at sveltekit-netlify-functions.rodneylab.com/.netlify/functions/good-morning
I have also created a full working repo on the Rodney Lab GitHub page .
In this post we saw:
- why you might want to use Netlify functions with SvelteKit,
- how to configure a Netlify SvelteKit build,
- how to add Netlify functions to your SvelteKit app.
If you want to create a static Netlify site for your next project, take a look at the post on SvelteKit static site HTTP headers. This post came from a question left in a comment. So if this post spurs further questions, please do drop a comment below and I might be able to create more content in response.
We focussed on Netlify functions in this post, though Netlify also offers middleware in the form of Netlify Edge Functions. We try these out in the SvelteKit eCommerce site to keep our Directus Content Management System (CMS) URL private . We also use Edge Functions in the getting started with WordPress tutorial to proxy images. This makes it look like the images are served by our site to the browser. Instead to serve them from the WordPress site and save ourselves having to copy every new image we add to the SvelteKit frontend site.
Have you found the post useful? Which other hosting service would you like to know how to host a SvelteKit site on? Would you like to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.