SiteKit

This template will help get you started developing with SvelteKit in Site.js.

It’s based on the create-svelte template.

Note: if you want to use vanilla Vite + Svelte instead of SvelteKit, check out the site-vite-svelte template instead. This template also has the advantage, currently, of running the dev server on https://localhost:444 instead of http://localhost:3000. We can’t do that with SvelteKit’s dev server (yet?) as it doesn’t currently run correctly with HMR over https and there isn’t a way to set the server property directly on its Vite instance.

Why?

By using Site.js you can extend your static SvelteKit clients using dynamic DotJS routes, WebSockets, a JavaScript database, etc., and easily deploy to your own server using the built-in sync feature.

Install

1. Either:

   Download the template:

   npm init using small-tech/sitekit my-project

   This will download this template using create-using into a directory called my-project.

   Or:

   Use the template on GitHub:

   Click the green “Use this template” button on the GitHub page to create your own repository using this template.

   Or:

   Do it old-skool:

   Just fork this repository and clone it as you normally do using git.

2. Install dependencies.

   cd my-project
   npm i

Use

Dev (Site.js + SvelteKit)

npm run dev

This will run the dev.sh script that:

1. Will build the latest SvelteKit source using npx svelte-kit build
2. Start the SvelteKit dev server in the background
3. Start Site.js.

Once the servers are running, you will have:

• SvelteKit: Running at http://localhost:3000 with HMR.
• Site.js: Running at https://localhost with all features (including serving dynamic DotJS routes and WebSockets, etc.)

Note that the SvelteKit build is not automatically updated when hitting the Site.js endpoint. To update it, run the build command (see below).

Also note that the dev.sh script will only run on Linux-esque systems. If you’re on Windows, please run the commands listed above manually. Pull requests are welcome for a dev-windows task that runs a PowerShell script to do the same thing.

SvelteKit only

npm run kit

This will run the SvelteKit dev server only (not Site.js) at http://localhost:3000.

Build

npm run build

This will build the SvelteKit source into the .generated folder that is served by Site.js.

Serve

npm run serve

This will:

1. Build the latest Vite source using vite build
2. Serve the site using Site.js.

Hit https://localhost to view and test your site.

Note that the Vite dev server will not be run. If that’s what you want, please run the dev task.