Deploying SvelteKit App to Heroku, Netlify, Vercel

What is SvelteKit?

Let’s start off with the fundamentals. What is Svelte? Svelte is a front end compiler which excels at producing highly optimized, vanilla JavaScript. Unlike other JavaScript frameworks like React and Vue, Svelte has a compile step which turns Svelte code into vanilla JavaScript.

SvelteKit on the other hand, is a web framework which is powered by Svelte. It provides tooling around the front end rendering of Svelte such as routing, layouts, and content fetching to create entire web pages or apps.

SvelteKit can handle a broad range of applications from simple informational websites to full blown web apps. In this tutorial, we going to focus on the simpler side of the spectrum by creating an informational website with a blog and treat SvelteKit as a static site generator.

Installing SvelteKit SvelteKit is installed using npm. If you don’t have npm installed, have a look at their installation guide.

With npm installed, we can set up our first SvelteKit application by running a single command in the terminal:

npm init svelte my-first-svelte-app

This will prompt you to select an app template. Let’s use “Skeleton project”.

Svelte has set up the skeleton code for our first Svelte app. Let’s take a look. First cd into the directory:

cd my-first-svelte-app

We’ll install the npm packages the skeleton code requires (Svelte + SvelteKit):

npm install
npm run dev

If you open a browser and go to http://localhost:3000/, you’ll see a basic page welcoming you to SvelteKit. Congrats! SvelteKit is now installed.

Running static

By default, SvelteKit uses the auto adapter for rendering pages. This adapter will prerender where it can and fall back to edge functions for dynamic content. To keep this tutorial simple, we’ll switch to the static adapter which renders static HTML for all pages.

First we need to install the static adapter:

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

And then configure SvelteKit to use it. Open svelte.config.js and replace:

import adapter from '@sveltejs/adapter-auto';
# with:
import adapter from '@sveltejs/adapter-static';

Directory overview

You may be wondering what all those files are in the Skeleton project. Here’s a quick overview of what they do. We’ll be using most of them throughout this tutorial, so don’t worry if it doesn’t make sense right now:

• .svelte-kit — this is the default location SvelteKit adds its generated files to during a build.
• src — we’ll mostly be dealing with this directory, the source files for your SvelteKit site.
• src/app.html — the main template for HTML responses. All other HTML layouts extend from this one.
• src/routes — SvelteKit creates pages on the site based on the files in this directory.
• static — Assets that don’t require SvelteKit to build them. Images, fonts, PDFs etc.
• package.json — Lists your npm dependencies and commands for running the site.
• svelte.config.js — the configuration settings for Svelte.

Deploy Sveltekit app to Heroku

Create a svelte app

npm init svelte@next my-awesome-app
cd my-awesome-app
npm i @sveltejs/adapter-node@next
# Modify the config file to use the right adapter

svelte.config.js

- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-node';
// Make sure this is present
const config = {
    kit: {
        adapter: adapter(),
    },
};

Add a start script and specify the node version required SvelteKit template does not have a start script, which will be looked for by Heroku.

Also, at time of writing Heroku defaults to node 14.1 if there is no indication otherwise, and the build may fail if your version is different.

package.json

    "engines": {    
        "node": "16.x",
        "npm": "8.x"
    },
    "scripts": {
        "start": "node build/index.js",
    }

Depending on your case, the npm version may not be strictly necessary for the build to succeed.

Create the Heroku app

You should have the Heroku CLI installed and be logged in; otherwise install it and run heroku login

This creates the app at my-awesome-app.herokuapp.com - if the name isn't available the command will fail. If you omit the name you will get assigned a random poetic name by Heroku.

heroku create my-awesome-app
git add . && git commit -m "My commit message"
git push heroku main

Want to deploy your SvelteKit app to Netlify

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!

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 🛰

Want to deploy your SvelteKit app to Vercel

1. Create a SvelteKit app

npm init svelte@next my-app
cd my-app
npm install
npm run dev

2. Add an adapter in a configuration file

At first, install the depencency.

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

Don't forget to add a suffix (@next) to the package name at this point.

And then, add a value into adapter in a svelte.config.js.

import vercel from '@sveltejs/adapter-vercel';

const config = {
    kit: {
        // ...
        adapter: vercel(),
        // ...
    }
}

This will output .vercel_build_output/ directory for hosting by Vercel. 3. Push it on GitHub

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/<YOUR-USER-NAME>/<YOUR-REPOSITORY-NAME>
git push -u origin main

Please see the guides for details.

4. Go to Vercel. It's done.

Ok, Vercel should now build correctly and display your web app.