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.

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