Try creating a SvelteKit project using Deno 2

[AndreasNasman]

Resources

• https://deno.com/blog/web-frameworks-on-deno#sveltekit
  • https://github.com/denoland/deno-sveltekit-template
• https://www.reddit.com/r/sveltejs/comments/1gah4fc/svelte_5_sveltekit_deno_2/
  • https://github.com/cotyhamilton/deno-sveltekit
  • Support for SvelteKit denoland/deno#17248

[AndreasNasman]

I created a project using the command below.

deno run -A npm:sv create my-app

---

I removed .npmrc since Deno doesn't use it.

---

I formatted all files using the command below.

deno fmt --unstable

---

I converted the package.json file in the project to deno.jsonc. Everything worked smoothly, as shown in the file below.

{
  "$schema": "https://deno.land/x/deno/cli/schemas/config-file.v1.json",
  "version": "0.0.1",
  "tasks": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
  },
  "imports": {
    "@std/assert": "jsr:@std/assert@1",
    "@sveltejs/adapter-auto": "npm:@sveltejs/adapter-auto@^3.3.1",
    "@sveltejs/kit": "npm:@sveltejs/kit@^2.13.0",
    "@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^5.0.3",
    "svelte": "npm:svelte@^5.14.5",
    "svelte-check": "npm:svelte-check@^4.1.1",
    "typescript": "npm:typescript@^5.7.2",
    "vite": "npm:vite@^6.0.4"
  },
  "nodeModulesDir": "auto"
}

• I added $schema as found here: https://docs.deno.com/runtime/fundamentals/configuration/#json-schema.
• I was prompted to add "nodeModulesDir": "auto" to my deno.jsonc for Node.js lifecycle scripts to work when installing dependencies with deno add.
• Adding a name property to deno.jsonc caused deno install --allow-scripts to warn that exports also should be defined, so I skipped it.

Adding Node.js/npm dependencies with

deno add -D --allow-scripts npm:@sveltejs/adapter-auto npm:@sveltejs/kit npm:@sveltejs/vite-plugin-svelte npm:svelte npm:svelte-check npm:typescript npm:vite

adds them to package.json by default, but they can be migrated to deno.jsonc by temporarily renaming package.json when installing or defining the dependencies manually in deno.jsonc.

I had to leave this package.json file for things to work correctly:

{
  "type": "module"
}

Leaving out type": "module" causes this error when adding a <style tag to a .svelte file:

Following the link and changing vite.config.ts to vite.config.mts (there is no "type": "module" in deno.jsonc) only changes the error message:

---

I removed .npmrc since I'm not using npm.

---

I rewrote README.md to use Deno commands.

---

I added type-checking for a browser environment according to these instructions: https://docs.deno.com/runtime/reference/ts_config_migration/#targeting-deno-and-the-browser.

I also added type-checking for JavaScript files since the project contains a svelte.config.js file, which cannot be TypeScript.

---

I added tasks for deno check, deno fmt and deno lint.

---

I modified src/routes/+page.svelte and added a basic robots.txt file to achieve a perfect Lighthouse score.

[SrGeneroso]

I wish sveltekit on deno get easier soon, this is madness! Although thanks for sharing. 😘

[AndreasNasman]

Thanks! I uploaded a template with all the changes I made here: https://github.com/AndreasNasman/deno-sveltekit-template. I must still document the process and gothas in the project's README.

And yes, let's hope it gets more straightforward in the future 😅