mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
add nuxt and expo with orpc
This commit is contained in:
Aman Varshney
@@ -0,0 +1,6 @@
|
||||
import {
|
||||
createStartAPIHandler,
|
||||
defaultAPIFileRouteHandler,
|
||||
} from "@tanstack/react-start/api";
|
||||
|
||||
export default createStartAPIHandler(defaultAPIFileRouteHandler);
|
||||
@@ -0,0 +1,8 @@
|
||||
import { StartClient } from "@tanstack/react-start";
|
||||
import { hydrateRoot } from "react-dom/client";
|
||||
|
||||
import { createRouter } from "./router";
|
||||
|
||||
const router = createRouter();
|
||||
|
||||
hydrateRoot(document, <StartClient router={router} />);
|
||||
@@ -0,0 +1,102 @@
|
||||
import {
|
||||
QueryCache,
|
||||
QueryClient,
|
||||
QueryClientProvider,
|
||||
} from "@tanstack/react-query";
|
||||
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")}}
|
||||
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")}}
|
||||
import { orpc, ORPCContext, queryClient } from "./utils/orpc";
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq api "trpc")}}
|
||||
export const queryClient = new QueryClient({
|
||||
queryCache: new QueryCache({
|
||||
onError: (error) => {
|
||||
toast.error(error.message, {
|
||||
action: {
|
||||
label: "retry",
|
||||
onClick: () => {
|
||||
queryClient.invalidateQueries();
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
}),
|
||||
defaultOptions: { queries: { staleTime: 60 * 1000 } },
|
||||
});
|
||||
|
||||
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, {
|
||||
...options,
|
||||
credentials: "include",
|
||||
});
|
||||
},
|
||||
{{/if}}
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
const trpc = createTRPCOptionsProxy({
|
||||
client: trpcClient,
|
||||
queryClient: queryClient,
|
||||
});
|
||||
{{/if}}
|
||||
|
||||
|
||||
export const createRouter = () => {
|
||||
const router = createTanstackRouter({
|
||||
routeTree,
|
||||
scrollRestoration: true,
|
||||
defaultPreloadStaleTime: 0,
|
||||
{{#if (eq api "trpc")}}
|
||||
context: { trpc, queryClient },
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
context: { orpc, queryClient },
|
||||
{{/if}}
|
||||
defaultPendingComponent: () => <Loader />,
|
||||
defaultNotFoundComponent: () => <div>Not Found</div>,
|
||||
Wrap: ({ children }) => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{{#if (eq api "trpc")}}
|
||||
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
|
||||
{children}
|
||||
</TRPCProvider>
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
<ORPCContext.Provider value={orpc}>
|
||||
{children}
|
||||
</ORPCContext.Provider>
|
||||
{{/if}}
|
||||
</QueryClientProvider>
|
||||
),
|
||||
});
|
||||
|
||||
return router;
|
||||
};
|
||||
|
||||
// Register the router instance for type safety
|
||||
declare module "@tanstack/react-router" {
|
||||
interface Register {
|
||||
router: ReturnType<typeof createRouter>;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
import {
|
||||
HeadContent,
|
||||
Outlet,
|
||||
Scripts,
|
||||
createRootRouteWithContext,
|
||||
useRouterState,
|
||||
} from "@tanstack/react-router";
|
||||
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")}}
|
||||
export interface RouterAppContext {
|
||||
trpc: TRPCOptionsProxy<AppRouter>;
|
||||
queryClient: QueryClient;
|
||||
}
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
export interface RouterAppContext {
|
||||
orpc: typeof orpc;
|
||||
queryClient: QueryClient;
|
||||
}
|
||||
{{/if}}
|
||||
|
||||
export const Route = createRootRouteWithContext<RouterAppContext>()({
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
charSet: "utf-8",
|
||||
},
|
||||
{
|
||||
name: "viewport",
|
||||
content: "width=device-width, initial-scale=1",
|
||||
},
|
||||
{
|
||||
title: "My App",
|
||||
},
|
||||
],
|
||||
links: [
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href: appCss,
|
||||
},
|
||||
],
|
||||
}),
|
||||
|
||||
component: RootDocument,
|
||||
});
|
||||
|
||||
function RootDocument() {
|
||||
const isFetching = useRouterState({ select: (s) => s.isLoading });
|
||||
|
||||
return (
|
||||
<html lang="en" className="dark">
|
||||
<head>
|
||||
<HeadContent />
|
||||
</head>
|
||||
<body>
|
||||
<div className="grid h-svh grid-rows-[auto_1fr]">
|
||||
<Header />
|
||||
{isFetching ? <Loader /> : <Outlet />}
|
||||
</div>
|
||||
<Toaster richColors />
|
||||
<TanStackRouterDevtools position="bottom-left" />
|
||||
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
{{#if (eq api "trpc")}}
|
||||
import { useTRPC } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import { useORPC } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: HomeComponent,
|
||||
});
|
||||
|
||||
const TITLE_TEXT = `
|
||||
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
||||
██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
|
||||
██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝
|
||||
██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗
|
||||
██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║
|
||||
╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
|
||||
|
||||
████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗
|
||||
╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
|
||||
██║ ███████╗ ██║ ███████║██║ █████╔╝
|
||||
██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗
|
||||
██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗
|
||||
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝
|
||||
`;
|
||||
|
||||
function HomeComponent() {
|
||||
{{#if (eq api "trpc")}}
|
||||
const trpc = useTRPC();
|
||||
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
const orpc = useORPC();
|
||||
const healthCheck = useQuery(orpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl px-4 py-2">
|
||||
<pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
|
||||
<div className="grid gap-6">
|
||||
<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"}`}
|
||||
/>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{healthCheck.isLoading
|
||||
? "Checking..."
|
||||
: healthCheck.data
|
||||
? "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"
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureItem({
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<li className="border-primary border-l-2 py-1 pl-3">
|
||||
<h3 className="font-medium">{title}</h3>
|
||||
<p className="text-muted-foreground text-sm">{description}</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
12
apps/cli/templates/frontend/react/tanstack-start/src/ssr.tsx
Normal file
12
apps/cli/templates/frontend/react/tanstack-start/src/ssr.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { getRouterManifest } from "@tanstack/react-start/router-manifest";
|
||||
import {
|
||||
createStartHandler,
|
||||
defaultStreamHandler,
|
||||
} from "@tanstack/react-start/server";
|
||||
|
||||
import { createRouter } from "./router";
|
||||
|
||||
export default createStartHandler({
|
||||
createRouter,
|
||||
getRouterManifest,
|
||||
})(defaultStreamHandler);
|
||||
Reference in New Issue
Block a user