Home

Steps used to create this template project

1. Initialize a SvelteKit project with the command and options below.

   deno run -A npm:sv create --template minimal --types ts --no-add-ons --no-install deno-sveltekit-template
   cd deno-sveltekit-template/

2. Remove extraneous files when using Deno with the command below.

   rm -f .npmrc

3. Migrate package.json to deno.jsonc.

   • Run the command below to add the dependencies in package.json to deno.jsonc.

     mv package.json package.json.temp && 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 && mv deno.json deno.jsonc && mv package.json.temp package.json

   • Adjust package versions to match those defined in package.json.

     • NB: Upgrading to the latest versions of packages causes deno run dev to fail the second time when loading the page in a browser. I am unsure which package is the culprit.

   • Add "nodeModulesDir": "auto" to deno.jsonc as instructed when running the command above and then run deno install --allow-scripts to generate node_modules.

   • Add "$schema": "https://deno.land/x/deno/cli/schemas/config-file.v1.json" to deno.jsonc.

     • Source: https://docs.deno.com/runtime/fundamentals/configuration/#json-schema.
     • Follow the order of the properties in deno.jsonc with the schema.

   • Migrate version directly.

   • Migrate scripts as tasks.

   • Remove devDependencies from package.json since deno.jsonc lists them as imports.

   • Remove name from package.json. Adding a name property to deno.jsonc causes deno install --allow-scripts to warn that exports also should be defined.

     • I might add name to deno.jsonc when I know what exactly it does and how it should be defined.

   • Leave "type": "module" in package.json. It prevents errors like the one below when adding a <style> tag to .svelte files.

     Error

     

4. Add type checking for a browser environment.

   • Follow the instructions here: https://docs.deno.com/runtime/reference/ts_config_migration/#targeting-deno-and-the-browser.

5. Add "checkJs": true to deno.jsonc to type check svelte.config.js.

   • This file cannot be a .ts file at the time of writing. See https://github.com/sveltejs/kit/issues/5867 for more information.

6. Add Deno check, format, and lint tasks to deno.jsonc.

   • "check": "deno check . && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   • "format": "deno fmt --unstable-component"
   • "lint": "deno lint"
   • "exclude": [".svelte-kit/"]
     • This is needed to prevent deno check . from type checking the .svelte-kit/ directory.

7. Remove redundant check:watch task.

   • You can run this command with deno run check --watch.

8. Refactor README.md to Deno.

   • All references to "npm" and "npx" have Deno counterparts.

9. Format files with deno run format.

10. Sort properties alphabetically.

11. Adjust files to achieve a perfect Lighthouse score.

    • Add a <svelte:head> tag.
    • Add a basic robots.txt file containing User-agent: * and Allow: /.

Gotchas

• compilerOptions differs in tsconfig.json and deno.jsonc.
• deno fmt has "recommended" on by default.

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
  • https://github.com/denoland/deno/issues/17248