Site.js starter template for vite + svelte

Over the past few weeks, I’ve been experimenting with some initial clients for the Small Web clients for Site.js and Place using Snowpack and Svelte.

While I finally got everything working after some trouble (and a few discussions/pull requests, etc.), some recent regressions in Snowpack broke what I had again. So I thought that I’d give Vite a shot, both out of curiosity and to see if, possibly, things could be simpler.

Fast forward a couple of days and I’m ahead of where I was previously. This is not to poop on the Snowpack folks, they’ve been rather responsive and are a small team trying first and foremost to build a CDN (which I do have issues with, due to the lack of subresource integrity, but that’s a different conversation)¹.

site-vite-svelte

One of the things I wanted to do was to create a starter template for kickstarting projects that use this combination of client-side tech. So today I released the site-vite-svelte template for Site.js.

Installation

To install it, just do:

npm init using small-tech/site-vite-svelte my-project

That will use npm init using to download the contents of the site-vite-svelte repository to your my-project folder.

Then, just do:

cd my-project
npm install

And you’re ready to go!

Usage

You can choose to either run just the Vite + Svelte client using npm run vite or you can run Site.js + the Vite + Svelte client using npm run dev.

For full documentation, please see the readme.

I know this isn’t as smoothly integrated as Hugo is into Site.js but that’s on purpose. When it comes to Place, having the client decoupled from the Small Web protocol server is a feature, not a bug. As for Site.js, I want to see how I get on with these particular modules in a decoupled manner before deciding whether it’s worth integrating them more closely².

So feel free to have a play and let me know how you get on if you do and I hope you find it useful.