This repository moved. Please use the new location: spectacular
Please π π π Star π π π the new repo spectacular
Everything you need to build a Svelte project, powered
by create-svelte
.
- 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
- 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
- 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
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
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
To update the packages to their latest versions in package.json
pnpm up --latest
pnpm audit --fix
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
pnpm test:e2e
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.
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
To build and publish libs
pnpm build:lib
cd package
pnpm publish