├── .editorconfig ├── .eslintignore ├── .eslintrc.cjs ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── src ├── app.css ├── app.d.ts ├── app.html ├── hooks.server.ts ├── lib │ ├── components │ │ ├── Info.svelte │ │ ├── NavLink.svelte │ │ └── Todos.svelte │ ├── data │ │ └── todos.server.ts │ └── trpc │ │ ├── config.ts │ │ ├── context.server.ts │ │ ├── routers │ │ ├── appRouter.server.ts │ │ └── todoRouter.server.ts │ │ ├── transformer.ts │ │ ├── trpc.server.ts │ │ └── trpcClient.ts └── routes │ ├── +layout.svelte │ ├── +page.svelte │ ├── +page.ts │ ├── csr │ └── +page.svelte │ ├── hybrid │ ├── +page.svelte │ └── +page.ts │ └── ssr │ ├── +page.server.ts │ └── +page.svelte ├── static ├── favicon.png └── robots.txt ├── svelte.config.js ├── tailwind.config.cjs ├── trpc-sveltekit-fetchadapter-example.code-workspace ├── tsconfig.json └── vite.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 4 7 | indent_style = space 8 | insert_final_newline = true 9 | max_line_length = 120 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | 15 | .eslintrc.cjs 16 | *.config.js 17 | *.config.cjs 18 | *.config.ts 19 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: "@typescript-eslint/parser", 4 | parserOptions: { 5 | project: ["./tsconfig.json"], 6 | sourceType: "module", 7 | ecmaVersion: 2020, 8 | extraFileExtensions: [".svelte"], 9 | }, 10 | plugins: ["svelte3", "@typescript-eslint", "unused-imports"], 11 | extends: [ 12 | "eslint:recommended", 13 | "plugin:@typescript-eslint/recommended", 14 | "plugin:@typescript-eslint/recommended-requiring-type-checking", 15 | "prettier", 16 | ], 17 | ignorePatterns: ["*.cjs"], 18 | overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }], 19 | settings: { "svelte3/typescript": () => require("typescript") }, 20 | env: { 21 | browser: true, 22 | es2017: true, 23 | node: true, 24 | }, 25 | rules: { 26 | "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }], 27 | "@typescript-eslint/no-misused-promises": ["error", { checksVoidReturn: false }], 28 | "@typescript-eslint/no-unsafe-argument": "off", 29 | eqeqeq: "error", 30 | curly: ["error", "all"], 31 | "brace-style": ["error", "1tbs"], 32 | "arrow-body-style": ["error", "as-needed"], 33 | "object-shorthand": ["error", "always"], 34 | "unused-imports/no-unused-imports": "error", 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env*.local 7 | .vercel 8 | .output 9 | 10 | .vscode/* 11 | !.vscode/settings.json 12 | !.vscode/tasks.json 13 | !.vscode/launch.json 14 | !.vscode/extensions.json 15 | !.vscode/*.code-snippets 16 | .history/ 17 | *.vsix 18 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "htmlWhitespaceSensitivity": "ignore" 4 | } 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Austin S. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | An example "todos" project of [tRPC](https://github.com/trpc/trpc) v10 (w/ Fetch Adapter) + [SvelteKit](https://github.com/sveltejs/kit) + [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss). 2 | 3 | ## Developing 4 | 5 | Once you've installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 6 | 7 | ```bash 8 | npm run dev 9 | 10 | # or start the server and open the app in a new browser tab 11 | npm run dev -- --open 12 | ``` 13 | 14 | ## Building 15 | 16 | To create a production version of your app: 17 | 18 | ```bash 19 | npm run build 20 | ``` 21 | 22 | You can preview the production build with `npm run preview`. 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "trpc-sveltekit-fetchadapter-example", 3 | "private": true, 4 | "scripts": { 5 | "dev": "vite dev", 6 | "build": "vite build", 7 | "preview": "vite preview", 8 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 9 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 10 | "lint": "eslint .", 11 | "format": "npm run lint -- --fix && prettier --write --plugin-search-dir=. ." 12 | }, 13 | "engines": { 14 | "node": ">=16.17.0" 15 | }, 16 | "type": "module", 17 | "dependencies": { 18 | "@trpc/client": "^10.4.2", 19 | "@trpc/server": "^10.4.2", 20 | "superjson": "^1.11.0", 21 | "zod": "^3.19.1" 22 | }, 23 | "devDependencies": { 24 | "@sveltejs/adapter-node": "^1.0.0-next.101", 25 | "@sveltejs/kit": "1.0.0-next.567", 26 | "@tailwindcss/forms": "^0.5.3", 27 | "@typescript-eslint/eslint-plugin": "^5.45.0", 28 | "@typescript-eslint/parser": "^5.45.0", 29 | "autoprefixer": "^10.4.13", 30 | "eslint": "^8.28.0", 31 | "eslint-config-prettier": "^8.5.0", 32 | "eslint-plugin-svelte3": "^4.0.0", 33 | "eslint-plugin-unused-imports": "^2.0.0", 34 | "postcss": "^8.4.19", 35 | "prettier": "^2.8.0", 36 | "prettier-plugin-svelte": "^2.8.1", 37 | "prettier-plugin-tailwindcss": "^0.2.0", 38 | "svelte": "^3.53.1", 39 | "svelte-check": "^2.10.0", 40 | "svelte-preprocess": "^4.10.7", 41 | "tailwindcss": "^3.2.4", 42 | "tslib": "^2.4.1", 43 | "typescript": "^4.9.3", 44 | "vite": "^3.2.4" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /src/app.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | a { 7 | @apply border-r border-gray-600 px-3 py-1 text-xl text-blue-600 last:border-r-0 hover:text-blue-400; 8 | } 9 | 10 | p { 11 | @apply mb-4 last:mb-0; 12 | } 13 | } 14 | 15 | @layer components { 16 | .container { 17 | @apply p-4; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | interface Locals { 6 | userid: string; 7 | } 8 | 9 | // interface Platform {} 10 | 11 | // interface PrivateEnv {} 12 | 13 | // interface PublicEnv {} 14 | } 15 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/hooks.server.ts: -------------------------------------------------------------------------------- 1 | import type { Handle } from "@sveltejs/kit"; 2 | import { fetchRequestHandler } from "@trpc/server/adapters/fetch"; 3 | import type { Context } from "$lib/trpc/context.server"; 4 | import { appRouter } from "$lib/trpc/routers/appRouter.server"; 5 | import { trpcPathBase } from "$lib/trpc/config"; 6 | 7 | export const handle: Handle = async ({ event, resolve }) => { 8 | // Check if this is a request to the tRPC endpoint. 9 | if ( 10 | event.url.pathname.startsWith(`${trpcPathBase}/`) && 11 | (event.request.method === "GET" || event.request.method === "POST") 12 | ) { 13 | return await fetchRequestHandler({ 14 | endpoint: trpcPathBase, 15 | req: event.request, 16 | router: appRouter, 17 | createContext: (): Context => ({ req: event.request }), 18 | }); 19 | } 20 | 21 | return await resolve(event); 22 | }; 23 | -------------------------------------------------------------------------------- /src/lib/components/Info.svelte: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | -------------------------------------------------------------------------------- /src/lib/components/NavLink.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | {text} 10 | 11 | -------------------------------------------------------------------------------- /src/lib/components/Todos.svelte: -------------------------------------------------------------------------------- 1 | 32 | 33 |
34 |

Add Todo

35 | 36 |
37 | {#if error} 38 |
39 | {error} 40 |
41 | {/if} 42 | 43 |
44 | 45 | 46 |
47 | 48 |
49 | 50 | 51 |
52 | 53 |
54 | 57 |
58 |
59 |
60 | 61 |
62 |

Todos

63 | 64 |
65 | {#if todos.length} 66 | {#each todos as todo (todo.id)} 67 |
68 |
69 |

{todo.name}

70 |
71 | 72 |
ID: {todo.id}
73 | 74 |
{todo.content}
75 | 76 |
77 | 86 |
87 |
88 | {/each} 89 | {:else} 90 | No todos. 91 | {/if} 92 |
93 |
94 | -------------------------------------------------------------------------------- /src/lib/data/todos.server.ts: -------------------------------------------------------------------------------- 1 | export type Todo = { 2 | id: number; 3 | name: string; 4 | content: string; 5 | }; 6 | 7 | export const todos: Todo[] = [ 8 | { 9 | id: 1, 10 | name: "Todo 1", 11 | content: "Something to do.", 12 | }, 13 | { 14 | id: 2, 15 | name: "Todo 2", 16 | content: "Something else to do.", 17 | }, 18 | ]; 19 | -------------------------------------------------------------------------------- /src/lib/trpc/config.ts: -------------------------------------------------------------------------------- 1 | export const trpcPathBase = "/api/trpc"; 2 | -------------------------------------------------------------------------------- /src/lib/trpc/context.server.ts: -------------------------------------------------------------------------------- 1 | import type { FetchCreateContextFnOptions } from "@trpc/server/adapters/fetch"; 2 | 3 | // You can extend the Context to add things such a user session. 4 | export type Context = FetchCreateContextFnOptions; 5 | -------------------------------------------------------------------------------- /src/lib/trpc/routers/appRouter.server.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from "../context.server"; 2 | import { router } from "../trpc.server"; 3 | import { todoRouter } from "./todoRouter.server"; 4 | 5 | export const appRouter = router({ 6 | todo: todoRouter, 7 | }); 8 | 9 | export type AppRouter = typeof appRouter; 10 | 11 | export function trpcSsr(context: Context) { 12 | return appRouter.createCaller(context); 13 | } 14 | -------------------------------------------------------------------------------- /src/lib/trpc/routers/todoRouter.server.ts: -------------------------------------------------------------------------------- 1 | import { todos } from "$lib/data/todos.server"; 2 | import { TRPCError } from "@trpc/server"; 3 | import { z } from "zod"; 4 | import { publicProcedure, router } from "../trpc.server"; 5 | 6 | export const todoRouter = router({ 7 | list: publicProcedure.query(() => todos), 8 | add: publicProcedure 9 | .input( 10 | z.object({ 11 | name: z.string().trim().min(1), 12 | content: z.string().trim().min(1), 13 | }) 14 | ) 15 | .mutation(({ input }) => { 16 | const lastId = todos.length ? Math.max(...todos.map((t) => t.id)) : 0; 17 | 18 | const todo = { id: lastId + 1, ...input }; 19 | todos.push(todo); 20 | 21 | return todo; 22 | }), 23 | delete: publicProcedure.input(z.number().min(1)).mutation(({ input }) => { 24 | const idIndex = todos.map((t) => t.id).indexOf(input); 25 | 26 | if (idIndex >= 0) { 27 | todos.splice(idIndex, 1); 28 | return; 29 | } 30 | 31 | throw new TRPCError({ code: "NOT_FOUND", message: "Todo not found." }); 32 | }), 33 | }); 34 | -------------------------------------------------------------------------------- /src/lib/trpc/transformer.ts: -------------------------------------------------------------------------------- 1 | import type { DataTransformer } from "@trpc/server"; 2 | import superjson from "superjson"; 3 | 4 | export const transformer: DataTransformer = superjson; 5 | -------------------------------------------------------------------------------- /src/lib/trpc/trpc.server.ts: -------------------------------------------------------------------------------- 1 | import { initTRPC } from "@trpc/server"; 2 | import type { Context } from "./context.server"; 3 | import { transformer } from "./transformer"; 4 | 5 | const t = initTRPC.context().create({ 6 | transformer, 7 | }); 8 | 9 | export const router = t.router; 10 | export const publicProcedure = t.procedure; 11 | -------------------------------------------------------------------------------- /src/lib/trpc/trpcClient.ts: -------------------------------------------------------------------------------- 1 | import { createTRPCProxyClient, TRPCClientError, loggerLink, httpLink } from "@trpc/client"; 2 | import type { AppRouter } from "./routers/appRouter.server"; 3 | import type { LoadEvent } from "@sveltejs/kit"; 4 | import { browser, dev } from "$app/environment"; 5 | import { trpcPathBase } from "./config"; 6 | import { transformer } from "./transformer"; 7 | 8 | export const trpcClient = (loadFetch?: LoadEvent["fetch"]) => 9 | createTRPCProxyClient({ 10 | links: [ 11 | loggerLink({ enabled: () => dev }), 12 | httpLink({ 13 | // The port isn't constant by default, so we have set it to 3000 in vite.config.js for tRPC server-side fetches. 14 | url: loadFetch || browser ? trpcPathBase : `http://localhost:3000${trpcPathBase}`, 15 | ...(loadFetch && { fetch: loadFetch }), 16 | }), 17 | ], 18 | transformer, 19 | }); 20 | 21 | export function isTRPCClientError(cause: unknown): cause is TRPCClientError { 22 | return cause instanceof TRPCClientError; 23 | } 24 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 |

tRPC (w/ Fetch Adapter) + SvelteKit + Tailwind CSS

26 | 27 | 33 |
34 | 35 |
36 | {#if loading} 37 |

Loading...

38 | {:else} 39 | 40 | {/if} 41 |
42 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 |

This is a static home page.

2 | 3 |

Click on the links above to see the examples.

4 | 5 |

6 | I recommend inspecting your browser's Network Monitor to see the requests that are being made for the initial data 7 | for each page. 8 |

9 | -------------------------------------------------------------------------------- /src/routes/+page.ts: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | -------------------------------------------------------------------------------- /src/routes/csr/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | This page gets initial data by making a call to the tRPC procedure client-side using JavaScript during the page 11 | load. 12 | 13 | 14 | {#await todosPromise} 15 |

Loading...

16 | {:then todos} 17 | 18 | {/await} 19 | -------------------------------------------------------------------------------- /src/routes/hybrid/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | This page uses "page.ts". We fetch the initial data server-side with an HTTP request 11 | on the initial page request and client-side for when the page is navigated to client-side on subsequent page requests. 12 |
13 |
14 | "Hybrid" is just a name I came up with for this method. 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/routes/hybrid/+page.ts: -------------------------------------------------------------------------------- 1 | import { trpcClient } from "$lib/trpc/trpcClient"; 2 | import type { PageLoad } from "./$types"; 3 | 4 | /** 5 | * We pass SvelteKit's load fetch to our trpcClient so it can 6 | * fetch server-side with an HTTP request on the initial page request and 7 | * client-side for when the page is navigated to client-side on subsequent page requests. 8 | * 9 | * Top-level promises will be awaited, which makes it easy to return 10 | * multiple promises without creating a waterfall. 11 | * {@link https://kit.svelte.dev/docs/load#output} 12 | */ 13 | export const load: PageLoad = ({ fetch }) => ({ todos: trpcClient(fetch).todo.list.query() }); 14 | -------------------------------------------------------------------------------- /src/routes/ssr/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { trpcSsr } from "$lib/trpc/routers/appRouter.server"; 2 | import type { PageServerLoad } from "./$types"; 3 | 4 | /** 5 | * We get the initial data by calling the tRPC procedure directly 6 | * from the server without any HTTP requests. 7 | * 8 | * Top-level promises will be awaited, which makes it easy to return 9 | * multiple promises without creating a waterfall. 10 | * {@link https://kit.svelte.dev/docs/load#output} 11 | */ 12 | export const load: PageServerLoad = ({ request }) => ({ todos: trpcSsr({ req: request }).todo.list() }); 13 | -------------------------------------------------------------------------------- /src/routes/ssr/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | This page uses "page.server.ts". We get the initial data by calling the tRPC procedure directly from the server 11 | without any HTTP requests. 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/austins/trpc-sveltekit-fetchadapter-example/55b0b978176ffc8f673d0dbb6e6531cd2380b211/static/favicon.png -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from "@sveltejs/adapter-node"; 2 | import preprocess from "svelte-preprocess"; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://github.com/sveltejs/svelte-preprocess 7 | // for more information about preprocessors 8 | preprocess: preprocess({ postcss: true }), 9 | kit: { adapter: adapter() }, 10 | }; 11 | 12 | export default config; 13 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{html,svelte}"], 4 | theme: { 5 | extend: {}, 6 | container: { center: true }, 7 | }, 8 | plugins: [require("@tailwindcss/forms")], 9 | }; 10 | -------------------------------------------------------------------------------- /trpc-sveltekit-fetchadapter-example.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "." 5 | } 6 | ], 7 | "settings": { 8 | "editor.formatOnSave": true, 9 | "[javascript]": { 10 | "editor.defaultFormatter": "esbenp.prettier-vscode" 11 | }, 12 | "[typescript]": { 13 | "editor.defaultFormatter": "esbenp.prettier-vscode" 14 | }, 15 | "[svelte]": { 16 | "editor.defaultFormatter": "esbenp.prettier-vscode" 17 | }, 18 | "[json]": { 19 | "editor.defaultFormatter": "esbenp.prettier-vscode" 20 | }, 21 | "[jsonc]": { 22 | "editor.defaultFormatter": "esbenp.prettier-vscode" 23 | }, 24 | "[html]": { 25 | "editor.defaultFormatter": "esbenp.prettier-vscode" 26 | }, 27 | "[css]": { 28 | "editor.defaultFormatter": "esbenp.prettier-vscode" 29 | }, 30 | "[yaml]": { 31 | "editor.defaultFormatter": "esbenp.prettier-vscode" 32 | }, 33 | "editor.codeActionsOnSave": { 34 | "source.fixAll.eslint": true 35 | }, 36 | "eslint.validate": ["javascript", "typescript", "svelte"] 37 | }, 38 | "extensions": { 39 | "recommendations": [ 40 | "dbaeumer.vscode-eslint", 41 | "esbenp.prettier-vscode", 42 | "redhat.vscode-yaml", 43 | "svelte.svelte-vscode", 44 | "csstools.postcss", 45 | "bradlc.vscode-tailwindcss" 46 | ] 47 | }, 48 | "launch": { 49 | "configurations": [ 50 | { 51 | "name": "dev", 52 | "type": "node", 53 | "request": "launch", 54 | "runtimeArgs": ["run", "dev"], 55 | "runtimeExecutable": "npm", 56 | "cwd": "${workspaceRoot}", 57 | "skipFiles": ["/**"] 58 | } 59 | ] 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | 3 | const port = 3000; 4 | 5 | /** @type {import('vite').UserConfig} */ 6 | const config = { 7 | plugins: [sveltekit()], 8 | // The port isn't constant by default, so we set the port to 3000 for tRPC server-side fetches. 9 | server: { port }, 10 | preview: { port }, 11 | }; 12 | 13 | export default config; 14 | --------------------------------------------------------------------------------