This template will help get you started developing with Vite and Svelte in Site.js.
It’s based on the Vite + Svelte template.
By using Site.js you can extend your static Vite + Svelte clients using dynamic DotJS routes, WebSockets, a JavaScript database, etc., and easily deploy to your own server using the built-in sync feature.
-
Download the template:
npm init using small-tech/site-vite-svelte my-project
This will download this template using create-using into a directory called
my-project
.Use the template on GitHub:
Click the green “Use this template” button on the GitHub page to create your own repository using this template.
Do it old-skool:
Just fork this repository and clone it as you normally do using
git
. -
cd my-project npm i
npm run dev
This will run the dev.sh
script that:
- Will build the latest Vite source using
vite build
- Start the Vite dev server in the background
- Start Site.js.
Once the servers are running, you will have:
- Vite: Running at
https://localhost:444
with HMR. - Site.js: Running at
https://localhost
with all features (including serving dynamic DotJS routes and WebSockets, etc.)
Note that the Vite 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.
npm run vite
This will run the Vite dev server only (not Site.js) at https://localhost:444
.
npm run build
This will build the Vite source into the .generated
folder that is served by Site.js.
npm run serve
This will:
- Build the latest Vite source using
vite build
- 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.
Why global.d.ts
instead of compilerOptions.types
inside jsconfig.json
or tsconfig.json
?
Setting compilerOptions.types
shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding svelte
and vite/client
type information.
Why include .vscode/extensions.json
?
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
Why enable checkJs
in the JS template?
It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
Why is HMR not preserving my local component state?
HMR state preservation comes with a number of gotchas! It has been disabled by default in both svelte-hmr
and @sveltejs/vite-plugin-svelte
due to its often surprising behaviour. You can read the details here.
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
// store.js
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
Small Technology Foundation is a tiny, independent not-for-profit.
We exist in part thanks to patronage by people like you. If you share our vision and want to support our work, please become a patron or donate to us today and help us continue to exist.
Copyright © 2021-present Aral Balkan, Small Technology Foundation.