create-better-t-stack 1.1.0 → 1.3.0

package/template/base/apps/web/src/main.tsx

@@ -0,0 +1,33 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import ReactDOM from "react-dom/client";
+import Loader from "./components/loader";
+import { routeTree } from "./routeTree.gen";
+import { queryClient, trpcClient } from "./utils/trpc";
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  defaultPendingComponent: () => <Loader />,
+  context: { trpcClient },
+  Wrap: function WrapComponent({ children }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  },
+});
+
+// Register things for typesafety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById("app");
+if (!rootElement) throw new Error("Root element not found");
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<RouterProvider router={router} />);
+}

package/template/base/apps/{client → web}/src/routes/__root.tsx

@@ -2,19 +2,19 @@ import Header from "@/components/header";
 import Loader from "@/components/loader";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
-import { trpcQueryUtils } from "@/main";
+import type { trpcClient } from "@/utils/trpc";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
+  HeadContent,
   Outlet,
   createRootRouteWithContext,
   useRouterState,
-  HeadContent,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import "../index.css";
 
 export interface RouterAppContext {
-  trpcQueryUtils: typeof trpcQueryUtils;
+  trpcClient: typeof trpcClient;
 }
 
 export const Route = createRootRouteWithContext<RouterAppContext>()({

package/template/base/apps/{client → web}/src/routes/index.tsx

@@ -1,7 +1,8 @@
+import { Button } from "@/components/ui/button";
 import { trpc } from "@/utils/trpc";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { Link, createFileRoute } from "@tanstack/react-router";
 import { ArrowRight } from "lucide-react";
-import { Button } from "@/components/ui/button";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
@@ -24,7 +25,7 @@ const TITLE_TEXT = `
  `;
 
 function HomeComponent() {
-  const healthCheck = trpc.healthCheck.useQuery();
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
 
   return (
     <div className="container mx-auto max-w-3xl px-4 py-2">
@@ -33,9 +34,9 @@ function HomeComponent() {
         <section className="rounded-lg border p-4">
           <h2 className="mb-2 font-medium">API Status</h2>
           <div className="flex items-center gap-2">
-           	<div
-							className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
-						/>
+            <div
+              className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+            />
             <span className="text-sm text-muted-foreground">
               {healthCheck.isLoading
                 ? "Checking..."

package/template/base/apps/web/src/utils/trpc.ts

@@ -0,0 +1,33 @@
+import type { AppRouter } from "../../../server/src/routers";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import { toast } from "sonner";
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+export const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+    }),
+  ],
+});
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

package/template/base/package.json

@@ -6,7 +6,8 @@
 		"dev": "turbo dev",
 		"build": "turbo build",
 		"check-types": "turbo check-types",
-		"dev:client": "turbo -F client dev",
+		"dev:native": "turbo -F native dev",
+		"dev:web": "turbo -F web dev",
 		"dev:server": "turbo -F server dev",
 		"db:push": "turbo -F server db:push",
 		"db:studio": "turbo -F server db:studio"

package/template/{with-drizzle-sqlite/apps/server/src/with-auth-lib/context.ts → with-auth/apps/server/src/lib/with-elysia-context.ts}

@@ -1,13 +1,13 @@
-import type { Context as HonoContext } from "hono";
+import type { Context as ElysiaContext } from "elysia";
 import { auth } from "./auth";
 
 export type CreateContextOptions = {
-  hono: HonoContext;
+  context: ElysiaContext;
 };
 
-export async function createContext({ hono }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions) {
   const session = await auth.api.getSession({
-    headers: hono.req.raw.headers,
+    headers: context.request.headers,
   });
 
   return {

package/template/{with-drizzle-postgres/apps/server/src/with-auth-lib/context.ts → with-auth/apps/server/src/lib/with-hono-context.ts}

@@ -2,12 +2,12 @@ import type { Context as HonoContext } from "hono";
 import { auth } from "./auth";
 
 export type CreateContextOptions = {
-  hono: HonoContext;
+  context: HonoContext;
 };
 
-export async function createContext({ hono }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions) {
   const session = await auth.api.getSession({
-    headers: hono.req.raw.headers,
+    headers: context.req.raw.headers,
   });
 
   return {

package/template/with-auth/apps/server/src/with-elysia-index.ts

@@ -0,0 +1,38 @@
+import "dotenv/config";
+import { Elysia } from "elysia";
+import { cors } from "@elysiajs/cors";
+import { auth } from "./lib/auth";
+import { createContext } from "./lib/context";
+import { appRouter } from "./routers/index";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+const app = new Elysia()
+  .use(
+    cors({
+      origin: process.env.CORS_ORIGIN || "",
+      methods: ["GET", "POST", "OPTIONS"],
+      allowedHeaders: ["Content-Type", "Authorization"],
+      credentials: true,
+    }),
+  )
+  .all("/api/auth/*", async (context) => {
+    const { request } = context;
+    if (["POST", "GET"].includes(request.method)) {
+      return auth.handler(request);
+    } else {
+      context.error(405);
+    }
+  })
+  .all("/trpc/*", async (context) => {
+    const res = await fetchRequestHandler({
+      endpoint: "/trpc",
+      router: appRouter,
+      req: context.request,
+      createContext: () => createContext({ context }),
+    });
+    return res;
+  })
+  .get("/", () => "OK")
+  .listen(3000, () => {
+    console.log(`Server is running on http://localhost:3000`);
+  });

package/template/with-auth/apps/server/src/{index.ts → with-hono-index.ts}

@@ -1,3 +1,4 @@
+
 import { trpcServer } from "@hono/trpc-server";
 import "dotenv/config";
 import { Hono } from "hono";
@@ -27,8 +28,8 @@ app.use(
 	"/trpc/*",
 	trpcServer({
 		router: appRouter,
-		createContext: (_opts, hono) => {
-			return createContext({ hono });
+		createContext: (_opts, context) => {
+			return createContext({ context });
 		},
 	}),
 );

package/template/with-auth/apps/{client → web}/src/routes/dashboard.tsx

@@ -1,5 +1,6 @@
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
 
@@ -12,7 +13,7 @@ function RouteComponent() {
 
   const navigate = Route.useNavigate();
 
-  const privateData = trpc.privateData.useQuery();
+  const privateData = useQuery(trpc.privateData.queryOptions());
 
   useEffect(() => {
     if (!session && !isPending) {

package/template/with-auth/apps/web/src/utils/trpc.ts

@@ -0,0 +1,39 @@
+import type { AppRouter } from "../../../server/src/routers";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import { toast } from "sonner";
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+export const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+      fetch(url, options) {
+        return fetch(url, {
+          ...options,
+          credentials: "include",
+        });
+      },
+    }),
+  ],
+});
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

package/template/with-elysia/apps/server/src/index.ts

@@ -0,0 +1,27 @@
+import "dotenv/config";
+import { Elysia } from "elysia";
+import { cors } from "@elysiajs/cors";
+import { createContext } from "./lib/context";
+import { appRouter } from "./routers/index";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+const app = new Elysia()
+  .use(
+    cors({
+      origin: process.env.CORS_ORIGIN || "",
+      methods: ["GET", "POST", "OPTIONS"],
+    }),
+  )
+  .all("/trpc/*", async (context) => {
+    const res = await fetchRequestHandler({
+      endpoint: "/trpc",
+      router: appRouter,
+      req: context.request,
+      createContext: () => createContext({ context }),
+    });
+    return res;
+  })
+  .get("/", () => "OK")
+  .listen(3000, () => {
+    console.log(`Server is running on http://localhost:3000`);
+  });

package/template/with-elysia/apps/server/src/lib/context.ts

@@ -0,0 +1,13 @@
+import type { Context as ElysiaContext } from "elysia";
+
+export type CreateContextOptions = {
+  context: ElysiaContext;
+};
+
+export async function createContext({ context }: CreateContextOptions) {
+  return {
+    session: null,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

package/template/{base → with-hono}/apps/server/src/index.ts

@@ -22,8 +22,8 @@ app.use(
 	"/trpc/*",
 	trpcServer({
 		router: appRouter,
-		createContext: (_opts, hono) => {
-			return createContext({ hono });
+		createContext: (_opts, context) => {
+			return createContext({ context });
 		},
 	}),
 );

package/template/{base → with-hono}/apps/server/src/lib/context.ts

@@ -1,10 +1,10 @@
 import type { Context as HonoContext } from "hono";
 
 export type CreateContextOptions = {
-  hono: HonoContext;
+  context: HonoContext;
 };
 
-export async function createContext({ hono }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions) {
   return {
     session: null,
   };

package/template/base/apps/client/src/main.tsx

@@ -1,72 +0,0 @@
-import {
-	QueryCache,
-	QueryClient,
-	QueryClientProvider,
-} from "@tanstack/react-query";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { httpBatchLink } from "@trpc/client";
-import { createTRPCQueryUtils } from "@trpc/react-query";
-import ReactDOM from "react-dom/client";
-import { toast } from "sonner";
-import Loader from "./components/loader";
-import { routeTree } from "./routeTree.gen";
-import { trpc } from "./utils/trpc";
-
-const queryClient = new QueryClient({
-	queryCache: new QueryCache({
-		onError: (error) => {
-			toast.error(error.message, {
-				action: {
-					label: "retry",
-					onClick: () => {
-						queryClient.invalidateQueries();
-					},
-				},
-			});
-		},
-	}),
-});
-
-const trpcClient = trpc.createClient({
-	links: [
-		httpBatchLink({
-			url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-		}),
-	],
-});
-
-export const trpcQueryUtils = createTRPCQueryUtils({
-	queryClient,
-	client: trpcClient,
-});
-
-const router = createRouter({
-	routeTree,
-	defaultPreload: "intent",
-	context: { trpcQueryUtils },
-	defaultPendingComponent: () => <Loader />,
-	Wrap: function WrapComponent({ children }) {
-		return (
-			<trpc.Provider client={trpcClient} queryClient={queryClient}>
-				<QueryClientProvider client={queryClient}>
-					{children}
-				</QueryClientProvider>
-			</trpc.Provider>
-		);
-	},
-});
-
-// Register things for typesafety
-declare module "@tanstack/react-router" {
-	interface Register {
-		router: typeof router;
-	}
-}
-
-const rootElement = document.getElementById("app");
-if (!rootElement) throw new Error("Root element not found");
-
-if (!rootElement.innerHTML) {
-	const root = ReactDOM.createRoot(rootElement);
-	root.render(<RouterProvider router={router} />);
-}

package/template/base/apps/client/src/utils/trpc.ts

@@ -1,4 +0,0 @@
-import { createTRPCReact } from "@trpc/react-query";
-import type { AppRouter } from "../../../server/src/routers";
-
-export const trpc = createTRPCReact<AppRouter>();

package/template/with-auth/apps/client/src/main.tsx

@@ -1,78 +0,0 @@
-import {
-	QueryCache,
-	QueryClient,
-	QueryClientProvider,
-} from "@tanstack/react-query";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { httpBatchLink } from "@trpc/client";
-import { createTRPCQueryUtils } from "@trpc/react-query";
-import ReactDOM from "react-dom/client";
-import { toast } from "sonner";
-import Loader from "./components/loader";
-import { routeTree } from "./routeTree.gen";
-import { trpc } from "./utils/trpc";
-
-const queryClient = new QueryClient({
-	queryCache: new QueryCache({
-		onError: (error) => {
-			toast.error(error.message, {
-				action: {
-					label: "retry",
-					onClick: () => {
-						queryClient.invalidateQueries();
-					},
-				},
-			});
-		},
-	}),
-});
-
-const trpcClient = trpc.createClient({
-	links: [
-		httpBatchLink({
-			url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-			fetch(url, options) {
-				return fetch(url, {
-					...options,
-					credentials: "include",
-				});
-			},
-		}),
-	],
-});
-
-export const trpcQueryUtils = createTRPCQueryUtils({
-	queryClient,
-	client: trpcClient,
-});
-
-const router = createRouter({
-	routeTree,
-	defaultPreload: "intent",
-	context: { trpcQueryUtils },
-	defaultPendingComponent: () => <Loader />,
-	Wrap: function WrapComponent({ children }) {
-		return (
-			<trpc.Provider client={trpcClient} queryClient={queryClient}>
-				<QueryClientProvider client={queryClient}>
-					{children}
-				</QueryClientProvider>
-			</trpc.Provider>
-		);
-	},
-});
-
-// Register things for typesafety
-declare module "@tanstack/react-router" {
-	interface Register {
-		router: typeof router;
-	}
-}
-
-const rootElement = document.getElementById("app");
-if (!rootElement) throw new Error("Root element not found");
-
-if (!rootElement.innerHTML) {
-	const root = ReactDOM.createRoot(rootElement);
-	root.render(<RouterProvider router={router} />);
-}

package/template/with-drizzle-postgres/apps/server/src/routers/todo.ts

@@ -1,44 +0,0 @@
-import { z } from "zod";
-import { router, publicProcedure } from "../lib/trpc";
-import { todo } from "../db/schema";
-import { eq } from "drizzle-orm";
-import { db } from "../db";
-
-export const todoRouter = router({
-  getAll: publicProcedure.query(async () => {
-    return await db.select().from(todo).all();
-  }),
-
-  create: publicProcedure
-    .input(z.object({ text: z.string().min(1) }))
-    .mutation(async ({ input }) => {
-      return await db
-        .insert(todo)
-        .values({
-          text: input.text,
-        })
-        .returning()
-        .get();
-    }),
-
-  toggle: publicProcedure
-    .input(z.object({ id: z.number(), completed: z.boolean() }))
-    .mutation(async ({ input }) => {
-      return await db
-        .update(todo)
-        .set({ completed: input.completed })
-        .where(eq(todo.id, input.id))
-        .returning()
-        .get();
-    }),
-
-  delete: publicProcedure
-    .input(z.object({ id: z.number() }))
-    .mutation(async ({ input }) => {
-      return await db
-        .delete(todo)
-        .where(eq(todo.id, input.id))
-        .returning()
-        .get();
-    }),
-});

package/template/with-drizzle-postgres/apps/server/src/with-auth-lib/trpc.ts

@@ -1,24 +0,0 @@
-import { initTRPC, TRPCError } from "@trpc/server";
-import type { Context } from "./context";
-
-export const t = initTRPC.context<Context>().create();
-
-export const router = t.router;
-
-export const publicProcedure = t.procedure;
-
-export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
-  if (!ctx.session) {
-    throw new TRPCError({
-      code: "UNAUTHORIZED",
-      message: "Authentication required",
-      cause: "No session",
-    });
-  }
-  return next({
-    ctx: {
-      ...ctx,
-      session: ctx.session,
-    },
-  });
-});

package/template/with-drizzle-sqlite/apps/server/src/with-auth-lib/trpc.ts

@@ -1,24 +0,0 @@
-import { initTRPC, TRPCError } from "@trpc/server";
-import type { Context } from "./context";
-
-export const t = initTRPC.context<Context>().create();
-
-export const router = t.router;
-
-export const publicProcedure = t.procedure;
-
-export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
-  if (!ctx.session) {
-    throw new TRPCError({
-      code: "UNAUTHORIZED",
-      message: "Authentication required",
-      cause: "No session",
-    });
-  }
-  return next({
-    ctx: {
-      ...ctx,
-      session: ctx.session,
-    },
-  });
-});

package/template/with-prisma-postgres/apps/server/src/with-auth-lib/context.ts

@@ -1,18 +0,0 @@
-import type { Context as HonoContext } from "hono";
-import { auth } from "./auth";
-
-export type CreateContextOptions = {
-  hono: HonoContext;
-};
-
-export async function createContext({ hono }: CreateContextOptions) {
-  const session = await auth.api.getSession({
-    headers: hono.req.raw.headers,
-  });
-
-  return {
-    session,
-  };
-}
-
-export type Context = Awaited<ReturnType<typeof createContext>>;

package/template/with-prisma-postgres/apps/server/src/with-auth-lib/trpc.ts

@@ -1,24 +0,0 @@
-import { initTRPC, TRPCError } from "@trpc/server";
-import type { Context } from "./context";
-
-export const t = initTRPC.context<Context>().create();
-
-export const router = t.router;
-
-export const publicProcedure = t.procedure;
-
-export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
-  if (!ctx.session) {
-    throw new TRPCError({
-      code: "UNAUTHORIZED",
-      message: "Authentication required",
-      cause: "No session",
-    });
-  }
-  return next({
-    ctx: {
-      ...ctx,
-      session: ctx.session,
-    },
-  });
-});

package/template/with-prisma-sqlite/apps/server/src/with-auth-lib/context.ts

@@ -1,18 +0,0 @@
-import type { Context as HonoContext } from "hono";
-import { auth } from "./auth";
-
-export type CreateContextOptions = {
-  hono: HonoContext;
-};
-
-export async function createContext({ hono }: CreateContextOptions) {
-  const session = await auth.api.getSession({
-    headers: hono.req.raw.headers,
-  });
-
-  return {
-    session,
-  };
-}
-
-export type Context = Awaited<ReturnType<typeof createContext>>;