☁️ Use Netlify to Host your SvelteKit Site

In this post we look at how to use Netlify to host your SvelteKit site. At first, I wanted to include this information in the post I wrote recently on 10 Tips for getting started with SvelteKit. That post focussed on my experience on getting familiar with SvelteKit and included 10 tips I learned along the journey. At any rate, that post got a bit too long to include Netlify hosting details for SvelteKit. Because I had already done the research, I thought why not have a separate post, just on Netlify and SvelteKit? Anyway the long and the short of this is that you can consider this to be the “Part II” of that earlier post.

⚙️ Create the Netlify Config File

If you have used Netlify with other site generators, you will probably already be familiar with the netlify.toml file. This contains information like the build command, as well as default directories. Often specifying parameters here makes configuration simpler; rather than having to fish around the web interface to find the option you want, all defined in a single place. Typically the parameters defined here will override those previously set in the web console. Anyway enough talk, let's create the file netlify.toml file in the project root directory:

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

[dev]
  command = "svelte-kit dev"

[functions]
  directory = "netlify/functions"

Note the build command just references the build script, as defined in your project package.json file. Just tweak the definition in package.json if you want to customise what happens on build. If you want to learn more about the Netlify configuration file, check out the documentation.

One additional recommendation is to add the functions and publish directories from the build stanza (as defined in lines 3 & 4) to your .gitignore file. As an aside, for the configuration above, netlify/functions is where we place any Netlify functions we want our app to use while functions is where the functions are copied to when the site is built. You will not normally need to edit the files in the generated functions folder.

.DS_Store
node_modules
/.svelte-kit
/package
build
functions

🔧 The SvelteKit Netlify Adapter

SvelteKit has with various adapters which facilitate hosting in different environments. You can install the SvelteKit
Netlify adapter running the command:

/** @type {import('@sveltejs/kit').Config} */
import adapter from '@sveltejs/adapter-netlify';

const config = {
  kit: {
    adapter: adapter(),
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte'
    }
};

export default config

🧱 Building your SvelteKit Site on Netlify

If you completed the config and done a local build to check your app is behaving as expected and checked accessibility, you will undoubtedly want to push the site to Netlify. The easiest way to do this is to push your code to GitHub or GitLab and then link Netlify to the git repo. The process varies depending on where your repo is (i.e. GitHub, GitLab or Bitbucket). However essentially, you just need to click New site from git and choose the provider. You then have to log into the provider (if you are not already logged in). From here you can follow on-screen instructions, letting Netlify to have read access to your repo.

The next step is to define the environment variables in your project. Significantly, it is best practise not to store any sensitive variables in your repo. See the post on getting started with SvelteKit to learn how to use environment variables in SvelteKit. To set the variables in the web console open up the relevant site and click Site settings. From there, click Build & deploy from the left and finally Environment from the list that drops down. You simply fill out the variables your site need to build and save when done.

If you get a build failing, take a look at the output. I found that the Node version on Netlify was not compatible with one of the SvelteKit packages. If this happens for you, you can force Netlify to use a different version. Just go to your project root folder in the command line and type the following command, adjusting for the node version you need (the build log should contain this information):

echo "14" > .nvmrc

This creates a .nvmrc file containing the desired node version. Netlify respects the file. You can learn more about managing build dependencies for Netlify in the docs.

🙌🏽 Use Netlify to Host your SvelteKit Site: Recap

In this post we have looked at:

• file based Netlify configuration,
• how to install the SvelteKit Netlify adapter,
• setting up Netlify to host your SvelteKit site in the web console.

I hope the step were clear enough. Let me know if I could change anything to make it easier for anyone else following along to understand. Also let me know if there is something important on this topic, which I should have included. Drop a comment below, or equally you can @ mention me on Twitter.

🙏🏽Feedback

Please send me feedback! Have you found the post useful? 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 couple of dollars, rupees, 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.