Vite + Svelte + tRPC

This template should help get you started developing with Vite, Svelte and tRPC combo

Features

  • HMR for client code with Vite and automatic build and restart for server with tcx on file changes
  • Vitest for unit tests
  • Playwright for E2E tests
  • GitHub Actions workflow with build, lint and test steps
  • Dependabot setup to keep dependencies updated
  • Express and sirv to serve SPA and handle tRPC API calls

How to work with this template?

Installation

Using degit

npx degit github:mishankov/vite-svelte-trpc my-app

Using GitHub template

Create repo from this template with "Use this template" button above and clone it

Install dependencies

npm i

Start server and client

npm run dev

For HMR support use http://localhost:5173/ link by default. tRPC endpoint is http://localhost:5000/

You can also start client and server separately. Use npm run dev:server to start server and npm run dev:client to start client

Testing

Unit test are living in tests directory. To execute them, run:

npm run test

E2E UI tests are living in e2e directory. To execute them, run:

npm run e2e

Create and run production build

npm run build
npm run start

Important points of file structure

  • dist - client and server build directory
  • e2e - E2E tests
  • tests - unit tests
  • src
    • lib
      • trpc.ts - tRPC client setup to use in browser code
    • server
      • index.ts - setup for ExpressJS server which combines static files serving and tRPC server
      • trpc.ts - setup for tRPC server
      • test_data.ts - test data to showcase basic capabilities of this setup

VS Code + Svelte.

Top categories

Loading Svelte Themes