Added support for building mobile applications with Expo

apps/cli/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} />);
-}

apps/cli/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>();

apps/cli/template/base/apps/native/_gitignore

@@ -0,0 +1,24 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+# expo router
+expo-env.d.ts
+
+
+
+ios
+android
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

apps/cli/template/base/apps/native/app-env.d.ts

@@ -0,0 +1,2 @@
+// @ts-ignore
+/// <reference types="nativewind/types" />

apps/cli/template/base/apps/native/app.json

@@ -0,0 +1,38 @@
+{
+  "expo": {
+    "name": "my-better-t-app",
+    "slug": "my-better-t-app",
+    "version": "1.0.0",
+    "scheme": "my-better-t-app",
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": ["expo-router"],
+    "experiments": {
+      "typedRoutes": true,
+      "tsconfigPaths": true
+    },
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.amanvarshney01.mybettertapp"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.amanvarshney01.mybettertapp"
+    }
+  }
+}

apps/cli/template/base/apps/native/app/(drawer)/(tabs)/_layout.tsx

@@ -0,0 +1,29 @@
+import { Tabs } from "expo-router";
+
+import { TabBarIcon } from "@/components/tabbar-icon";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: "black",
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Tab One",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: "Tab Two",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

apps/cli/template/base/apps/native/app/(drawer)/(tabs)/index.tsx

@@ -0,0 +1,9 @@
+import { View, Text } from "react-native";
+
+export default function App() {
+  return (
+    <View>
+      <Text>Hello, World!</Text>
+    </View>
+  );
+}

apps/cli/template/base/apps/native/app/(drawer)/(tabs)/two.tsx

@@ -0,0 +1,16 @@
+import { Stack } from "expo-router";
+import { View, Text } from "react-native";
+
+import { Container } from "@/components/container";
+
+export default function Home() {
+  return (
+    <>
+      <Container>
+        <View>
+          <Text>Tab Two</Text>
+        </View>
+      </Container>
+    </>
+  );
+}

apps/cli/template/base/apps/native/app/(drawer)/_layout.tsx

@@ -0,0 +1,39 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { Link } from "expo-router";
+import { Drawer } from "expo-router/drawer";
+
+import { HeaderButton } from "@/components/header-button";
+
+const DrawerLayout = () => {
+  return (
+    <Drawer>
+      <Drawer.Screen
+        name="index"
+        options={{
+          headerTitle: "Home",
+          drawerLabel: "Home",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      <Drawer.Screen
+        name="(tabs)"
+        options={{
+          headerTitle: "Tabs",
+          drawerLabel: "Tabs",
+          drawerIcon: ({ size, color }) => (
+            <MaterialIcons name="border-bottom" size={size} color={color} />
+          ),
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <HeaderButton />
+            </Link>
+          ),
+        }}
+      />
+    </Drawer>
+  );
+};
+
+export default DrawerLayout;

apps/cli/template/base/apps/native/app/(drawer)/index.tsx

@@ -0,0 +1,36 @@
+import { useQuery } from "@tanstack/react-query";
+import { View, Text, ScrollView } from "react-native";
+import { Container } from "@/components/container";
+import { trpc } from "@/utils/trpc";
+
+export default function Home() {
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+
+  return (
+    <Container>
+      <ScrollView className="py-4 flex-1">
+        <Text className="font-mono text-foreground text-2xl font-bold mb-6">
+          BETTER T STACK
+        </Text>
+
+        <View className="rounded-lg border border-foreground p-4">
+          <Text className="mb-2 font-medium text-foreground">API Status</Text>
+          <View className="flex-row items-center gap-2">
+            <View
+              className={`h-2.5 w-2.5 rounded-full ${
+                healthCheck.data ? "bg-green-500" : "bg-red-500"
+              }`}
+            />
+            <Text className="text-sm text-foreground">
+              {healthCheck.isLoading
+                ? "Checking..."
+                : healthCheck.data
+                  ? "Connected"
+                  : "Disconnected"}
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}

apps/cli/template/base/apps/native/app/+html.tsx

@@ -0,0 +1,46 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+
+        {/*
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+        />
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

apps/cli/template/base/apps/native/app/+not-found.tsx

@@ -0,0 +1,18 @@
+import { Link, Stack } from 'expo-router';
+import { Text } from 'react-native';
+
+import { Container } from '@/components/container';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <Container>
+        <Text className="text-xl font-bold">This screen doesn't exist.</Text>
+        <Link href="/" className="mt-4 pt-4">
+          <Text className="text-base text-[#2e78b7]">Go to home screen!</Text>
+        </Link>
+      </Container>
+    </>
+  );
+}

apps/cli/template/base/apps/native/app/_layout.tsx

@@ -0,0 +1,76 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Stack } from "expo-router";
+import {
+  DarkTheme,
+  DefaultTheme,
+  Theme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import "../global.css";
+import { queryClient } from "@/utils/trpc";
+import { NAV_THEME } from "@/lib/constants";
+import React, { useRef } from "react";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { Platform } from "react-native";
+import { setAndroidNavigationBar } from "@/lib/android-navigation-bar";
+
+const LIGHT_THEME: Theme = {
+  ...DefaultTheme,
+  colors: NAV_THEME.light,
+};
+const DARK_THEME: Theme = {
+  ...DarkTheme,
+  colors: NAV_THEME.dark,
+};
+
+export const unstable_settings = {
+  // Ensure that reloading on `/modal` keeps a back button present.
+  initialRouteName: "(drawer)",
+};
+
+export default function RootLayout() {
+  const hasMounted = useRef(false);
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
+  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    if (hasMounted.current) {
+      return;
+    }
+
+    if (Platform.OS === "web") {
+      // Adds the background color to the html element to prevent white background on overscroll.
+      document.documentElement.classList.add("bg-background");
+    }
+    setAndroidNavigationBar(colorScheme);
+    setIsColorSchemeLoaded(true);
+    hasMounted.current = true;
+  }, []);
+
+  if (!isColorSchemeLoaded) {
+    return null;
+  }
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+        <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <Stack>
+            <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
+            <Stack.Screen
+              name="modal"
+              options={{ title: "Modal", presentation: "modal" }}
+            />
+          </Stack>
+        </GestureHandlerRootView>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}
+
+const useIsomorphicLayoutEffect =
+  Platform.OS === "web" && typeof window === "undefined"
+    ? React.useEffect
+    : React.useLayoutEffect;

apps/cli/template/base/apps/native/app/modal.tsx

@@ -0,0 +1,15 @@
+import { Text, View } from "react-native";
+
+import { Container } from "@/components/container";
+
+export default function Modal() {
+  return (
+    <>
+      <Container>
+        <View>
+          <Text>HI MODAL</Text>
+        </View>
+      </Container>
+    </>
+  );
+}

apps/cli/template/base/apps/native/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = function (api) {
+  api.cache(true);
+  const plugins = [];
+
+  plugins.push('react-native-reanimated/plugin');
+
+  return {
+    presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
+
+    plugins,
+  };
+};

apps/cli/template/base/apps/native/components/container.tsx

@@ -0,0 +1,9 @@
+import { SafeAreaView } from "react-native";
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <SafeAreaView className="flex flex-1 p-4 bg-background">
+      {children}
+    </SafeAreaView>
+  );
+};

apps/cli/template/base/apps/native/components/header-button.tsx

@@ -0,0 +1,31 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { forwardRef } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+
+export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void }>(
+  ({ onPress }, ref) => {
+    return (
+      <Pressable onPress={onPress}>
+        {({ pressed }) => (
+          <FontAwesome
+            name="info-circle"
+            size={25}
+            color="gray"
+            style={[
+              styles.headerRight,
+              {
+                opacity: pressed ? 0.5 : 1,
+              },
+            ]}
+          />
+        )}
+      </Pressable>
+    );
+  }
+);
+
+export const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15,
+  },
+});

apps/cli/template/base/apps/native/components/tabbar-icon.tsx

@@ -0,0 +1,15 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { StyleSheet } from 'react-native';
+
+export const TabBarIcon = (props: {
+  name: React.ComponentProps<typeof FontAwesome>['name'];
+  color: string;
+}) => {
+  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+};
+
+export const styles = StyleSheet.create({
+  tabBarIcon: {
+    marginBottom: -3,
+  },
+});

apps/cli/template/base/apps/native/global.css

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+  }
+
+  .dark:root {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --destructive: 0 72% 51%;
+  }
+}

apps/cli/template/base/apps/native/lib/android-navigation-bar.tsx

@@ -0,0 +1,11 @@
+import * as NavigationBar from "expo-navigation-bar";
+import { Platform } from "react-native";
+import { NAV_THEME } from "@/lib/constants";
+
+export async function setAndroidNavigationBar(theme: "light" | "dark") {
+  if (Platform.OS !== "android") return;
+  await NavigationBar.setButtonStyleAsync(theme === "dark" ? "light" : "dark");
+  await NavigationBar.setBackgroundColorAsync(
+    theme === "dark" ? NAV_THEME.dark.background : NAV_THEME.light.background,
+  );
+}

apps/cli/template/base/apps/native/lib/constants.ts

@@ -0,0 +1,18 @@
+export const NAV_THEME = {
+  light: {
+    background: "hsl(0 0% 100%)", // background
+    border: "hsl(240 5.9% 90%)", // border
+    card: "hsl(0 0% 100%)", // card
+    notification: "hsl(0 84.2% 60.2%)", // destructive
+    primary: "hsl(240 5.9% 10%)", // primary
+    text: "hsl(240 10% 3.9%)", // foreground
+  },
+  dark: {
+    background: "hsl(240 10% 3.9%)", // background
+    border: "hsl(240 3.7% 15.9%)", // border
+    card: "hsl(240 10% 3.9%)", // card
+    notification: "hsl(0 72% 51%)", // destructive
+    primary: "hsl(0 0% 98%)", // primary
+    text: "hsl(0 0% 98%)", // foreground
+  },
+};

apps/cli/template/base/apps/native/lib/use-color-scheme.ts

@@ -0,0 +1,12 @@
+import { useColorScheme as useNativewindColorScheme } from "nativewind";
+
+export function useColorScheme() {
+  const { colorScheme, setColorScheme, toggleColorScheme } =
+    useNativewindColorScheme();
+  return {
+    colorScheme: colorScheme ?? "dark",
+    isDarkColorScheme: colorScheme === "dark",
+    setColorScheme,
+    toggleColorScheme,
+  };
+}

apps/cli/template/base/apps/native/metro.config.js

@@ -0,0 +1,57 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require("expo/metro-config");
+const { FileStore } = require("metro-cache");
+const { withNativeWind } = require("nativewind/metro");
+const path = require("path");
+
+const config = withTurborepoManagedCache(
+  withMonorepoPaths(
+    withNativeWind(getDefaultConfig(__dirname), {
+      input: "./global.css",
+      configPath: "./tailwind.config.js",
+    }),
+  ),
+);
+
+config.resolver.unstable_enablePackageExports = true;
+
+module.exports = config;
+
+/**
+ * Add the monorepo paths to the Metro config.
+ * This allows Metro to resolve modules from the monorepo.
+ *
+ * @see https://docs.expo.dev/guides/monorepos/#modify-the-metro-config
+ * @param {import('expo/metro-config').MetroConfig} config
+ * @returns {import('expo/metro-config').MetroConfig}
+ */
+function withMonorepoPaths(config) {
+  const projectRoot = __dirname;
+  const workspaceRoot = path.resolve(projectRoot, "../..");
+
+  // #1 - Watch all files in the monorepo
+  config.watchFolders = [workspaceRoot];
+
+  // #2 - Resolve modules within the project's `node_modules` first, then all monorepo modules
+  config.resolver.nodeModulesPaths = [
+    path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "node_modules"),
+  ];
+
+  return config;
+}
+
+/**
+ * Move the Metro cache to the `.cache/metro` folder.
+ * If you have any environment variables, you can configure Turborepo to invalidate it when needed.
+ *
+ * @see https://turbo.build/repo/docs/reference/configuration#env
+ * @param {import('expo/metro-config').MetroConfig} config
+ * @returns {import('expo/metro-config').MetroConfig}
+ */
+function withTurborepoManagedCache(config) {
+  config.cacheStores = [
+    new FileStore({ root: path.join(__dirname, ".cache/metro") }),
+  ];
+  return config;
+}

apps/cli/template/base/apps/native/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "native",
+  "version": "1.0.0",
+  "main": "expo-router/entry",
+  "scripts": {
+    "dev": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.4",
+    "@react-navigation/bottom-tabs": "^7.2.0",
+    "@react-navigation/drawer": "^7.1.1",
+    "@react-navigation/native": "^7.0.14",
+    "@tanstack/react-form": "^1.0.5",
+    "@tanstack/react-query": "^5.69.2",
+    "@trpc/client": "^11.0.0",
+    "@trpc/server": "^11.0.0",
+    "@trpc/tanstack-react-query": "^11.0.0",
+    "expo": "^52.0.41",
+    "expo-constants": "~17.0.8",
+    "expo-linking": "~7.0.5",
+    "expo-navigation-bar": "~4.0.8",
+    "expo-router": "~4.0.19",
+    "expo-status-bar": "~2.0.1",
+    "expo-system-ui": "~4.0.8",
+    "expo-web-browser": "~14.0.2",
+    "nativewind": "^4.1.23",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.7",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "3.16.2",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-web": "~0.19.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@types/react": "~18.3.12",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.8.2"
+  },
+  "private": true
+}

apps/cli/template/base/apps/native/tailwind.config.js

@@ -0,0 +1,32 @@
+const { hairlineWidth } = require("nativewind/theme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  content: ["./app/**/*.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}"],
+
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+        },
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+    },
+  },
+  plugins: [],
+};

apps/cli/template/base/apps/native/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
+  ]
+}

apps/cli/template/base/apps/native/utils/trpc.ts

@@ -0,0 +1,19 @@
+import type { AppRouter } from "../../server/src/routers";
+import { QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+
+export const queryClient = new QueryClient();
+
+const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${process.env.EXPO_PUBLIC_SERVER_URL}/trpc`,
+    }),
+  ],
+});
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

apps/cli/template/base/apps/web/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "client",
+	"name": "web",
 	"version": "0.0.0",
 	"private": true,
 	"type": "module",

apps/cli/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} />);
+}

apps/cli/template/base/apps/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>()({

apps/cli/template/base/apps/web/src/routes/index.tsx

@@ -1,7 +1,8 @@
-import { trpc } from "@/utils/trpc";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { ArrowRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { ArrowRight } from "lucide-react";
 
 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..."

apps/cli/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,
+});