# React Router MPA

          # Default template combinations

          - template: "default"

            rpc: true

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Default + RPC + No TanStack Query + React Router MPA + ESLint"

          - template: "default"

            rpc: true

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Default + RPC + No TanStack Query + React Router MPA + Biome"

          - template: "default"

            rpc: false

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Default + No RPC + No TanStack Query + React Router MPA + ESLint"

          - template: "default"

            rpc: false

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Default + No RPC + No TanStack Query + React Router MPA + Biome"

          - template: "default"

            rpc: true

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Default + RPC + TanStack Query + React Router MPA + ESLint"

          - template: "default"

            rpc: true

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Default + RPC + TanStack Query + React Router MPA + Biome"

          - template: "default"

            rpc: false

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Default + No RPC + TanStack Query + React Router MPA + ESLint"

          - template: "default"

            rpc: false

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Default + No RPC + TanStack Query + React Router MPA + Biome"

          # Tailwind template combinations

          - template: "tailwind"

            rpc: true

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Tailwind + RPC + No TanStack Query + React Router MPA + ESLint"

          - template: "tailwind"

            rpc: true

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Tailwind + RPC + No TanStack Query + React Router MPA + Biome"

          - template: "tailwind"

            rpc: false

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Tailwind + No RPC + No TanStack Query + React Router MPA + ESLint"

          - template: "tailwind"

            rpc: false

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Tailwind + No RPC + No TanStack Query + React Router MPA + Biome"

          - template: "tailwind"

            rpc: true

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Tailwind + RPC + TanStack Query + React Router MPA + ESLint"

          - template: "tailwind"

            rpc: true

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Tailwind + RPC + TanStack Query + React Router MPA + Biome"

          - template: "tailwind"

            rpc: false

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Tailwind + No RPC + TanStack Query + React Router MPA + ESLint"

          - template: "tailwind"

            rpc: false

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Tailwind + No RPC + TanStack Query + React Router MPA + Biome"

          # Shadcn template combinations

          - template: "shadcn"

            rpc: true

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Shadcn + RPC + No TanStack Query + React Router MPA + ESLint"

          - template: "shadcn"

            rpc: true

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Shadcn + RPC + No TanStack Query + React Router MPA + Biome"

          - template: "shadcn"

            rpc: false

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Shadcn + No RPC + No TanStack Query + React Router MPA + ESLint"

          - template: "shadcn"

            rpc: false

            tanstackQuery: false

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Shadcn + No RPC + No TanStack Query + React Router MPA + Biome"

          - template: "shadcn"

            rpc: true

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Shadcn + RPC + TanStack Query + React Router MPA + ESLint"

          - template: "shadcn"

            rpc: true

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Shadcn + RPC + TanStack Query + React Router MPA + Biome"

          - template: "shadcn"

            rpc: false

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "eslint"

            test_name: "Shadcn + No RPC + TanStack Query + React Router MPA + ESLint"

          - template: "shadcn"

            rpc: false

            tanstackQuery: true

            router: "reactroutermpa"

            linter: "biome"

            test_name: "Shadcn + No RPC + TanStack Query + React Router MPA + Biome"

          # Check for expected files based on router type

          if [ "${{ matrix.router }}" = "reactroutermpa" ]; then

            # React Router MPA has different build structure (client-side only)

            if [ ! -d "client/dist/client" ]; then

              echo "❌ Client build incomplete - dist/client directory not found"

              exit 1

            fi

            # Verify server build (separate from React Router MPA)

            if [ ! -f "server/dist/index.js" ]; then

              echo "❌ Server build incomplete - index.js not found"

              exit 1

            fi

            echo "✅ React Router MPA build verification passed for ${{ matrix.test_name }}"

          else

            # Standard build structure

            if [ ! -f "client/dist/index.html" ]; then

              echo "❌ Client build incomplete - index.html not found"

              exit 1

            fi

            if [ ! -f "server/dist/index.js" ]; then

              echo "❌ Server build incomplete - index.js not found"

              exit 1

            fi

            echo "✅ Build verification passed for ${{ matrix.test_name }}"

test-projects/*

		"specify a client router (none, reactrouter, reactroutermpa, tanstackrouter)",

import path from "node:path";

import fs from "fs-extra";

import type { ProjectOptions } from "@/types";

import yoctoSpinner from "yocto-spinner";

import pc from "picocolors";

import { consola } from "consola";

import { addPackageDependency } from "@/utils/add-package-dependency";

import { EXTRAS_DIR } from "@/utils";

import { nameGenerator } from "@/utils/name-generator";

export const reactRouterMpaInstaller = async (

	options: Required<ProjectOptions>,

): Promise<boolean> => {

	const spinner = yoctoSpinner({

		text: "Setting up React Router MPA...",

	}).start();

	try {

		const { projectName, rpc, shadcn, tailwind, tanstackQuery } = options;

		const projectPath = path.resolve(process.cwd(), projectName);

		spinner.text = "Installing React Router MPA dependencies...";

		await addPackageDependency({

			dependencies: [

				"react-router",

				"@react-router/dev",

				"@react-router/node",

				"@react-router/serve",

				"vite-tsconfig-paths",

				"isbot",

			],

			target: "client",

			projectName,

		});

		// Copy root.tsx

		const rootTsxSrc = path.join(

			EXTRAS_DIR,

			"client",

			"src",

			"root.tsx",

			"root.tsx",

		);

		const rootTsxTarget = path.join(projectPath, "client", "src", "root.tsx");

		fs.copySync(rootTsxSrc, rootTsxTarget);

		// Copy routes.ts

		const routesTsSrc = path.join(

			EXTRAS_DIR,

			"client",

			"src",

			"routes.ts",

			"routes.ts",

		);

		const routesTsTarget = path.join(projectPath, "client", "src", "routes.ts");

		fs.copySync(routesTsSrc, routesTsTarget);

		// Create routes directory and copy home.tsx

		const routesDir = path.join(projectPath, "client", "src", "routes");

		fs.ensureDirSync(routesDir);

		const homeTsxSrc = path.join(

			EXTRAS_DIR,

			"client",

			"src",

			"routes",

			"home.tsx",

			"home.tsx",

		);

		const homeTsxTarget = path.join(routesDir, "home.tsx");

		fs.copySync(homeTsxSrc, homeTsxTarget);

		// Copy ClientOnly component

		const clientOnlySrc = path.join(

			EXTRAS_DIR,

			"client",

			"src",

			"components",

			"ClientOnly.tsx",

			"ClientOnly.tsx",

		);

		const clientOnlyTarget = path.join(

			projectPath,

			"client",

			"src",

			"components",

			"ClientOnly.tsx",

		);

		fs.copySync(clientOnlySrc, clientOnlyTarget);

		// Update Home component with ClientOnly wrapper

		const homeTsxTemplate = nameGenerator("Home.tsx", {

			reactroutermpa: true,

			rpc,

			shadcn,

			tailwind,

			tanstackQuery,

		});

		const homeComponentSrc = path.join(

			EXTRAS_DIR,

			"client",

			"src",

			"components",

			"Home.tsx",

			homeTsxTemplate,

		);

		const homeComponentTarget = path.join(

			projectPath,

			"client",

			"src",

			"components",

			"Home.tsx",

		);

		fs.copySync(homeComponentSrc, homeComponentTarget);

		// Remove unused files (App.tsx and main.tsx are not used in MPA setup)

		const appTsxPath = path.join(projectPath, "client", "src", "App.tsx");

		const mainTsxPath = path.join(projectPath, "client", "src", "main.tsx");

		if (fs.existsSync(appTsxPath)) {

			fs.removeSync(appTsxPath);

		}

		if (fs.existsSync(mainTsxPath)) {

			fs.removeSync(mainTsxPath);

		}

		// Copy react-router.config.ts

		const reactRouterConfigSrc = path.join(

			EXTRAS_DIR,

			"client",

			"react-router.config.ts",

			"react-router.config.ts",

		);

		const reactRouterConfigTarget = path.join(

			projectPath,

			"client",

			"react-router.config.ts",

		);

		fs.copySync(reactRouterConfigSrc, reactRouterConfigTarget);

		// Copy tsconfig.app.json

		const tsconfigAppSrc = path.join(

			EXTRAS_DIR,

			"client",

			"tsconfig.app.json",

			"tsconfig.app.json",

		);

		const tsconfigAppTarget = path.join(

			projectPath,

			"client",

			"tsconfig.app.json",

		);

		fs.copySync(tsconfigAppSrc, tsconfigAppTarget);

		// Update vite.config.ts

		const viteConfigTemplate = nameGenerator("vite.config.ts", {

			reactroutermpa: true,

			shadcn,

			tailwind,

		});

		const viteConfigSrc = path.join(

			EXTRAS_DIR,

			"client",

			"vite.config.ts",

			viteConfigTemplate,

		);

		const viteConfigTarget = path.join(projectPath, "client", "vite.config.ts");

		fs.copySync(viteConfigSrc, viteConfigTarget);

		// Update package.json scripts

		const packageJsonPath = path.join(projectPath, "client", "package.json");

		const packageJson = fs.readJsonSync(packageJsonPath);

		packageJson.scripts = {

			...packageJson.scripts,

			dev: "react-router dev",

			build: "react-router typegen && tsc -b && react-router build",

			typecheck: "react-router typegen && tsc",

		};

		fs.writeJsonSync(packageJsonPath, packageJson, { spaces: 2 });

		spinner.success("React Router MPA setup completed");

		return true;

	} catch (err: unknown) {

		spinner.error("Failed to set up React Router MPA");

		if (err instanceof Error) {

			consola.error(pc.red("Error:"), err.message);

		} else {

			consola.error(pc.red("Error: Unknown error"));

		}

		return false;

	}

};

import { reactRouterMpaInstaller } from "@/installers/react-router-mpa";

				break;

			}

			case "reactroutermpa": {

				await reactRouterMpaInstaller(options);

					{ label: "React Router MPA", value: "reactroutermpa" },

		router = routerResponse as

			| "none"

			| "reactrouter"

			| "reactroutermpa"

			| "tanstackrouter";

import type { Config } from "@react-router/dev/config";

export default {

	buildDirectory: "dist",

	appDirectory: "src",

	ssr: false,

	async prerender() {

		return ["/"];

	},

} satisfies Config;

import {

	useEffect,

	useState,

	type PropsWithChildren,

	type ReactNode,

} from "react";

type ClientOnlyProps = PropsWithChildren & {

	fallback?: ReactNode;

};

const ClientOnly = ({ children, fallback }: ClientOnlyProps) => {

	const [isClient, setIsClient] = useState(false);

	useEffect(() => {

		setIsClient(true);

	}, []);

	return isClient ? children : fallback;

};

export default ClientOnly;

import { useState } from "react";

import beaver from "@/assets/beaver.svg";

import { Button } from "@/components/ui/button";

import { hcWithType } from "server/dist/client";

import { useMutation } from "@tanstack/react-query";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

const client = hcWithType(SERVER_URL);

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;

function Home() {

	const [data, setData] = useState<

		Awaited<ReturnType<ResponseType["json"]>> | undefined

	>();

	const { mutate: sendRequest } = useMutation({

		mutationFn: async () => {

			try {

				const res = await client.hello.$get();

				if (!res.ok) {

					console.log("Error fetching data");

					return;

				}

				const data = await res.json();

				setData(data);

			} catch (error) {

				console.log(error);

			}

		},

	});

	return (

		<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">

			<a

				href="https://github.com/stevedylandev/bhvr"

				target="_blank"

				rel="noopener"

			>

				<img

					src={beaver}

					className="w-16 h-16 cursor-pointer"

					alt="beaver logo"

				/>

			</a>

			<h1 className="text-5xl font-black">bhvr</h1>

			<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="flex items-center gap-4">

					<Button onClick={() => sendRequest()}>Call API</Button>

					<Button variant="secondary" asChild>

						<a target="_blank" href="https://bhvr.dev" rel="noopener">

							Docs

						</a>

					</Button>

				</div>

				{data && (

					<pre className="bg-gray-100 p-4 rounded-md">

						<code>

							Message: {data.message} <br />

							Success: {data.success.toString()}

						</code>

					</pre>

				)}

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "@/assets/beaver.svg";

import { Button } from "@/components/ui/button";

import { hcWithType } from "server/dist/client";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

const client = hcWithType(SERVER_URL);

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;

function Home() {

	const [data, setData] = useState<

		Awaited<ReturnType<ResponseType["json"]>> | undefined

	>();

	async function sendRequest() {

		try {

			const res = await client.hello.$get();

			if (!res.ok) {

				console.log("Error fetching data");

				return;

			}

			const data = await res.json();

			setData(data);

		} catch (error) {

			console.log(error);

		}

	}

	return (

		<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">

			<a

				href="https://github.com/stevedylandev/bhvr"

				target="_blank"

				rel="noopener"

			>

				<img

					src={beaver}

					className="w-16 h-16 cursor-pointer"

					alt="beaver logo"

				/>

			</a>

			<h1 className="text-5xl font-black">bhvr</h1>

			<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="flex items-center gap-4">

					<Button onClick={sendRequest}>Call API</Button>

					<Button variant="secondary" asChild>

						<a target="_blank" href="https://bhvr.dev" rel="noopener">

							Docs

						</a>

					</Button>

				</div>

				{data && (

					<pre className="bg-gray-100 p-4 rounded-md">

						<code>

							Message: {data.message} <br />

							Success: {data.success.toString()}

						</code>

					</pre>

				)}

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "../assets/beaver.svg";

import { hcWithType } from "server/dist/client";

import { useMutation } from "@tanstack/react-query";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

const client = hcWithType(SERVER_URL);

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;

function Home() {

	const [data, setData] = useState<

		Awaited<ReturnType<ResponseType["json"]>> | undefined

	>();

	const { mutate: sendRequest } = useMutation({

		mutationFn: async () => {

			try {

				const res = await client.hello.$get();

				if (!res.ok) {

					console.log("Error fetching data");

					return;

				}

				const data = await res.json();

				setData(data);

			} catch (error) {

				console.log(error);

			}

		},

	});

	return (

		<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">

			<a

				href="https://github.com/stevedylandev/bhvr"

				target="_blank"

				rel="noopener"

			>

				<img

					src={beaver}

					className="w-16 h-16 cursor-pointer"

					alt="beaver logo"

				/>

			</a>

			<h1 className="text-5xl font-black">bhvr</h1>

			<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="flex items-center gap-4">

					<button

						type="button"

						onClick={() => sendRequest()}

						className="bg-black text-white px-2.5 py-1.5 rounded-md"

					>

						Call API

					</button>

					<a

						target="_blank"

						href="https://bhvr.dev"

						className="border-1 border-black text-black px-2.5 py-1.5 rounded-md"

						rel="noopener"

					>

						Docs

					</a>

				</div>

				{data && (

					<pre className="bg-gray-100 p-4 rounded-md">

						<code>

							Message: {data.message} <br />

							Success: {data.success.toString()}

						</code>

					</pre>

				)}

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "../assets/beaver.svg";

import { hcWithType } from "server/dist/client";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

const client = hcWithType(SERVER_URL);

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;

function Home() {

	const [data, setData] = useState<

		Awaited<ReturnType<ResponseType["json"]>> | undefined

	>();

	async function sendRequest() {

		try {

			const res = await client.hello.$get();

			if (!res.ok) {

				console.log("Error fetching data");

				return;

			}

			const data = await res.json();

			setData(data);

		} catch (error) {

			console.log(error);

		}

	}

	return (

		<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">

			<a

				href="https://github.com/stevedylandev/bhvr"

				target="_blank"

				rel="noopener"

			>

				<img

					src={beaver}

					className="w-16 h-16 cursor-pointer"

					alt="beaver logo"

				/>

			</a>

			<h1 className="text-5xl font-black">bhvr</h1>

			<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="flex items-center gap-4">

					<button

						type="button"

						onClick={sendRequest}

						className="bg-black text-white px-2.5 py-1.5 rounded-md"

					>

						Call API

					</button>

					<a

						target="_blank"

						href="https://bhvr.dev"

						className="border-1 border-black text-black px-2.5 py-1.5 rounded-md"

						rel="noopener"

					>

						Docs

					</a>

				</div>

				{data && (

					<pre className="bg-gray-100 p-4 rounded-md">

						<code>

							Message: {data.message} <br />

							Success: {data.success.toString()}

						</code>

					</pre>

				)}

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "../assets/beaver.svg";

import { hcWithType } from "server/dist/client";

import { useMutation } from "@tanstack/react-query";

import "../App.css";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

const client = hcWithType(SERVER_URL);

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;

function Home() {

	const [data, setData] = useState<

		Awaited<ReturnType<ResponseType["json"]>> | undefined

	>();

	const { mutate: sendRequest } = useMutation({

		mutationFn: async () => {

			try {

				const res = await client.hello.$get();

				if (!res.ok) {

					console.log("Error fetching data");

					return;

				}

				const data = await res.json();

				setData(data);

			} catch (error) {

				console.log(error);

			}

		},

	});

	return (

		<div

			style={{

				maxWidth: "1280px",

				margin: "0 auto",

				padding: "2rem",

				textAlign: "center",

			}}

		>

			<div>

				<a

					href="https://github.com/stevedylandev/bhvr"

					target="_blank"

					rel="noopener"

				>

					<img src={beaver} className="logo" alt="beaver logo" />

				</a>

			</div>

			<h1>bhvr</h1>

			<h2>Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="card">

					<div className="button-container">

						<button type="button" onClick={() => sendRequest()}>

							Call API

						</button>

						<a

							className="docs-link"

							target="_blank"

							href="https://bhvr.dev"

							rel="noopener"

						>

							Docs

						</a>

					</div>

					{data && (

						<pre className="response">

							<code>

								Message: {data.message} <br />

								Success: {data.success.toString()}

							</code>

						</pre>

					)}

				</div>

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "../assets/beaver.svg";

import { hcWithType } from "server/dist/client";

import "../App.css";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

const client = hcWithType(SERVER_URL);

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;

function Home() {

	const [data, setData] = useState<

		Awaited<ReturnType<ResponseType["json"]>> | undefined

	>();

	async function sendRequest() {

		try {

			const res = await client.hello.$get();

			if (!res.ok) {

				console.log("Error fetching data");

				return;

			}

			const data = await res.json();

			setData(data);

		} catch (error) {

			console.log(error);

		}

	}

	return (

		<div

			style={{

				maxWidth: "1280px",

				margin: "0 auto",

				padding: "2rem",

				textAlign: "center",

			}}

		>

			<div>

				<a

					href="https://github.com/stevedylandev/bhvr"

					target="_blank"

					rel="noopener"

				>

					<img src={beaver} className="logo" alt="beaver logo" />

				</a>

			</div>

			<h1>bhvr</h1>

			<h2>Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="card">

					<div className="button-container">

						<button type="button" onClick={sendRequest}>

							Call API

						</button>

						<a

							className="docs-link"

							target="_blank"

							href="https://bhvr.dev"

							rel="noopener"

						>

							Docs

						</a>

					</div>

					{data && (

						<pre className="response">

							<code>

								Message: {data.message} <br />

								Success: {data.success.toString()}

							</code>

						</pre>

					)}

				</div>

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "@/assets/beaver.svg";

import type { ApiResponse } from "shared";

import { Button } from "@/components/ui/button";

import { useMutation } from "@tanstack/react-query";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

function Home() {

	const [data, setData] = useState<ApiResponse | undefined>();

	const { mutate: sendRequest } = useMutation({

		mutationFn: async () => {

			try {

				const req = await fetch(`${SERVER_URL}/hello`);

				const res: ApiResponse = await req.json();

				setData(res);

			} catch (error) {

				console.log(error);

			}

		},

	});

	return (

		<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">

			<a

				href="https://github.com/stevedylandev/bhvr"

				target="_blank"

				rel="noopener"

			>

				<img

					src={beaver}

					className="w-16 h-16 cursor-pointer"

					alt="beaver logo"

				/>

			</a>

			<h1 className="text-5xl font-black">bhvr</h1>

			<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="flex items-center gap-4">

					<Button onClick={() => sendRequest()}>Call API</Button>

					<Button variant="secondary" asChild>

						<a target="_blank" href="https://bhvr.dev" rel="noopener">

							Docs

						</a>

					</Button>

				</div>

				{data && (

					<pre className="bg-gray-100 p-4 rounded-md">

						<code>

							Message: {data.message} <br />

							Success: {data.success.toString()}

						</code>

					</pre>

				)}

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "@/assets/beaver.svg";

import type { ApiResponse } from "shared";

import { Button } from "@/components/ui/button";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

function Home() {

	const [data, setData] = useState<ApiResponse | undefined>();

	async function sendRequest() {

		try {

			const req = await fetch(`${SERVER_URL}/hello`);

			const res: ApiResponse = await req.json();

			setData(res);

		} catch (error) {

			console.log(error);

		}

	}

	return (

		<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">

			<a

				href="https://github.com/stevedylandev/bhvr"

				target="_blank"

				rel="noopener"

			>

				<img

					src={beaver}

					className="w-16 h-16 cursor-pointer"

					alt="beaver logo"

				/>

			</a>

			<h1 className="text-5xl font-black">bhvr</h1>

			<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="flex items-center gap-4">

					<Button onClick={sendRequest}>Call API</Button>

					<Button variant="secondary" asChild>

						<a target="_blank" href="https://bhvr.dev" rel="noopener">

							Docs

						</a>

					</Button>

				</div>

				{data && (

					<pre className="bg-gray-100 p-4 rounded-md">

						<code>

							Message: {data.message} <br />

							Success: {data.success.toString()}

						</code>

					</pre>

				)}

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "../assets/beaver.svg";

import type { ApiResponse } from "shared";

import { useMutation } from "@tanstack/react-query";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

function Home() {

	const [data, setData] = useState<ApiResponse | undefined>();

	const { mutate: sendRequest } = useMutation({

		mutationFn: async () => {

			try {

				const req = await fetch(`${SERVER_URL}/hello`);

				const res: ApiResponse = await req.json();

				setData(res);

			} catch (error) {

				console.log(error);

			}

		},

	});

	return (

		<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">

			<a

				href="https://github.com/stevedylandev/bhvr"

				target="_blank"

				rel="noopener"

			>

				<img

					src={beaver}

					className="w-16 h-16 cursor-pointer"

					alt="beaver logo"

				/>

			</a>

			<h1 className="text-5xl font-black">bhvr</h1>

			<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="flex items-center gap-4">

					<button

						type="button"

						onClick={() => sendRequest()}

						className="bg-black text-white px-2.5 py-1.5 rounded-md"

					>

						Call API

					</button>

					<a

						target="_blank"

						href="https://bhvr.dev"

						className="border-1 border-black text-black px-2.5 py-1.5 rounded-md"

						rel="noopener"

					>

						Docs

					</a>

				</div>

				{data && (

					<pre className="bg-gray-100 p-4 rounded-md">

						<code>

							Message: {data.message} <br />

							Success: {data.success.toString()}

						</code>

					</pre>

				)}

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "../assets/beaver.svg";

import type { ApiResponse } from "shared";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

function Home() {

	const [data, setData] = useState<ApiResponse | undefined>();

	async function sendRequest() {

		try {

			const req = await fetch(`${SERVER_URL}/hello`);

			const res: ApiResponse = await req.json();

			setData(res);

		} catch (error) {

			console.log(error);

		}

	}

	return (

		<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">

			<a

				href="https://github.com/stevedylandev/bhvr"

				target="_blank"

				rel="noopener"

			>

				<img

					src={beaver}

					className="w-16 h-16 cursor-pointer"

					alt="beaver logo"

				/>

			</a>

			<h1 className="text-5xl font-black">bhvr</h1>

			<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="flex items-center gap-4">

					<button

						type="button"

						onClick={sendRequest}

						className="bg-black text-white px-2.5 py-1.5 rounded-md"

					>

						Call API

					</button>

					<a

						target="_blank"

						href="https://bhvr.dev"

						className="border-1 border-black text-black px-2.5 py-1.5 rounded-md"

						rel="noopener"

					>

						Docs

					</a>

				</div>

				{data && (

					<pre className="bg-gray-100 p-4 rounded-md">

						<code>

							Message: {data.message} <br />

							Success: {data.success.toString()}

						</code>

					</pre>

				)}

			</ClientOnly>

		</div>

	);

}

export default Home;

import { useState } from "react";

import beaver from "../assets/beaver.svg";

import { useMutation } from "@tanstack/react-query";

import type { ApiResponse } from "shared";

import "../App.css";

import ClientOnly from "./ClientOnly";

const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";

function Home() {

	const [data, setData] = useState<ApiResponse | undefined>();

	const { mutate: sendRequest } = useMutation({

		mutationFn: async () => {

			const req = await fetch(`${SERVER_URL}/hello`);

			const res: ApiResponse = await req.json();

			setData(res);

		},

		onError: (err) => console.log(err),

	});

	return (

		<div

			style={{

				maxWidth: "1280px",

				margin: "0 auto",

				padding: "2rem",

				textAlign: "center",

			}}

		>

			<div>

				<a

					href="https://github.com/stevedylandev/bhvr"

					target="_blank"

					rel="noopener"

				>

					<img src={beaver} className="logo" alt="beaver logo" />

				</a>

			</div>

			<h1>bhvr</h1>

			<h2>Bun + Hono + Vite + React</h2>

			<p>A typesafe fullstack monorepo</p>

			<ClientOnly>

				<div className="card">

					<div className="button-container">

						<button type="button" onClick={() => sendRequest()}>

							Call API

						</button>

						<a

							className="docs-link"

							target="_blank"

							href="https://bhvr.dev"

							rel="noopener"

						>

							Docs

						</a>

					</div>

					{data && (

						<pre className="response">

							<code>

								Message: {data.message} <br />

								Success: {data.success.toString()}

							</code>

						</pre>

					)}

				</div>

			</ClientOnly>