create-better-t-stack 2.2.4 → 2.3.0

package/templates/frontend/react/next/src/app/page.tsx.hbs

@@ -1,11 +1,16 @@
 "use client"
-{{#if (eq api "orpc")}}
+{{#if (eq backend "convex")}}
+import { useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
+{{else}}
+  {{#if (eq api "orpc")}}
 import { orpc } from "@/utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
+  {{/if}}
+  {{#if (eq api "trpc")}}
 import { trpc } from "@/utils/trpc";
-{{/if}}
+  {{/if}}
 import { useQuery } from "@tanstack/react-query";
+{{/if}}
 
 const TITLE_TEXT = `
  ██████╗ ███████╗████████╗████████╗███████╗██████╗
@@ -24,10 +29,11 @@ const TITLE_TEXT = `
  `;
 
 export default function Home() {
-  {{#if (eq api "orpc")}}
+  {{#if (eq backend "convex")}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{else if (eq api "orpc")}}
   const healthCheck = useQuery(orpc.healthCheck.queryOptions());
-  {{/if}}
-  {{#if (eq api "trpc")}}
+  {{else if (eq api "trpc")}}
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
   {{/if}}
 
@@ -38,6 +44,18 @@ export default function Home() {
         <section className="rounded-lg border p-4">
           <h2 className="mb-2 font-medium">API Status</h2>
           <div className="flex items-center gap-2">
+            {{#if (eq backend "convex")}}
+            <div
+              className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
+            />
+            <span className="text-sm text-muted-foreground">
+              {healthCheck === undefined
+                ? "Checking..."
+                : healthCheck === "OK"
+                  ? "Connected"
+                  : "Error"}
+            </span>
+            {{else}}
             <div
               className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
             />
@@ -48,46 +66,10 @@ export default function Home() {
                   ? "Connected"
                   : "Disconnected"}
             </span>
+            {{/if}}
           </div>
         </section>
-
-        <section>
-          <h2 className="mb-3 font-medium">Core Features</h2>
-          <ul className="grid grid-cols-2 gap-3">
-            <FeatureItem
-              title="Type-Safe API"
-              description="End-to-end type safety with tRPC"
-            />
-            <FeatureItem
-              title="Modern React"
-              description="TanStack Router + TanStack Query"
-            />
-            <FeatureItem
-              title="Fast Backend"
-              description="Lightweight Hono server"
-            />
-            <FeatureItem
-              title="Beautiful UI"
-              description="TailwindCSS + shadcn/ui components"
-            />
-          </ul>
-        </section>
       </div>
     </div>
   );
 }
-
-function FeatureItem({
-  title,
-  description,
-}: {
-  title: string;
-  description: string;
-}) {
-  return (
-    <li className="border-l-2 border-primary py-1 pl-3">
-      <h3 className="font-medium">{title}</h3>
-      <p className="text-sm text-muted-foreground">{description}</p>
-    </li>
-  );
-}

package/templates/frontend/react/next/src/components/providers.tsx.hbs

@@ -1,14 +1,22 @@
 "use client"
+{{#if (eq backend "convex")}}
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{else}}
 import { QueryClientProvider } from "@tanstack/react-query";
-{{#if (eq api "orpc")}}
+  {{#if (eq api "orpc")}}
 import { orpc, ORPCContext, queryClient } from "@/utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
+  {{/if}}
+  {{#if (eq api "trpc")}}
 import { queryClient } from "@/utils/trpc";
+  {{/if}}
 {{/if}}
 import { ThemeProvider } from "./theme-provider";
 import { Toaster } from "./ui/sonner";
 
+{{#if (eq backend "convex")}}
+const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+{{/if}}
+
 export default function Providers({
   children,
 }: {
@@ -21,6 +29,9 @@ export default function Providers({
       enableSystem
       disableTransitionOnChange
     >
+      {{#if (eq backend "convex")}}
+      <ConvexProvider client={convex}>{children}</ConvexProvider>
+      {{else}}
       <QueryClientProvider client={queryClient}>
         {{#if (eq api "orpc")}}
         <ORPCContext.Provider value={orpc}>
@@ -31,6 +42,7 @@ export default function Providers({
         {children}
         {{/if}}
       </QueryClientProvider>
+      {{/if}}
       <Toaster richColors />
     </ThemeProvider>
   )

package/templates/frontend/react/react-router/package.json

@@ -17,7 +17,6 @@
     "@react-router/node": "^7.4.1",
     "@react-router/serve": "^7.4.1",
     "@tanstack/react-form": "^1.2.3",
-    "@tanstack/react-query": "^5.71.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "isbot": "^5.1.17",
@@ -34,7 +33,6 @@
   "devDependencies": {
     "@react-router/dev": "^7.4.1",
     "@tailwindcss/vite": "^4.0.0",
-    "@tanstack/react-query-devtools": "^5.71.3",
     "@types/node": "^20",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",

package/templates/frontend/react/react-router/src/root.tsx.hbs

@@ -1,5 +1,3 @@
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
   isRouteErrorResponse,
   Links,
@@ -14,11 +12,17 @@ import Header from "./components/header";
 import { ThemeProvider } from "./components/theme-provider";
 import { Toaster } from "./components/ui/sonner";
 
-{{#if (eq api "orpc")}}
-import { orpc, ORPCContext, queryClient } from "./utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
-import { queryClient } from "./utils/trpc";
+{{#if (eq backend "convex")}}
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{else}}
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+  {{#if (eq api "orpc")}}
+  import { orpc, ORPCContext, queryClient } from "./utils/orpc";
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  import { queryClient } from "./utils/trpc";
+  {{/if}}
 {{/if}}
 
 export const links: Route.LinksFunction = () => [
@@ -52,7 +56,25 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-{{#if (eq api "orpc")}}
+{{#if (eq backend "convex")}}
+export default function App() {
+  const convex = new ConvexReactClient(
+    import.meta.env.VITE_CONVEX_URL as string,
+  );
+
+  return (
+    <ConvexProvider client={convex}>
+      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <div className="grid grid-rows-[auto_1fr] h-svh">
+          <Header />
+          <Outlet />
+        </div>
+        <Toaster richColors />
+      </ThemeProvider>
+    </ConvexProvider>
+  );
+}
+{{else if (eq api "orpc")}}
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
@@ -69,9 +91,7 @@ export default function App() {
     </QueryClientProvider>
   );
 }
-{{/if}}
-
-{{#if (eq api "trpc")}}
+{{else if (eq api "trpc")}}
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>

package/templates/frontend/react/react-router/src/routes/_index.tsx.hbs

@@ -1,11 +1,16 @@
 import type { Route } from "./+types/_index";
-{{#if (eq api "orpc")}}
-import { orpc } from "@/utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
-import { trpc } from "@/utils/trpc";
-{{/if}}
+{{#if (eq backend "convex")}}
+import { useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
+{{else}}
+  {{#if (eq api "orpc")}}
+  import { orpc } from "@/utils/orpc";
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  import { trpc } from "@/utils/trpc";
+  {{/if}}
 import { useQuery } from "@tanstack/react-query";
+{{/if}}
 
 const TITLE_TEXT = `
  ██████╗ ███████╗████████╗████████╗███████╗██████╗
@@ -28,11 +33,11 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
-  
-  {{#if (eq api "orpc")}}
+  {{#if (eq backend "convex")}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{else if (eq api "orpc")}}
   const healthCheck = useQuery(orpc.healthCheck.queryOptions());
-  {{/if}}
-  {{#if (eq api "trpc")}}
+  {{else if (eq api "trpc")}}
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
   {{/if}}
 
@@ -43,6 +48,18 @@ export default function Home() {
         <section className="rounded-lg border p-4">
           <h2 className="mb-2 font-medium">API Status</h2>
           <div className="flex items-center gap-2">
+            {{#if (eq backend "convex")}}
+            <div
+              className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
+            />
+            <span className="text-sm text-muted-foreground">
+              {healthCheck === undefined
+                ? "Checking..."
+                : healthCheck === "OK"
+                  ? "Connected"
+                  : "Error"}
+            </span>
+            {{else}}
             <div
               className={`h-2 w-2 rounded-full ${
                 healthCheck.data ? "bg-green-500" : "bg-red-500"
@@ -55,46 +72,10 @@ export default function Home() {
                 ? "Connected"
                 : "Disconnected"}
             </span>
+            {{/if}}
           </div>
         </section>
-
-        <section>
-          <h2 className="mb-3 font-medium">Core Features</h2>
-          <ul className="grid grid-cols-2 gap-3">
-            <FeatureItem
-              title="Type-Safe API"
-              description="End-to-end type safety with tRPC"
-            />
-            <FeatureItem
-              title="Modern React"
-              description="TanStack Router + TanStack Query"
-            />
-            <FeatureItem
-              title="Fast Backend"
-              description="Lightweight Hono server"
-            />
-            <FeatureItem
-              title="Beautiful UI"
-              description="TailwindCSS + shadcn/ui components"
-            />
-          </ul>
-        </section>
       </div>
     </div>
   );
 }
-
-function FeatureItem({
-  title,
-  description,
-}: {
-  title: string;
-  description: string;
-}) {
-  return (
-    <li className="border-l-2 border-primary py-1 pl-3">
-      <h3 className="font-medium">{title}</h3>
-      <p className="text-sm text-muted-foreground">{description}</p>
-    </li>
-  );
-}

package/templates/frontend/react/tanstack-router/package.json

@@ -11,7 +11,6 @@
 		"check-types": "tsc --noEmit"
 	},
 	"devDependencies": {
-		"@tanstack/react-query-devtools": "^5.69.0",
 		"@tanstack/react-router-devtools": "^1.114.27",
 		"@tanstack/router-plugin": "^1.114.27",
 		"@types/node": "^22.13.13",
@@ -30,7 +29,6 @@
 		"@radix-ui/react-slot": "^1.1.2",
 		"@tanstack/react-form": "^1.0.5",
 		"@tailwindcss/vite": "^4.0.15",
-		"@tanstack/react-query": "^5.69.0",
 		"@tanstack/react-router": "^1.114.25",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",

package/templates/frontend/react/tanstack-router/src/main.tsx.hbs

@@ -1,14 +1,20 @@
-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";
 {{#if (eq api "orpc")}}
+import { QueryClientProvider } from "@tanstack/react-query";
 import { orpc, queryClient } from "./utils/orpc";
 {{/if}}
 {{#if (eq api "trpc")}}
+import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient, trpc } from "./utils/trpc";
 {{/if}}
+{{#if (eq backend "convex")}}
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+
+const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
+{{/if}}
 
 {{#if (eq api "orpc")}}
 const router = createRouter({
@@ -36,8 +42,18 @@ const router = createRouter({
   },
 });
 {{/if}}
+{{#if (eq backend "convex")}}
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  defaultPendingComponent: () => <Loader />,
+  context: {},
+  Wrap: function WrapComponent({ children }) {
+    return <ConvexProvider client={convex}>{children}</ConvexProvider>;
+  },
+});
+{{/if}}
 
-// Register things for typesafety
 declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router;

package/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs

@@ -38,6 +38,9 @@ export interface RouterAppContext {
   queryClient: QueryClient;
 }
 {{/if}}
+{{#if (eq backend "convex")}}
+export interface RouterAppContext {}
+{{/if}}
 
 export const Route = createRootRouteWithContext<RouterAppContext>()({
   component: RootComponent,
@@ -106,4 +109,24 @@ function RootComponent() {
     </>
   );
 }
-{{/if}}
+{{/if}}
+{{#if (eq backend "convex")}}
+function RootComponent() {
+  const isFetching = useRouterState({
+    select: (s) => s.isLoading,
+  });
+  return (
+    <>
+      <HeadContent />
+      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <div className="grid grid-rows-[auto_1fr] h-svh">
+          <Header />
+          {isFetching ? <Loader /> : <Outlet />}
+        </div>
+        <Toaster richColors />
+      </ThemeProvider>
+      <TanStackRouterDevtools position="bottom-left" />
+    </>
+  );
+}
+{{/if}}

package/templates/frontend/react/tanstack-router/src/routes/index.tsx.hbs

@@ -1,11 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
 {{#if (eq api "orpc")}}
 import { orpc } from "@/utils/orpc";
+import { useQuery } from "@tanstack/react-query";
 {{/if}}
 {{#if (eq api "trpc")}}
 import { trpc } from "@/utils/trpc";
-{{/if}}
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+{{/if}}
+{{#if (eq backend "convex")}}
+import { useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api.js";
+{{/if}}
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
@@ -34,6 +39,9 @@ function HomeComponent() {
   {{#if (eq api "trpc")}}
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
   {{/if}}
+  {{#if (eq backend "convex")}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{/if}}
 
   return (
     <div className="container mx-auto max-w-3xl px-4 py-2">
@@ -42,6 +50,7 @@ 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">
+            {{#if (or (eq api "orpc") (eq api "trpc"))}}
             <div
               className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
             />
@@ -52,46 +61,22 @@ function HomeComponent() {
                   ? "Connected"
                   : "Disconnected"}
             </span>
-          </div>
-        </section>
-
-        <section>
-          <h2 className="mb-3 font-medium">Core Features</h2>
-          <ul className="grid grid-cols-2 gap-3">
-            <FeatureItem
-              title="Type-Safe API"
-              description="End-to-end type safety with tRPC"
-            />
-            <FeatureItem
-              title="Modern React"
-              description="TanStack Router + TanStack Query"
-            />
-            <FeatureItem
-              title="Fast Backend"
-              description="Lightweight Hono server"
-            />
-            <FeatureItem
-              title="Beautiful UI"
-              description="TailwindCSS + shadcn/ui components"
+            {{/if}}
+            {{#if (eq backend "convex")}}
+            <div
+              className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
             />
-          </ul>
+            <span className="text-sm text-muted-foreground">
+              {healthCheck === undefined
+                ? "Checking..."
+                : healthCheck === "OK"
+                  ? "Connected"
+                  : "Error"}
+            </span>
+            {{/if}}
+          </div>
         </section>
       </div>
     </div>
   );
 }
-
-function FeatureItem({
-  title,
-  description,
-}: {
-  title: string;
-  description: string;
-}) {
-  return (
-    <li className="border-l-2 border-primary py-1 pl-3">
-      <h3 className="font-medium">{title}</h3>
-      <p className="text-sm text-muted-foreground">{description}</p>
-    </li>
-  );
-}

package/templates/frontend/react/tanstack-start/src/router.tsx.hbs

@@ -1,3 +1,13 @@
+{{#if (eq backend "convex")}}
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { QueryClient } from "@tanstack/react-query";
+import { routerWithQueryClient } from "@tanstack/react-router-with-query";
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { ConvexProvider } from "convex/react";
+import { routeTree } from "./routeTree.gen";
+import Loader from "./components/loader";
+import "./index.css";
+{{else}}
 import {
   QueryCache,
   QueryClient,
@@ -7,18 +17,56 @@ import { createRouter as createTanstackRouter } from "@tanstack/react-router";
 import Loader from "./components/loader";
 import "./index.css";
 import { routeTree } from "./routeTree.gen";
-{{#if (eq api "trpc")}}
+  {{#if (eq api "trpc")}}
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import { toast } from "sonner";
 import type { AppRouter } from "../../server/src/routers";
 import { TRPCProvider } from "./utils/trpc";
-{{/if}}
-{{#if (eq api "orpc")}}
+  {{/if}}
+  {{#if (eq api "orpc")}}
 import { orpc, ORPCContext, queryClient } from "./utils/orpc";
+  {{/if}}
 {{/if}}
 
-{{#if (eq api "trpc")}}
+{{#if (eq backend "convex")}}
+export function createRouter() {
+  const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!;
+  if (!CONVEX_URL) {
+    console.error("missing envar VITE_CONVEX_URL");
+  }
+  const convexQueryClient = new ConvexQueryClient(CONVEX_URL);
+
+  const queryClient: QueryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        queryKeyHashFn: convexQueryClient.hashFn(),
+        queryFn: convexQueryClient.queryFn(),
+      },
+    },
+  });
+  convexQueryClient.connect(queryClient);
+
+  const router = routerWithQueryClient(
+    createTanStackRouter({
+      routeTree,
+      defaultPreload: "intent",
+      defaultPendingComponent: () => <Loader />,
+      defaultNotFoundComponent: () => <div>Not Found</div>,
+      context: { queryClient },
+      Wrap: ({ children }) => (
+        <ConvexProvider client={convexQueryClient.convexClient}>
+          {children}
+        </ConvexProvider>
+      ),
+    }),
+    queryClient,
+  );
+
+  return router;
+}
+{{else}}
+  {{#if (eq api "trpc")}}
 export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: (error) => {
@@ -38,11 +86,7 @@ export const queryClient = new QueryClient({
 const trpcClient = createTRPCClient<AppRouter>({
   links: [
     httpBatchLink({
-      {{#if (includes frontend 'next')}}
-      url: `${process.env.NEXT_PUBLIC_SERVER_URL}/trpc`,
-      {{else}}
       url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-      {{/if}}
       {{#if auth}}
       fetch(url, options) {
         return fetch(url, {
@@ -59,8 +103,7 @@ const trpc = createTRPCOptionsProxy({
   client: trpcClient,
   queryClient: queryClient,
 });
-{{/if}}
-
+  {{/if}}
 
 export const createRouter = () => {
   const router = createTanstackRouter({
@@ -69,10 +112,10 @@ export const createRouter = () => {
     defaultPreloadStaleTime: 0,
     {{#if (eq api "trpc")}}
     context: { trpc, queryClient },
-{{/if}}
-{{#if (eq api "orpc")}}
+    {{/if}}
+    {{#if (eq api "orpc")}}
     context: { orpc, queryClient },
-{{/if}}
+    {{/if}}
     defaultPendingComponent: () => <Loader />,
     defaultNotFoundComponent: () => <div>Not Found</div>,
     Wrap: ({ children }) => (
@@ -93,6 +136,7 @@ export const createRouter = () => {
 
   return router;
 };
+{{/if}}
 
 // Register the router instance for type safety
 declare module "@tanstack/react-router" {

package/templates/frontend/react/tanstack-start/src/routes/__root.tsx.hbs

@@ -11,26 +11,28 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import Header from "../components/header";
 import appCss from "../index.css?url";
 import type { QueryClient } from "@tanstack/react-query";
-{{#if (eq api "trpc")}}
-import type { TRPCOptionsProxy } from "@trpc/tanstack-react-query";
-import type { AppRouter } from "../../../server/src/routers";
-{{/if}}
-{{#if (eq api "orpc")}}
-import type { orpc } from "@/utils/orpc";
-{{/if}}
 import Loader from "@/components/loader";
 
-{{#if (eq api "trpc")}}
+{{#if (eq backend "convex")}}
+export interface RouterAppContext {
+  queryClient: QueryClient;
+}
+{{else}}
+  {{#if (eq api "trpc")}}
+import type { TRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import type { AppRouter } from "../../../server/src/routers";
 export interface RouterAppContext {
   trpc: TRPCOptionsProxy<AppRouter>;
   queryClient: QueryClient;
 }
-{{/if}}
-{{#if (eq api "orpc")}}
+  {{/if}}
+  {{#if (eq api "orpc")}}
+import type { orpc } from "@/utils/orpc";
 export interface RouterAppContext {
   orpc: typeof orpc;
   queryClient: QueryClient;
 }
+  {{/if}}
 {{/if}}
 
 export const Route = createRootRouteWithContext<RouterAppContext>()({