@fuzdev/fuz_template ❄

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

template.fuz.dev

contents

• SvelteKit with Svelte and Vite
• Fuz CSS: CSS framework and design system based on style variables
• Fuz UI:
  • Svelte UI library - ui.fuz.dev
  • is optional, to remove, npm uninstall @fuzdev/fuz_ui and delete the imports
• Gro:
  • extends SvelteKit and Vite
  • integrated TypeScript with Svelte and svelte-check
  • testing with Vitest
  • 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 @fuzdev/fuz_util

usage

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.

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

npx degit fuzdev/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 UI

To opt into publishing the package.json and a map of the src/ directory to static/.well-known/ during the build using this Gro feature. This can leak sensitive information, so enable it only if you intend it to be public!

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

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

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 @fuzdev/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".

build

npm run build
# or
gro build

See Gro's build docs for more.

test

npm test
# or
gro test
gro test filepattern1 filepatternB
gro test -- --forwarded-args 'to vitest'

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

deploy

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

credits 🐢_🐢🐢

Svelte ∙ SvelteKit ∙ Vite ∙ esbuild ∙ Vitest ∙ TypeScript ∙ ESLint ∙ Prettier ∙ Fuz CSS ∙ Fuz ∙ Gro ∙ @fuzdev/fuz_util ∙ Zod ∙ & more

🐦