sveltekit-production-starter Svelte Themes

Sveltekit Production Starter

Production-ready SvelteKit 5 + Tailwind v4 starter with E2E testing, coverage, and Sentry monitoring

#ci-cd#clean-architecture#svelte#ts
Download

Svelte Raw Template

A production-ready SvelteKit starter template built with shift-left quality practices. Catch bugs early, ship with confidence.

Philosophy

This template embraces the shift-left methodology—integrating quality gates at every stage of development rather than catching issues in production. Every commit is linted, every push is tested, and every merge is validated through CI/CD.

Fail fast, fix early.

Quality Gates

flowchart LR
    Code --> PreCommit["Pre-commit: lint-staged"]
    PreCommit --> PrePush["Pre-push: E2E tests + Coverage"]
    PrePush --> CI["CI Pipeline"]
    CI --> Sentry["Sentry Monitoring"]
    CI --> Deploy
Stage Trigger Actions
Pre-commit git commit Prettier + ESLint on staged files
Pre-push git push Full Playwright E2E test suite with coverage
CI/CD Push/PR to main Lint, type-check, test, build
Runtime Production Sentry error tracking & performance monitoring

Technologies

Core

  • SvelteKit
  • TypeScript
  • Vite

Styling

  • Tailwind CSS v4
  • Bits UI
  • Tailwind Merge & Variants

Quality

  • ESLint & Prettier
  • Playwright (E2E)
  • Monocart Reporter (V8 Code Coverage)
  • Husky (Git hooks)
  • lint-staged

Observability

  • Sentry (Error tracking & Performance monitoring)

Validation

  • Zod
  • Superforms

HTTP

  • Axios

Getting Started

Install dependencies:

pnpm install

Start the development server:

pnpm dev

Build for production:

pnpm build

Preview the production build:

pnpm preview

Commands

Command Description
pnpm dev Start development server
pnpm build Build for production
pnpm preview Preview production build
pnpm check Run type checks
pnpm lint Lint and check formatting
pnpm format Format code with Prettier
pnpm test Run E2E tests
pnpm test:show-report Open Monocart test report
pnpm coverage:show-report Open V8 coverage report

Code Coverage

E2E tests collect V8 code coverage using Playwright's built-in coverage API and Monocart Reporter.

Report Formats

  • V8 HTML Report: ./coverage/e2e/v8/index.html
  • LCOV: ./coverage/e2e/lcov/code-coverage.lcov.info
  • Cobertura XML: ./coverage/e2e/cobertura/code-coverage.cobertura.xml

Environment Variables

Create a .env file with the following variables:

VITE_API_BASE_URL=your-base-api
VITE_SENTRY_DSN=your-sentry-dsn
SENTRY_DSN=your-sentry-dsn
SENTRY_ORG=your-sentry-org
SENTRY_PROJECT=your-sentry-project
SENTRY_AUTH_TOKEN=your-sentry-auth-token

CI/CD Pipeline

GitHub Actions workflow triggers on push and pull requests to main:

  1. Install dependencies (pnpm)
  2. Run linter and formatter checks
  3. Run TypeScript type checks
  4. Install Playwright browsers
  5. Execute E2E test suite
  6. Build the application

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes