DEV Community

Nostro
Nostro

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

Or if you're feeling lucky (I do) and are already in the my-awesome-app directory.

npm init svelte@next && npm i @sveltejs/adapter-node@next
Enter fullscreen mode Exit fullscreen mode

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(),
    },
};
Enter fullscreen mode Exit fullscreen mode

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",
    },
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)