Svelte Starter Kit

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: schema definitions with zod. form initialization/reset/validation/error reporting with felte
• 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

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

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_CONFY_API_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

E2E Tests

pnpm test:e2e

Building

To create a production version of your app:

pnpm build -r
# build for hybrid rendering on nodejs runtime
pnpm build:node  -r
# build for static rendering on nginx runtime
pnpm build:static  -r
# run build
node build

Run from the local build directory:

NODE_ENV=production \
PUBLIC_CONFY_API_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