Use Netlify to Host your SvelteKit Site
Tags: svelte, webdev, javascript
Published: 2021-07-26 07:58:14

---
title: "Use Netlify to Host your SvelteKit Site"
published: "true"
description: "SvelteKit is a new, fast site generator.  Netlify is a leading site hosting service.  We look at how to use Netlify to host your SvelteKit site."
tags: "svelte, webdev, javascript"
canonical_url: "https://rodneylab.com/use-netlify-to-host-your-sveltekit-site/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywp1ok16smw60sgt6udx.png"
---

## ☁️ 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 <a aria-label="Jump to the post on getting started with Svelte Kit" href="https://rodneylab.com/getting-started-with-sveltekit/">the post I wrote recently on 10 Tips for getting started with SvelteKit</a>. 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 &ldquo;Part II&rdquo; 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:

```toml
[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 <a aria-label="Learn more about Netlify file based configuration" href="https://docs.netlify.com/configure-builds/file-based-configuration/">learn more about the Netlify configuration file, check out the documentation</a>.

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.

```plaintext
.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:

```javascript
/** @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 <a aria-label="Learn how to use Environment Variables with Svelte Kit" href="https://rodneylab.com/getting-started-with-sveltekit/#sveltekitEnvironmentVariables">learn how to use environment variables in SvelteKit</a>. 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):

```shell
echo "14" > .nvmrc
```

This creates a `.nvmrc` file containing the desired node version.  Netlify respects the file.   You can learn more about <a aria-label="Learn more about Netlify build dependencies" href="https://docs.netlify.com/configure-builds/manage-dependencies/">managing build dependencies for Netlify in the docs</a>.

## 🙌🏽 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 <a aria-label="Open Rodney Lab's twitter profile" href="https://twitter.com/intent/user?screen_name=askRodney">@ mention me on Twitter</a>.

## 🙏🏽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 <a aria-label="Support Rodney Lab via Buy me a Coffee" href ="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

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 <a aria-label="Get in touch via Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a> as well as other topics. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.