├── .vscode
    └── extensions.json
├── src
    ├── vite-env.d.ts
    ├── main.ts
    ├── server
    │   ├── test_data.ts
    │   ├── index.ts
    │   └── trpc.ts
    ├── lib
    │   ├── trpc.ts
    │   └── Counter.svelte
    ├── App.svelte
    ├── app.css
    └── assets
    │   └── svelte.svg
├── tsconfig.node.json
├── tsconfig.server.json
├── svelte.config.js
├── playwright.config.ts
├── tests
    └── example.test.ts
├── vite.config.ts
├── index.html
├── e2e
    └── example.spec.ts
├── .gitignore
├── tsconfig.json
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── ci.yml
├── public
    ├── logo_trpc.svg
    └── vite.svg
├── package.json
└── README.md


/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["svelte.svelte-vscode"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="svelte" />
2 | /// <reference types="vite/client" />
3 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "ESNext",
5 |     "moduleResolution": "Node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './app.css'
2 | import App from './App.svelte'
3 | 
4 | const app = new App({
5 |   target: document.getElementById('app') as HTMLElement,
6 | })
7 | 
8 | export default app
9 | 


--------------------------------------------------------------------------------
/tsconfig.server.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "NodeNext",
 4 |     "moduleResolution": "NodeNext",
 5 |     "target": "ES2020",
 6 |     "sourceMap": false,
 7 |     "outDir": "dist",
 8 |   },
 9 |   "include": ["src/server/**/*"],
10 | }


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2 | 
3 | export default {
4 |   // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5 |   // for more information about preprocessors
6 |   preprocess: vitePreprocess(),
7 | }
8 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import type { PlaywrightTestConfig } from "@playwright/test";
 2 | 
 3 | const config: PlaywrightTestConfig = {
 4 |   webServer: {
 5 |     command: "npm run build && npm run start",
 6 |     port: 5000,
 7 |   },
 8 |   testDir: "e2e",
 9 | };
10 | 
11 | export default config;
12 | 


--------------------------------------------------------------------------------
/src/server/test_data.ts:
--------------------------------------------------------------------------------
 1 | export interface User {
 2 |   id: string;
 3 |   name: string;
 4 | }
 5 | 
 6 | export const userList: User[] = [
 7 |   {
 8 |     id: "1",
 9 |     name: "Vite + Svelte + tRPC",
10 |   },
11 | ];
12 | 
13 | export let counter = 0;
14 | 
15 | export const increaseCounter = () => {
16 |   counter += 1
17 | }
18 | 


--------------------------------------------------------------------------------
/src/lib/trpc.ts:
--------------------------------------------------------------------------------
 1 | import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
 2 | import superjson from "superjson";
 3 | 
 4 | import type { AppRouter } from "../server/trpc";
 5 | 
 6 | export const client = createTRPCProxyClient<AppRouter>({
 7 |   links: [httpBatchLink({ url: "/trpc" })],
 8 |   transformer: superjson,
 9 | });
10 | 


--------------------------------------------------------------------------------
/tests/example.test.ts:
--------------------------------------------------------------------------------
 1 | import { expect, it } from "vitest";
 2 | import { counter, increaseCounter } from "../src/server/test_data";
 3 | 
 4 | it("Counter is  zero by default", () => {
 5 |   expect(counter).eq(0);
 6 | });
 7 | 
 8 | it("Counter increments by one", () => {
 9 |   increaseCounter();
10 |   expect(counter).eq(1);
11 | });
12 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vitest/config";
 2 | import { svelte } from "@sveltejs/vite-plugin-svelte";
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   server: {
 7 |     proxy: {
 8 |       "/trpc": "http://localhost:5000/",
 9 |     },
10 |   },
11 |   build: { outDir: "dist/public" },
12 |   plugins: [svelte()],
13 |   test: { dir: "tests" },
14 | });
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + Svelte + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/e2e/example.spec.ts:
--------------------------------------------------------------------------------
 1 | import { test, expect } from '@playwright/test';
 2 | 
 3 | test('test button is working', async ({ page }) => {
 4 |   await page.goto('http://localhost:5000/');
 5 |   const countButton = page.getByRole('button', { name: 'count is 0' });
 6 |   await countButton.click();
 7 | 
 8 |   const countButtonNew = page.getByRole('button', { name: 'count is 1' });
 9 |   await expect(countButtonNew).toHaveText('count is 1')
10 | });


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | /test-results/
26 | /playwright-report/
27 | /playwright/.cache/
28 | 


--------------------------------------------------------------------------------
/src/lib/Counter.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { client } from "./trpc";
 3 | 
 4 |   let count: number = 0
 5 |   
 6 |   const getCounter = async () => {
 7 |     count = await client.getCounter.query()
 8 |   }
 9 |   
10 |   const increment = async () => {
11 |     count = await client.increaseCounter.mutate()
12 |   }
13 | 
14 |   getCounter()
15 | </script>
16 | 
17 | <button on:click={increment}>
18 |   count is {count}
19 | </button>
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/svelte/tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "ESNext",
 5 |     "useDefineForClassFields": true,
 6 |     "module": "ESNext",
 7 |     "resolveJsonModule": true,
 8 |     /**
 9 |      * Typecheck JS in `.svelte` and `.js` files by default.
10 |      * Disable checkJs if you'd like to use dynamic types in JS.
11 |      * Note that setting allowJs false does not prevent the use
12 |      * of JS in `.svelte` files.
13 |      */
14 |     "allowJs": true,
15 |     "checkJs": true,
16 |     "isolatedModules": true
17 |   },
18 |   "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
19 |   "references": [{ "path": "./tsconfig.node.json" }]
20 | }
21 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "npm"
 9 |     directory: "/"
10 |     schedule:
11 |       interval: "monthly"
12 |     groups:
13 |       production-dependencies:
14 |         dependency-type: "production"
15 |       development-dependencies:
16 |         dependency-type: "development"
17 |   
18 |   - package-ecosystem: "github-actions" 
19 |     directory: "/"
20 |     schedule:
21 |       interval: "monthly"
22 | 


--------------------------------------------------------------------------------
/src/server/index.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | import { fileURLToPath } from "url";
 3 | 
 4 | import express from "express";
 5 | import * as trpcExpress from "@trpc/server/adapters/express";
 6 | import sirv from "sirv";
 7 | import compress from "compression";
 8 | 
 9 | import { appRouter, createContext } from "./trpc.js";
10 | 
11 | const __filename = fileURLToPath(import.meta.url);
12 | const __dirname = path.dirname(__filename);
13 | const app = express();
14 | const assets = sirv("public", {
15 |   maxAge: 31536000,
16 |   immutable: true,
17 | });
18 | 
19 | app.use(
20 |   "/trpc",
21 |   trpcExpress.createExpressMiddleware({
22 |     router: appRouter,
23 |     createContext,
24 |   })
25 | );
26 | 
27 | app.use(express.static(path.join(__dirname, "public")));
28 | app.use(compress(), assets);
29 | 
30 | const { PORT = 5000 } = process.env;
31 | 
32 | app.listen(PORT, () => {
33 |   console.log();
34 |   console.log(
35 |     `tRPC running at \x1b[36mhttp://localhost:\x1b[1m${PORT}/\x1b[0m`
36 |   );
37 | });
38 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
 3 | 
 4 | name: CI
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: ["main"]
 9 |   pull_request:
10 |     branches: ["main"]
11 | 
12 | jobs:
13 |   build:
14 |     runs-on: ubuntu-latest
15 | 
16 |     strategy:
17 |       matrix:
18 |         node-version: [ 18.x, 20.x, 21.x, 22.x ]
19 |         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
20 | 
21 |     steps:
22 |       - uses: actions/checkout@v5
23 |       - name: Use Node.js ${{ matrix.node-version }}
24 |         uses: actions/setup-node@v5
25 |         with:
26 |           node-version: ${{ matrix.node-version }}
27 |           cache: "npm"
28 | 
29 |       - run: npm ci
30 |       - run: npm run build --if-present
31 | 
32 |       - name: Lint
33 |         run: npm run check
34 | 
35 |       - name: Run unit tests
36 |         run: |
37 |           npm run test
38 | 
39 |       - name: Run E2E tests
40 |         run: |
41 |           npx playwright install
42 |           npm run e2e
43 | 


--------------------------------------------------------------------------------
/public/logo_trpc.svg:
--------------------------------------------------------------------------------
1 | <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="512" height="512" rx="150" fill="#398CCB"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M255.446 75L326.523 116.008V138.556L412.554 188.238V273.224L435.631 286.546V368.608L364.6 409.615L333.065 391.378L256.392 435.646L180.178 391.634L149.085 409.615L78.0538 368.538V286.546L100.231 273.743V188.238L184.415 139.638L184.462 139.636V116.008L255.446 75ZM326.523 159.879V198.023L255.492 239.031L184.462 198.023V160.936L184.415 160.938L118.692 198.9V263.084L149.085 245.538L220.115 286.546V368.538L198.626 380.965L256.392 414.323L314.618 380.712L293.569 368.538V286.546L364.6 245.538L394.092 262.565V198.9L326.523 159.879ZM312.031 357.969V307.915L355.369 332.931V382.985L312.031 357.969ZM417.169 307.846L373.831 332.862V382.985L417.169 357.9V307.846ZM96.5154 357.9V307.846L139.854 332.862V382.915L96.5154 357.9ZM201.654 307.846L158.315 332.862V382.915L201.654 357.9V307.846ZM321.262 291.923L364.6 266.908L407.938 291.923L364.6 316.962L321.262 291.923ZM149.085 266.838L105.746 291.923L149.085 316.892L192.423 291.923L149.085 266.838ZM202.923 187.362V137.308L246.215 162.346V212.377L202.923 187.362ZM308.015 137.308L264.723 162.346V212.354L308.015 187.362V137.308ZM212.154 121.338L255.446 96.3231L298.785 121.338L255.446 146.354L212.154 121.338Z" fill="white"/>
4 | </svg>


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import svelteLogo from './assets/svelte.svg'
 3 |   import Counter from './lib/Counter.svelte'
 4 | 
 5 |   import { client } from './lib/trpc';
 6 | 
 7 |   let name: string | undefined;
 8 | 
 9 |   async function testApi() {
10 |     let data = await client.userById.query("1")
11 |     name = data?.name
12 |   }
13 | 
14 |   testApi()
15 | 
16 | </script>
17 | 
18 | <main>
19 |   
20 |   <div>
21 |     <a href="https://vitejs.dev" target="_blank" rel="noreferrer"> 
22 |       <img src="/vite.svg" class="logo" alt="Vite Logo" />
23 |     </a>
24 |     <a href="https://svelte.dev" target="_blank" rel="noreferrer"> 
25 |       <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
26 |     </a>
27 |     <a href="https://trpc.io/" target="_blank" rel="noreferrer"> 
28 |       <img src="/logo_trpc.svg" class="logo trpc" alt="tRPC Logo" />
29 |     </a>
30 |   </div>
31 |   {#if name}
32 |     <h1>Hello {name}!</h1>
33 |   {/if}
34 | 
35 |   <div class="card">
36 |     <Counter />
37 |   </div>
38 | 
39 |   <p class="read-the-docs">
40 |     Click on the Vite, Svelte and tRPC logos to learn more
41 |   </p>
42 | </main>
43 | 
44 | <style>
45 |   .logo {
46 |     height: 6em;
47 |     padding: 1.5em;
48 |     will-change: filter;
49 |   }
50 |   .logo:hover {
51 |     filter: drop-shadow(0 0 2em #646cffaa);
52 |   }
53 |   .logo.svelte:hover {
54 |     filter: drop-shadow(0 0 2em #ff3e00aa);
55 |   }
56 |   .read-the-docs {
57 |     color: #888;
58 |   }
59 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vite-svelte-trpc",
 3 |     "private": true,
 4 |     "version": "0.0.0",
 5 |     "type": "module",
 6 |     "scripts": {
 7 |         "dev:client": "vite",
 8 |         "dev:server": "tsx watch src/server",
 9 |         "dev": "concurrently --kill-others \"npm run dev:client\" \"npm run dev:server\"",
10 |         "build:client": "vite build",
11 |         "build:server": "tsc --project tsconfig.server.json",
12 |         "build": "npm run build:client && npm run build:server",
13 |         "start": "node dist",
14 |         "preview": "vite preview",
15 |         "check": "svelte-check --tsconfig ./tsconfig.json",
16 |         "e2e": "playwright test",
17 |         "test": "vitest"
18 |     },
19 |     "devDependencies": {
20 |         "@playwright/test": "^1.47.2",
21 |         "@sveltejs/vite-plugin-svelte": "^3.1.2",
22 |         "@tsconfig/svelte": "^5.0.4",
23 |         "@types/compression": "^1.7.5",
24 |         "@types/express": "^5.0.0",
25 |         "@types/node": "^22.7.4",
26 |         "concurrently": "^9.0.1",
27 |         "svelte": "^4.2.19",
28 |         "svelte-check": "^4.0.4",
29 |         "tslib": "^2.7.0",
30 |         "tsx": "^4.19.1",
31 |         "typescript": "^5.6.2",
32 |         "vite": "^5.4.20",
33 |         "vitest": "^2.1.9"
34 |     },
35 |     "dependencies": {
36 |         "@trpc/client": "^10.45.2",
37 |         "@trpc/server": "^10.7.0",
38 |         "compression": "^1.8.1",
39 |         "express": "^4.21.2",
40 |         "sirv": "^3.0.1",
41 |         "superjson": "^2.2.2"
42 |     }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
 3 |   font-size: 16px;
 4 |   line-height: 24px;
 5 |   font-weight: 400;
 6 | 
 7 |   color-scheme: light dark;
 8 |   color: rgba(255, 255, 255, 0.87);
 9 |   background-color: #242424;
10 | 
11 |   font-synthesis: none;
12 |   text-rendering: optimizeLegibility;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 |   -webkit-text-size-adjust: 100%;
16 | }
17 | 
18 | a {
19 |   font-weight: 500;
20 |   color: #646cff;
21 |   text-decoration: inherit;
22 | }
23 | a:hover {
24 |   color: #535bf2;
25 | }
26 | 
27 | body {
28 |   margin: 0;
29 |   display: flex;
30 |   place-items: center;
31 |   min-width: 320px;
32 |   min-height: 100vh;
33 | }
34 | 
35 | h1 {
36 |   font-size: 3.2em;
37 |   line-height: 1.1;
38 | }
39 | 
40 | .card {
41 |   padding: 2em;
42 | }
43 | 
44 | #app {
45 |   max-width: 1280px;
46 |   margin: 0 auto;
47 |   padding: 2rem;
48 |   text-align: center;
49 | }
50 | 
51 | button {
52 |   border-radius: 8px;
53 |   border: 1px solid transparent;
54 |   padding: 0.6em 1.2em;
55 |   font-size: 1em;
56 |   font-weight: 500;
57 |   font-family: inherit;
58 |   background-color: #1a1a1a;
59 |   cursor: pointer;
60 |   transition: border-color 0.25s;
61 | }
62 | button:hover {
63 |   border-color: #646cff;
64 | }
65 | button:focus,
66 | button:focus-visible {
67 |   outline: 4px auto -webkit-focus-ring-color;
68 | }
69 | 
70 | @media (prefers-color-scheme: light) {
71 |   :root {
72 |     color: #213547;
73 |     background-color: #ffffff;
74 |   }
75 |   a:hover {
76 |     color: #747bff;
77 |   }
78 |   button {
79 |     background-color: #f9f9f9;
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/src/server/trpc.ts:
--------------------------------------------------------------------------------
 1 | import { initTRPC, type inferAsyncReturnType } from "@trpc/server";
 2 | import type * as trpcExpress from "@trpc/server/adapters/express";
 3 | import superjson from "superjson";
 4 | 
 5 | import { userList, counter, increaseCounter } from "./test_data.js";
 6 | 
 7 | // created for each request
 8 | export const createContext = (_options: trpcExpress.CreateExpressContextOptions) => ({}); // no context
 9 | 
10 | type Context = inferAsyncReturnType<typeof createContext>;
11 | 
12 | export const t = initTRPC.context<Context>().create({ transformer: superjson });
13 | 
14 | export const appRouter = t.router({
15 |   userById: t.procedure
16 |     // The input is unknown at this time.
17 |     // A client could have sent us anything
18 |     // so we won't assume a certain data type.
19 |     .input((val: unknown) => {
20 |       // If the value is of type string, return it.
21 |       // TypeScript now knows that this value is a string.
22 |       if (typeof val === "string") return val;
23 | 
24 |       // Uh oh, looks like that input wasn't a string.
25 |       // We will throw an error instead of running the procedure.
26 |       throw new Error(`Invalid input: ${typeof val}`);
27 |     })
28 |     .query((req) => {
29 |       const { input } = req;
30 | 
31 |       const user = userList.find((u) => u.id === input);
32 | 
33 |       return user;
34 |   }),
35 | 
36 |   getCounter: t.procedure
37 |     .query(() => {
38 |       return counter
39 |   }),
40 | 
41 |   increaseCounter: t.procedure
42 |     .mutation(() => {
43 |       increaseCounter()
44 |       return counter
45 |     })
46 | });
47 | 
48 | // export type definition of API
49 | export type AppRouter = typeof appRouter;
50 | 


--------------------------------------------------------------------------------
/src/assets/svelte.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![CI](https://github.com/mishankov/vite-svelte-trpc/actions/workflows/ci.yml/badge.svg)](https://github.com/mishankov/vite-svelte-trpc/actions/workflows/ci.yml)
 2 | [![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/4184-shield.svg)](https://madewithsvelte.com/p/vite-svelte-trpc-template/shield-link)
 3 | 
 4 | # Vite + Svelte + tRPC
 5 | 
 6 | This template should help get you started developing with [Vite](https://vitejs.dev/), [Svelte](https://svelte.dev/) and [tRPC](https://trpc.io/) combo
 7 | 
 8 | ## Features
 9 | 
10 | - HMR for client code with Vite and automatic build and restart for server with tcx on file changes
11 | - [Vitest](https://vitest.dev/) for unit tests
12 | - [Playwright](https://playwright.dev/) for E2E tests
13 | - [GitHub Actions](https://github.com/features/actions) workflow with build, lint and test steps
14 | - [Dependabot](https://docs.github.com/en/code-security/dependabot/working-with-dependabot) setup to keep dependencies updated
15 | - [Express](https://expressjs.com/) and [sirv](https://github.com/lukeed/sirv) to serve SPA and handle tRPC API calls
16 | 
17 | ## How to work with this template?
18 | 
19 | ### Installation
20 | 
21 | #### Using `degit`
22 | 
23 | ```bash
24 | npx degit github:mishankov/vite-svelte-trpc my-app
25 | ```
26 | 
27 | #### Using GitHub template
28 | 
29 | Create repo from this template with "Use this template" button above and clone it
30 | 
31 | ### Install dependencies
32 | 
33 | ```bash
34 | npm i
35 | ```
36 | 
37 | ### Start server and client
38 | 
39 | ```bash
40 | npm run dev
41 | ```
42 | 
43 | For HMR support use http://localhost:5173/ link by default. tRPC endpoint is http://localhost:5000/
44 | 
45 | You can also start client and server separately. Use `npm run dev:server` to start server and `npm run dev:client` to start client
46 | 
47 | ### Testing
48 | 
49 | Unit test are living in `tests` directory. To execute them, run: 
50 | 
51 | ```bash
52 | npm run test
53 | ```
54 | 
55 | E2E UI tests are living in `e2e` directory. To execute them, run: 
56 | 
57 | ```bash
58 | npm run e2e
59 | ```
60 | 
61 | ### Create and run production build
62 | 
63 | ```bash
64 | npm run build
65 | npm run start
66 | ```
67 | 
68 | ## Important points of file structure
69 | 
70 | - `dist` - client and server build directory
71 | - `e2e` - E2E tests
72 | - `tests` - unit tests
73 | - `src`
74 |   - `lib`
75 |     - `trpc.ts` - tRPC client setup to use in browser code
76 |   - `server`
77 |     - `index.ts` - setup for ExpressJS server which combines static files serving and tRPC server
78 |     - `trpc.ts` - setup for tRPC server
79 |     - `test_data.ts` - test data to showcase basic capabilities of this setup
80 | 
81 | ## Recommended IDE Setup
82 | 
83 | [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
84 | 


--------------------------------------------------------------------------------