Deno + Svelte: Compiled frontend without package headaches

2021 UPDATE: See Part 2 of this series.

How to build a Svelte frontend with Deno, without any node_modules, package.json, or webpack/rollup configuration.

Svelte.dev + Deno.land = Streamlining Front ends too

Svelte is a great way to build frontend for webapps. But like many frameworks that use nodejs packages, in order to get all the Svelte magic, you typically have to deal with the node_modules, package.json, package-lock, and rollup/webpack configuration.

Eww. We may be used to this, but is there a simpler way?

Perhaps there is:

Rich Harris tweets about being #1 with Deno. Hey, maybe we should interop with Deno a bit better? https://twitter.com/rich_harris/status/1273691015929630720

Meet Deno

The short backstory on Deno (as in, “NoDe” but inverted) is that it’s Ryan Dahl’s solution to his regrets with NodeJs (hence the tongue in cheek name).

But more interestingly, Deno streamlines the package management. As in, no more node_modules or bundler config nightmares!

Also, if you are starting to use Deno with your backend, this approach gives you one JS runtime to worry about for your full stack developer experience.

Hello World: “Sveno Demo”

Let’s do a Svelte Deno Demo, shall we? Here’s how:

1. Install Deno*
2. Install denopack*
3. Clone the DenoFn/Svelte repo. We’ll use the svelte compiler and deno scripts to build the output file.

*For Windows 10, use Windows Subsystem for Linux (WSL) to run the deno commands, as this approach herein didn’t work in the regular Windows terminal.

What’s going on here? Based on Rich Harris’s tweet above, Svelte and Deno have teamed up to feed the compiled Svelte output into Deno, so let’s use the above setup to execute the example here:

https://github.com/denofn/svelte/tree/master/example

In the cloned denofn/svelte repo, navigate to the example/ folder above and follow the instructions on the readme. Namely, run this command:

deno run --allow-read --allow-write --allow-run  
--config=../tsconfig.json --importmap=../import_map.json --unstable ./build.ts Home.svelte

This will take Home.svelte and compile it into javascript using denopack (which is deno bundler + rollup).

That’s it! The website is built with all Svelte’s reactivity and none of the package/bundle headache. If you dig into the repo, there are a few more steps going on here to take the svelte file and output the build.js:

Once we have the build.js, all we need to do is serve it up inside the index.html, for example with a simple python server:

python3 -m http.server

Then browse to http://localhost:8000/ (or whatever port yours shows in the terminal) and you should see the alternating Svelte/Deno text on the browser.

The served website is the Home.svelte compiled with help from Deno

Pretty cool, eh?

I think these two will get along great in the future.

Future

What’s next for this project?

I’m sure in the future we will see the DenoFn repo packaged up into a some sort of library for ease of use, but for now this works nicely!