a static web app and Node library template with TypeScript, Svelte, SvelteKit, Vite, esbuild, Gro, and Fuz

template.fuz.dev

• SvelteKit with Svelte and Vite
• Moss: CSS framework and design system based on style variables
• Fuz:
  • Svelte UI library - fuz.dev
  • is optional, to remove, npm uninstall @ryanatkn/fuz and delete the imports
• Gro:
  • extends SvelteKit and Vite
  • integrated TypeScript with Svelte and svelte-check
  • testing with uvu
  • formatting with Prettier
  • linting with ESLint and @ryanatkn/eslint-config
  • also has a task system with a bunch of builtins, codegen, and other things
• optional utilities library @ryanatkn/belt

This project uses SvelteKit with the static adapter and Vite, so the normal commands like vite dev work as expected. It also uses Gro for tasks like deploying and more.

⚠️ Important, this template is designed for public open source projects. Its package.json has "public": true by default, which tells Gro to publish the package.json and a map of its src/ directory to static/.well-known/ during the build. This can leak sensitive information if you are not careful ⚠️ To disable the feature, edit package.json:

// package.json
- "public": true, // remove this to disable the public `.well-known` files
+ "private": true, // if you want to disable npm publishing, add this

Windows will not be suported because I chose Bash instead - WSL works

If you're logged into GitHub, click "Use this template" above or clone with degit:

npx degit ryanatkn/fuz_template cooltoy
cd cooltoy
npm i
# then
vite dev
# or
npm run dev
# or
gro dev # npm i -g @ryanatkn/gro
gro sync # called by `gro dev`, refreshes generated files and calls `svelte-kit sync`

learn more about SvelteKit, Vite, Gro, and Fuz

The template includes @sveltejs/adapter-static so it can deploy with no further configuration. To learn how to swap it out for another deployment target, see the SvelteKit adapter docs.

To make it your own, change @ryanatkn/fuz_template and template.fuz.dev to your project name in the following files:

• package.json
• svelte.config.js
• src/routes/+layout.svelte
• src/routes/+page.svelte
• update or delete src/static/CNAME and .github/FUNDING.yml

Then run npm i to update package-lock.json.

Optionally add a license file and package.json value, like "license": "MIT".

npm run build
# or
gro build

See Gro's build docs for more.

npm test
# or
gro test
gro test filepattern1 filepatternB
gro test -- uvu --forwarded_args 'to uvu'

See uvu, src/lib/example.test.ts, and Gro's test docs for more.

Deploy (build, commit, and push) to the deploy branch, e.g. for GitHub Pages:

npm i -D @sveltejs/package # enables Gro's library plugin by default
npm run deploy
# or
gro deploy

Svelte ∙ SvelteKit ∙ Vite ∙ esbuild ∙ uvu ∙ TypeScript ∙ ESLint ∙ Prettier ∙ Moss ∙ Fuz ∙ Gro ∙ @ryanatkn/belt ∙ Zod ∙ & more