How to Deploy Sveltekit on Heroku

Sveltekit is a framework for building Svelte web apps. It has an unopinionated approach for production deployment through adapters for different deployment targets/platforms like Vercel, Netlify, Cloudflare’s Workers, a simple node app powered by a Polka server, or a lean static website.

I found it pretty intuitive to deploy to Heroku by using the Node adapter. To deploy a Sveltekit app on Heroku, you need to do the following:

First, install the adapter as a dev dependency:

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

Next, to help Heroku in running the app after it builds it, add a start command to the package.json file:

  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview",
+   "start": "node build/index.js",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --write --plugin-search-dir=. ."
  },

Finally, in the svelte.config.js file, use the node adapter and configure the port to read from Heroku’s environment port: (delete the | from the process|.env.port)

+ import node from "@sveltejs/adapter-node";
  import preprocess from "svelte-preprocess";

  /** @type {import('@sveltejs/kit').Config} */
  const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
      // hydrate the <div id="svelte"> element in src/app.html
      target: "#svelte",
+     adapter: node({ env: { port: process|.env.PORT } }),
    },
  };

  export default config;

That’s all!

Take it easy,

~Faisal