Untitled

Source Tree:

```
frontend
├── dev.ts
├── bunfig.toml
├── package.json
├── router-plugin.ts
├── tsconfig.json
├── tmp
├── build.ts
└── src
    ├── index.html
    ├── script.tsx
    └── routes
        ├── index.tsx
        ├── __root.tsx
        ├── posts
        │   ├── index.tsx
        │   └── $postId.tsx
        ├── contact.tsx
        ├── _dashboard.tsx
        ├── _dashboard
        │   ├── settings.tsx
        │   └── dashboard.tsx
        ├── $.tsx
        ├── posts.tsx
        └── about.tsx

```

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/dev.ts`:

```````ts
import { BunRuntime } from "@effect/platform-bun";
import { Config, Effect } from "effect";
import index from "./src/index.html";

const program = Effect.gen(function* () {
	const port = yield* Config.port("FRONTEND_PORT").pipe(
		Config.withDefault(3000),
	);
	const backendPort = yield* Config.port("BACKEND_PORT").pipe(
		Config.withDefault(4000),
	);

	const proxyToBackend = (req: Bun.BunRequest) => {
		const url = new URL(req.url);
		const target = new URL(
			url.pathname + url.search,
			`http://localhost:${backendPort}`,
		);
		return fetch(target, req);
	};

	const server = Bun.serve({
		port,
		routes: {
			"/rpc/*": proxyToBackend,
			"/api/*": proxyToBackend,
			"/*": index,
		},
		development: { hmr: true, console: true },
	});

	yield* Effect.logInfo(`@app/frontend dev: ${server.url}`);
	return yield* Effect.never;
});

BunRuntime.runMain(program);

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/bunfig.toml`:

```````toml
[serve.static]
plugins = ["./router-plugin.ts"]

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/package.json`:

```````json
{
	"name": "@app/frontend",
	"type": "module",
	"private": true,
	"exports": {
		"./*": "./src/*.ts"
	},
	"scripts": {
		"lint": "bunx @biomejs/biome check --write && tsc -b",
		"dev": "bun --hot dev.ts",
		"build": "bun build.ts"
	},
	"dependencies": {
		"@effect/platform-bun": "catalog:effect:backend",
		"@pkg/shared": "workspace:*",
		"@tanstack/react-router": "^1.170.0",
		"@tanstack/react-router-devtools": "^1.167.0",
		"@tanstack/router-plugin": "file:./tmp/tanstack-router-plugin-1.168.1-1778914603.tgz",
		"react": "^19.0.0",
		"react-dom": "^19.0.0"
	},
	"devDependencies": {
		"@types/react": "^19.0.0",
		"@types/react-dom": "^19.0.0"
	}
}

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/router-plugin.ts`:

```````ts
import { tanstackRouter } from "@tanstack/router-plugin/bun";

// autoCodeSplitting is disabled under Bun for now: the code-splitter rewrites
// route imports with a `?tsr-split=...` query that unplugin's Bun adapter has
// no resolveId path for. File-based route generation works fine without it.
export default tanstackRouter({
	target: "react",
	autoCodeSplitting: false,
});

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/tsconfig.json`:

```````json
{
	"extends": "../../tsconfig.base.json",
	"include": ["src/**/*", "dev.ts"],
	"compilerOptions": {
		"outDir": "dist",
		"lib": ["ESNext", "DOM", "DOM.Iterable"],
		"paths": {
			"@/*": ["./src/*"]
		}
	}
}

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/build.ts`:

```````ts
import {
	tanstackRouter,
	tanstackRouterBunDefaultDefines,
} from "@tanstack/router-plugin/bun";

const result = await Bun.build({
	entrypoints: ["./src/index.html"],
	outdir: "./dist",
	plugins: [
		tanstackRouter({
			target: "react",
			autoCodeSplitting: false,
		}),
	],
	define: {
		...tanstackRouterBunDefaultDefines,
	},
});

if (!result.success) {
	for (const log of result.logs) console.error(log);
	process.exit(1);
}

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/index.html`:

```````html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>app</title>
	</head>
	<body>
		<div id="root"></div>
		<script type="module" src="./script.tsx"></script>
	</body>
</html>

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/script.tsx`:

```````tsx
import { createRouter, RouterProvider } from "@tanstack/react-router";
import { createRoot } from "react-dom/client";
import { routeTree } from "./routeTree.gen";

declare module "@tanstack/react-router" {
	interface Register {
		router: typeof router;
	}
}

const router = createRouter({ routeTree });

const container = document.getElementById("root");
if (container) createRoot(container).render(<RouterProvider router={router} />);

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/index.tsx`:

```````tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
	component: () => <h1>Index</h1>,
});

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/__root.tsx`:

```````tsx
import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";

export const Route = createRootRoute({
	component: RootLayout,
});

function RootLayout() {
	return (
		<>
			<header>
				<nav>
					<Link to="/">Home</Link>
					{" · "}
					<Link to="/about">About</Link>
					{" · "}
					<Link to="/posts">Posts</Link>
					{" · "}
					<Link to="/dashboard">Dashboard</Link>
					{" · "}
					<Link to="/does-not-exist">404 demo</Link>
				</nav>
			</header>
			<main>
				<Outlet />
			</main>
			<TanStackRouterDevtools />
		</>
	);
}

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/posts/index.tsx`:

```````tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/posts/")({
	component: () => <p>Pick a post above.</p>,
});

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/posts/$postId.tsx`:

```````tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/posts/$postId")({
	component: PostDetail,
});

function PostDetail() {
	const { postId } = Route.useParams();
	return <article>Post: {postId}</article>;
}

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/contact.tsx`:

```````tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/contact")({
	component: () => <h1>Contact (added live)</h1>,
});

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/_dashboard.tsx`:

```````tsx
import { createFileRoute, Link, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/_dashboard")({
	component: DashboardShell,
});

function DashboardShell() {
	return (
		<section>
			<aside>
				<strong>Dashboard</strong>
				<nav>
					<Link to="/dashboard">Home</Link>
					{" · "}
					<Link to="/settings">Settings</Link>
				</nav>
			</aside>
			<Outlet />
		</section>
	);
}

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/_dashboard/settings.tsx`:

```````tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/_dashboard/settings")({
	component: () => <h2>Settings</h2>,
});

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/_dashboard/dashboard.tsx`:

```````tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/_dashboard/dashboard")({
	component: () => <h2>Dashboard home</h2>,
});

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/$.tsx`:

```````tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/$")({
	component: NotFound,
});

function NotFound() {
	const { _splat } = Route.useParams();
	return <h2>Not found: /{_splat}</h2>;
}

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/posts.tsx`:

```````tsx
import { createFileRoute, Link, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/posts")({
	component: PostsLayout,
});

function PostsLayout() {
	return (
		<section>
			<header>
				<nav>
					<Link to="/posts">All posts</Link>
					{" · "}
					<Link to="/posts/$postId" params={{ postId: "hello-world" }}>
						hello-world
					</Link>
					{" · "}
					<Link to="/posts/$postId" params={{ postId: "second" }}>
						second
					</Link>
				</nav>
			</header>
			<Outlet />
		</section>
	);
}

```````

`/Users/praybh/Desktop/bun.monorepo/packages/frontend/src/routes/about.tsx`:

```````tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/about")({
	component: () => <h1>About</h1>,
});

```````