Use Netlify to Host your SvelteKit Site # Use Netlify to Host your SvelteKit Site #

☁️ 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:

    
1 [build]
2   command = "npm run build"
3   functions = "functions"
4   publish = "build"
5   
6 [dev]
7   command = "svelte-kit dev"
8  
9 [functions]
10   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 customize 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.

    
1 .DS_Store
2 node_modules
3 /.svelte-kit
4 /package
5 build
6 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:

    
npm i -D @sveltejs/adapter-netlify@next

  

The command will create a netlify/functions folder in your project. If you already have a netlify/functions directory in your project, rename it or backup the files, as they might get overwritten when the installation runs.

With that done, we need to let SvelteKit know we want to use the adapter. Edit the svelte.config.js file in your project’s root directory:

    
1 /** @type {import('@sveltejs/kit').Config} */
2 import adapter from '@sveltejs/adapter-netlify';
3  
4 const config = {
5   kit: {
6     adapter: adapter(),
7 	}
8 };
9  
10 export default config

  

There are some teething problems with the adapter, and you might have issues creating Server Side Generated pages. A workaround is to make those pages static (assuming this is possible for your page). Read about how to do this in the post on the SvelteKit Blog Starter.

🧱 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 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, have 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 "16" > .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; and
• 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! What do you think of the new poll and comments features? 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.