Almost completed development env

apps/frontend/package.json

@@ -14,11 +14,14 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.6",
-    "@tanstack/react-query": "^5.66.5",
+    "@tanstack/react-query": "^5.76.1",
     "@tanstack/react-query-devtools": "^5.66.5",
     "@tanstack/react-router": "^1.114.3",
     "@tanstack/react-router-devtools": "^1.114.3",
     "@tanstack/router-plugin": "^1.114.3",
+    "@trpc/client": "^11.1.2",
+    "@trpc/server": "^11.1.2",
+    "@trpc/tanstack-react-query": "^11.1.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.6"

apps/frontend/src/integrations/tanstack-query/root-provider.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-const queryClient = new QueryClient()
+export const queryClient = new QueryClient()
 
 export function getContext() {
   return {

apps/frontend/src/routeTree.gen.ts

@@ -12,6 +12,7 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
+import { Route as DemoTrpcImport } from './routes/demo.trpc'
 import { Route as DemoTanstackQueryImport } from './routes/demo.tanstack-query'
 
 // Create/Update Routes
@@ -22,6 +23,12 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const DemoTrpcRoute = DemoTrpcImport.update({
+  id: '/demo/trpc',
+  path: '/demo/trpc',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const DemoTanstackQueryRoute = DemoTanstackQueryImport.update({
   id: '/demo/tanstack-query',
   path: '/demo/tanstack-query',
@@ -46,6 +53,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DemoTanstackQueryImport
       parentRoute: typeof rootRoute
     }
+    '/demo/trpc': {
+      id: '/demo/trpc'
+      path: '/demo/trpc'
+      fullPath: '/demo/trpc'
+      preLoaderRoute: typeof DemoTrpcImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -54,36 +68,41 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
+  '/demo/trpc': typeof DemoTrpcRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
+  '/demo/trpc': typeof DemoTrpcRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
+  '/demo/trpc': typeof DemoTrpcRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/demo/tanstack-query'
+  fullPaths: '/' | '/demo/tanstack-query' | '/demo/trpc'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/demo/tanstack-query'
-  id: '__root__' | '/' | '/demo/tanstack-query'
+  to: '/' | '/demo/tanstack-query' | '/demo/trpc'
+  id: '__root__' | '/' | '/demo/tanstack-query' | '/demo/trpc'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
+  DemoTrpcRoute: typeof DemoTrpcRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   DemoTanstackQueryRoute: DemoTanstackQueryRoute,
+  DemoTrpcRoute: DemoTrpcRoute,
 }
 
 export const routeTree = rootRoute
@@ -97,7 +116,8 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/demo/tanstack-query"
+        "/demo/tanstack-query",
+        "/demo/trpc"
       ]
     },
     "/": {
@@ -105,6 +125,9 @@ export const routeTree = rootRoute
     },
     "/demo/tanstack-query": {
       "filePath": "demo.tanstack-query.tsx"
+    },
+    "/demo/trpc": {
+      "filePath": "demo.trpc.tsx"
     }
   }
 }

apps/frontend/src/routes/demo.trpc.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { trpc } from '@/utils/trpc.ts'
+
+export const Route = createFileRoute('/demo/trpc')({
+  component: TRPCDemo,
+})
+
+function TRPCDemo() {
+  const { data } = useQuery(trpc.demo.queryOptions())
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl mb-4">People list</h1>
+      <ul>Demo Output: {data}</ul>
+    </div>
+  )
+}

apps/frontend/src/utils/trpc.ts

@@ -0,0 +1,18 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client'
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query'
+import type { AppRouter } from '../../../backend/src/router.ts'
+import { queryClient } from '@/integrations/tanstack-query/root-provider.tsx'
+
+const trpcClient = createTRPCClient<AppRouter>({
+  links: [httpBatchLink({ url: '/api/trpc' })],
+})
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+})
+
+// We are using the singleton pattern because we don't have SSR,
+//  so to use trpc instead of `useTRPC()` (context-based api) we just
+//  do `import { trpc } from './utils/trpc'` and directly use the object.
+// This is safe BECAUSE THERE IS NO SSR AND THIS IS A FULL CSR WEBAPP

apps/frontend/vite.config.js

@@ -1,20 +1,36 @@
-import { defineConfig } from "vite";
-import viteReact from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
-import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
-import { resolve } from "node:path";
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact(), tailwindcss()],
+  plugins: [
+    TanStackRouterVite({ autoCodeSplitting: true }),
+    viteReact(),
+    tailwindcss(),
+  ],
   test: {
     globals: true,
-    environment: "jsdom",
+    environment: 'jsdom',
   },
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
     },
-  }
-});
+  },
+  server: {
+    // On Prod the frontend are just static file served directly by the backend node.js.
+    // On Dev we connect instead to the Vite server.
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        cookieDomainRewrite: '',
+        cookiePathRewrite: '/',
+      },
+    },
+  },
+})