Svelte Starter Kit
This repository moved. Please use the new location: spectacular
Please :star2: :star2: :star2: Star :star2: :star2: :star2: the new repo spectacular
Everything you need to build a Svelte project, powered
by create-svelte.
Tech Stack
- JS Framework SvelteKit
- CSS: Tailwind CSS
- UI Components: tailwindcss based Flowbite/flowbite-svelte, skeleton and DaisyUI
- Unit/Component testing: vitest
- Testing Library
- Svelte Testing Library
- API Mocking: Mock Service Worker
- Code Coverage c8
- End-to-End Testing: playwright
- GraphQL: Houdini & Hasura
- Authentication: Auth.js
- PWA: Vite PWA
Features
- Responsive Design: Container queries
- Progressive Web Apps (PWAs):
- Smart caching with Service Works
- Re-engage customers with Push Notifications
- Push Application Updates
- Fonts and Image Optimization: edge caching, Lazy-loading images
- SEO optimization
- GraphQL: Houdini the disappearing GraphQL client for SvelteKit. and nHost as BaaS
- Forms: Form handling with [superforms, source] and Validation with
zod - Error Handling:
- Strongly Typed Error Handling with generic errors
- FormData preprocessing with zodfd
- Themes: tailwindcss DarkMode switcher
- Deployment: Docker build and deployment serverless / k8s runtimes.
- Tables: svelte-headless-table
- Security: Use Auth.js when stable
- Vitebook or Storybook 7
- GraphQL Yoga API
- Documentation micro site with Astro
- Build Tools
- Use Bob.Build for Smart Builds, Build Cache etc and Bob's github-actions
- Use earthly.dev - Great for monorepos, Compatible with Every Language, Framework, and Build Tool
- Use sveltekit-og for Open Graph Image Generation
Experementing
- tRPC-SvelteKit End-to-end typesafe APIs SvelteKit.
- Monorepo: Convert to monorepo using pnpm, turborepo/turbopack, rome and changesets. Guide & Examples [1, 2,3]
- TAURI: Use tauri for multi-platform
Setup
cd ~/Developer/Work/SPA
git clone https://github.com/xmlking/svelte-starter-kit.git
cd svelte-starter-kit && pnpm i
# playwright is required for end-to-end testing
pnpx playwright install
# (optional) add git-commit-hooks
cog install-hook --all
Environment Variables
By default, the dev server (dev command) runs in development mode and the build command run in production
mode.
This means when running npm build, it will load the env variables from .env.production if there is one:
Use .env.local to override environment variables in .env (like API keys) for local development.
## Developing
Once you've cloned the project and installed dependencies with `pnpm i`, start a development server:
```shell
pnpm dev
# or start the server and open the app in a new browser tab
pnpm dev -- --open
# run in debug mode
pnpm dev:debug
# run with a custom inline config
# inline environment variables has higher precedence than ones loaded from .env and .env.local files
PUBLIC_GRAPHQL_ENDPOINT=api.mycompany.com:443 pnpm dev
Maintenance
Update
To update the packages to their latest versions in package.json
pnpm up --latest
pnpm audit --fix
Testing
Unit/Component Tests
pnpm test
pnpm test:ui
#Then, you can visit the Vitest UI at http://localhost:51204/__vitest__/.
# test coverage
pnpm test:coverage
# updating Snapshots
pnpx vitest -u
# test specific folder
pnpx vitest run src/lib/utils
(or)
./node_modules/.bin/vitest run src/lib/utils
E2E Tests
pnpm test:e2e
Building
To create a production version of your app:
pnpm build -r
# run build
node build
Run from the local build directory:
NODE_ENV=production \
PUBLIC_GRAPHQL_ENDPOINT=api.mycompany.com:443 \
node build
# (optional) pass ORIGIN when using `adapter-node` build
HOST=127.0.0.1 \
PORT=4000 \
ORIGIN=https://my.site \
node build
You can preview the production build with pnpm preview.
To deploy your app, you may need to install an adapter for your target environment.
Release
after checking-in all your changes, bump the VERSION and build the docker image.
# dry-run
cog bump --auto --dry-run
# this will bump version in package.json and create git tag and commit.
cog bump --auto
Libs
To build and publish libs
pnpm build:lib
cd package
pnpm publish
