Running Svelte 5 projects using Deno 2 (in Q4 2024)

Releases in Q4 of 2024 have hit my web-dev sweet spot & it feels like a great time for a big overhaul.

Svelte 5 finally brings Svelte to the level of maturity I have always dreamed of. Creating Single Page Applications with Svelte 4 has already been a breeze, but Svelte 5 makes it as simple as writing desired structures in almost plain html. And it all compiles into any type of application / hosting software you desire. LOVE IT!

Deno 2 came out bearing BIG GUNS, completely phasing out need for Node's existence. Now, we not only have fast & safe production environment written in RUST (which I adore), but also support for all packages ever created & stored in npm. Crazy good handling of local system APIs is a big plus, especially with recent polishing of SQLite (which I also aim to include in future projects, alongside PostgreSQL)

Installing Deno

I love RUST & it's Cargo package management system. It is fast & straight-to-point. It guarantees I have the exact same experience as developers of deno, so I'll be installing Deno using Cargo.

If you haven't been writing any RUST on your machine, you are going to install the whole language supporting environment. This might not be a simple task, but I haven't made a write up about the process yet.

cargo install deno --locked

This is it. Latest version of deno is going to be built from source & installed in .cargo directory, for the current user. Neat!

Updating Deno

If you ever need to update Deno, a simple deno upgrade is an OK solution. But it is going to download pre-built binaries & just copy them in place of current binary.

For now, preferred way to handle updating Cargo binaries, is to do it manually, through execution of cargo install [package_name]. This seems to be intentional, to force user to be more mindful about what he is installing on his machine.

If you ever want to break this rule & update all Cargo binaries at once, here is a short snippet, which can handle this task for you

 cargo install --list
     | parse "{package} v{version}:"
     | get package
     | each {|p| cargo install $p --locked}

$cargoList = cargo install --list

$packages = $cargoList -match "(?<package>.+) v(?<version>.+):" | ForEach-Object {
    $matches['package']
}

foreach ($package in $packages) {
    cargo install $package --locked
}

Creating new Svelte 5 project

Svelte 5 brings a new npm script for handling all the tasks related with management of the project. It is an odd idea, because it seems to not bring any innovation & be way more cumbersome than the old npm run build & npm run dev commands. But, oh well.

IMPORTANT!
It is no longer recommended to use any custom adapters for running svelte applications with Deno runtime. Even though, these custom adapters might bring additional performance for the deployed application, they require custom code to support any plugins & extensions we are going to use. Both Deno & Svelte developers, recommend using the Node adapter & using Deno just as a safe & fast runtime. Let's see how to get all this to work.

To create a Svelte 5 project with deno, we are going to run their new sv tool through deno

deno run -A npm:sv create

If you are just starting with svelte, I recommend following options:

• Directory name: svelte-project(whatever you like for the project)
• Template: SvelteKit demo (good base)
• Type checking: TypeScript
• Tools (necessary): Prettier, EsLint, sveltekit-adapter
  • Tools (fun): Tailwindcss, drizzle, lucia
  • Tools (for blog project): mdsvex
• Sveltekit-adapter: Node (this is important!)
  • Drizzle db: SQLite & better-sqlite3 (Please look into drizzle section, for information about compatibility)
  • Lucia demo: Yes
• Package manager: DENO (If you run sv create through deno, it is going to be highlighted automatically)

Initiating & running our new project

After the project has been created, I am going to enter it

cd svelte-project

the project has already been initiated & all dependencies have been installed. But, to make sure everything is in order, I am going to run

deno install

Now, we can look around the project, check the configuration, update the Readme & start tracking the project with git

git init && git add -A && git commit -m "Initial commit" 

To run the project, we are going to use deno task. It fully replaces npm run

deno task dev --open

Building the project is also as simple, as it was with npm

deno task build

Configuring Deno

There is no need to do additional configuration anymore. Everything should work out of the box with deno runtime.

If you have installed any additional dependencies, just follow instructions for their use. The basic package of Prettier, EsLint & sveltekit-adapter doesn't require any additional configuration.

Drizzle

Drizzle dependency, with SQLite & libSQL is going to require configuring an URL for a database you are running. better-sqlite3 is recommended, so we can just use local files as database.

Unfortunately, better-sqlite3 is not supported by deno for now. So you might need to use a different database adapter, like libSQL. libSQL requires setting up an additional process for handling database connections, which is out of scope of this guide. This guide might be of help.

Running Deno project in production

deno run --allow-env --allow-read --allow-net build/mod.ts

Deprecated method

Svelte 5 brings a new npm script for handling all the tasks related with management of the project. It is an odd idea, because it seems to not bring any innovation & be way more cumbersome than the old npm run build & npm run dev commands. But, oh well.

To create a Svelte 5 project with deno, we are going to run their new sv tool through deno

deno run -A npm:sv create

I am already well versed in svelte world, so I am going to pick:

• Template: SvelteKit minimal
• Type checking: TypeScript
• Tools: Prettier, EsLint, Paraglide
• Package Manager: NONE (This is super important if we want to work with Deno)

Initiating & running our new project

After the project has been created, I am going to enter it

cd deno-project

& initiate the project with Deno

deno install

With the project initiated, I am going to check the configuration, update the Readme & start tracking the project with git

git init && git add -A && git commit -m "Initial commit" 

To run the project, we are going to use deno task, which replaces npm run

deno task dev -- --open

Building the project is also as simple, as it was with npm

deno task build

Configuring Deno

To build & run the final application with Deno, we are going to need to use the dedicated adapter

To install it, a simple invocation of:

deno install --dev npm:sveltekit-adapter-deno

& altering `svetle.config.js` configuration is enough:

// svelte.config.js
import adapter from "sveltekit-adapter-deno";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
  },
};

export default config;

Running Deno project in production

After we've built our project with our sveltekit adapter enabled, we can run the application in production using

deno run --allow-env --allow-read --allow-net build/mod.ts