Deploying to Heroku with SvelteKit

If you're trying to deploy with the built-in adapter-auto, you will probably encounter an E10 error and/or a R10 error with svelte-kit not found. This post details how to correct them.

The other option is to use the adapter-node which is what we'll do here; you can read about adapters in the SvelteKit docs

You may also be interested in
SvelteKit + .env
SvelteKit + TailwindCSS

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

// Change
- 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

By default this create the app in the US region; to do it in the EU run heroku create my-awesome-app --region eu

Once the build finishes, your app will be deployed at my-awesome-app.herokuapp.com or random-poetic-name.herokuapp.com

Comments

[John Deighan]

Problems I ran into (4/11/2023):

1. You have to execute 'git init' before issuing any git commands
2. Your branch will be called 'master', not 'main'. To switch your main branch to be named 'main', execute the command 'git branch -M main'
3. The command 'git push heroku main' fails even after the above command because git does not understand the remote named 'heroku' - I'm looking into how to set that up now.