Skip to content

Commit 133f680

Browse files
roerohanroerohan
committed
fix: update the demo to include RPC descriptions
1 parent 59fba08 commit 133f680

File tree

5 files changed

+242
-42
lines changed

5 files changed

+242
-42
lines changed

‎packages/web/src/components/Header.tsx‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,39 @@
11
import { Link } from '@tanstack/react-router';
22

33
import { useState } from 'react';
4-
import { ChevronDown, ChevronRight, Home, Menu, Network, SquareFunction, StickyNote, X } from 'lucide-react';
4+
import { ChevronDown, ChevronRight, Home, Menu, Network, SquareFunction, StickyNote, X, Star } from 'lucide-react';
55

66
export default function Header() {
77
const [isOpen, setIsOpen] = useState(false);
88
const [groupedExpanded, setGroupedExpanded] = useState<Record<string, boolean>>({});
99

1010
return (
1111
<>
12-
<header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
13-
<button
14-
onClick={() => setIsOpen(true)}
15-
className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
16-
aria-label="Open menu"
12+
<header className="p-4 flex items-center justify-between bg-gray-800 text-white shadow-lg">
13+
<div className="flex items-center">
14+
<button
15+
onClick={() => setIsOpen(true)}
16+
className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
17+
aria-label="Open menu"
18+
>
19+
<Menu size={24} />
20+
</button>
21+
<h1 className="ml-4 text-xl font-semibold">
22+
<Link to="/">
23+
<img src="/tanstack-word-logo-white.svg" alt="TanStack Logo" className="h-10" />
24+
</Link>
25+
</h1>
26+
</div>
27+
<a
28+
href="https://github.com/roerohan/fullstack-monorepo-template"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-medium rounded-lg transition-colors flex items-center gap-2"
1732
>
18-
<Menu size={24} />
19-
</button>
20-
<h1 className="ml-4 text-xl font-semibold">
21-
<Link to="/">
22-
<img src="/tanstack-word-logo-white.svg" alt="TanStack Logo" className="h-10" />
23-
</Link>
24-
</h1>
33+
<Star className="w-4 h-4" />
34+
<span className="hidden sm:inline">Star on GitHub</span>
35+
<span className="sm:hidden">Star</span>
36+
</a>
2537
</header>
2638

2739
<aside

‎packages/web/src/routeTree.gen.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
import { Route as rootRouteImport } from './routes/__root'
1212
import { Route as IndexRouteImport } from './routes/index'
13+
import { Route as RpcIndexRouteImport } from './routes/rpc/index'
1314
import { Route as RpcSayHelloRouteImport } from './routes/rpc/say-hello'
1415
import { Route as RpcProcessBatchRouteImport } from './routes/rpc/process-batch'
1516
import { Route as RpcGetDataRouteImport } from './routes/rpc/get-data'
@@ -27,6 +28,11 @@ const IndexRoute = IndexRouteImport.update({
2728
path: '/',
2829
getParentRoute: () => rootRouteImport,
2930
} as any)
31+
const RpcIndexRoute = RpcIndexRouteImport.update({
32+
id: '/rpc/',
33+
path: '/rpc/',
34+
getParentRoute: () => rootRouteImport,
35+
} as any)
3036
const RpcSayHelloRoute = RpcSayHelloRouteImport.update({
3137
id: '/rpc/say-hello',
3238
path: '/rpc/say-hello',
@@ -89,6 +95,7 @@ export interface FileRoutesByFullPath {
8995
'/rpc/get-data': typeof RpcGetDataRoute
9096
'/rpc/process-batch': typeof RpcProcessBatchRoute
9197
'/rpc/say-hello': typeof RpcSayHelloRoute
98+
'/rpc': typeof RpcIndexRoute
9299
'/demo/api/names': typeof DemoApiNamesRoute
93100
'/demo/start/api-request': typeof DemoStartApiRequestRoute
94101
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
@@ -103,6 +110,7 @@ export interface FileRoutesByTo {
103110
'/rpc/get-data': typeof RpcGetDataRoute
104111
'/rpc/process-batch': typeof RpcProcessBatchRoute
105112
'/rpc/say-hello': typeof RpcSayHelloRoute
113+
'/rpc': typeof RpcIndexRoute
106114
'/demo/api/names': typeof DemoApiNamesRoute
107115
'/demo/start/api-request': typeof DemoStartApiRequestRoute
108116
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
@@ -118,6 +126,7 @@ export interface FileRoutesById {
118126
'/rpc/get-data': typeof RpcGetDataRoute
119127
'/rpc/process-batch': typeof RpcProcessBatchRoute
120128
'/rpc/say-hello': typeof RpcSayHelloRoute
129+
'/rpc/': typeof RpcIndexRoute
121130
'/demo/api/names': typeof DemoApiNamesRoute
122131
'/demo/start/api-request': typeof DemoStartApiRequestRoute
123132
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
@@ -134,6 +143,7 @@ export interface FileRouteTypes {
134143
| '/rpc/get-data'
135144
| '/rpc/process-batch'
136145
| '/rpc/say-hello'
146+
| '/rpc'
137147
| '/demo/api/names'
138148
| '/demo/start/api-request'
139149
| '/demo/start/server-funcs'
@@ -148,6 +158,7 @@ export interface FileRouteTypes {
148158
| '/rpc/get-data'
149159
| '/rpc/process-batch'
150160
| '/rpc/say-hello'
161+
| '/rpc'
151162
| '/demo/api/names'
152163
| '/demo/start/api-request'
153164
| '/demo/start/server-funcs'
@@ -162,6 +173,7 @@ export interface FileRouteTypes {
162173
| '/rpc/get-data'
163174
| '/rpc/process-batch'
164175
| '/rpc/say-hello'
176+
| '/rpc/'
165177
| '/demo/api/names'
166178
| '/demo/start/api-request'
167179
| '/demo/start/server-funcs'
@@ -177,6 +189,7 @@ export interface RootRouteChildren {
177189
RpcGetDataRoute: typeof RpcGetDataRoute
178190
RpcProcessBatchRoute: typeof RpcProcessBatchRoute
179191
RpcSayHelloRoute: typeof RpcSayHelloRoute
192+
RpcIndexRoute: typeof RpcIndexRoute
180193
DemoApiNamesRoute: typeof DemoApiNamesRoute
181194
DemoStartApiRequestRoute: typeof DemoStartApiRequestRoute
182195
DemoStartServerFuncsRoute: typeof DemoStartServerFuncsRoute
@@ -195,6 +208,13 @@ declare module '@tanstack/react-router' {
195208
preLoaderRoute: typeof IndexRouteImport
196209
parentRoute: typeof rootRouteImport
197210
}
211+
'/rpc/': {
212+
id: '/rpc/'
213+
path: '/rpc'
214+
fullPath: '/rpc'
215+
preLoaderRoute: typeof RpcIndexRouteImport
216+
parentRoute: typeof rootRouteImport
217+
}
198218
'/rpc/say-hello': {
199219
id: '/rpc/say-hello'
200220
path: '/rpc/say-hello'
@@ -281,6 +301,7 @@ const rootRouteChildren: RootRouteChildren = {
281301
RpcGetDataRoute: RpcGetDataRoute,
282302
RpcProcessBatchRoute: RpcProcessBatchRoute,
283303
RpcSayHelloRoute: RpcSayHelloRoute,
304+
RpcIndexRoute: RpcIndexRoute,
284305
DemoApiNamesRoute: DemoApiNamesRoute,
285306
DemoStartApiRequestRoute: DemoStartApiRequestRoute,
286307
DemoStartServerFuncsRoute: DemoStartServerFuncsRoute,

‎packages/web/src/routes/index.tsx‎

Lines changed: 73 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,32 @@
1-
import { createFileRoute } from '@tanstack/react-router';
2-
import { Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles } from 'lucide-react';
1+
import { createFileRoute, Link } from '@tanstack/react-router';
2+
import { Zap, Server, Route as RouteIcon, Shield, Network, Package } from 'lucide-react';
3+
import { sayHello } from './rpc/say-hello';
34

4-
export const Route = createFileRoute('/')({ component: App });
5+
export const Route = createFileRoute('/')({
6+
component: App,
7+
loader: async (ctx) => {
8+
// Extract name from search params
9+
const name = (ctx.location.search as { name?: string })?.name;
10+
11+
if (name) {
12+
// @ts-expect-error - createServerFn types don't properly infer data parameter
13+
return sayHello({ data: { name } });
14+
}
15+
16+
return sayHello();
17+
}
18+
});
519

620
function App() {
21+
const data = Route.useLoaderData();
22+
723
const features = [
24+
{
25+
icon: <Network className="w-12 h-12 text-cyan-400" />,
26+
title: 'Worker RPC Integration',
27+
description:
28+
'Type-safe RPC calls from TanStack Start to Cloudflare Workers via service bindings. Full end-to-end type safety.',
29+
},
830
{
931
icon: <Zap className="w-12 h-12 text-cyan-400" />,
1032
title: 'Powerful Server Functions',
@@ -19,24 +41,19 @@ function App() {
1941
},
2042
{
2143
icon: <RouteIcon className="w-12 h-12 text-cyan-400" />,
22-
title: 'API Routes',
23-
description: 'Build type-safe API endpoints alongside your application. No separate backend needed.',
44+
title: 'HTTP API Routes',
45+
description: 'Access Cloudflare Worker HTTP endpoints at /api/* routes or use type-safe RPC calls.',
2446
},
2547
{
2648
icon: <Shield className="w-12 h-12 text-cyan-400" />,
2749
title: 'Strongly Typed Everything',
2850
description: 'End-to-end type safety from server to client. Catch errors before they reach production.',
2951
},
3052
{
31-
icon: <Waves className="w-12 h-12 text-cyan-400" />,
32-
title: 'Full Streaming Support',
53+
icon: <Package className="w-12 h-12 text-cyan-400" />,
54+
title: 'Monorepo Template',
3355
description:
34-
'Stream data from server to client progressively. Perfect for AI applications and real-time updates.',
35-
},
36-
{
37-
icon: <Sparkles className="w-12 h-12 text-cyan-400" />,
38-
title: 'Next Generation Ready',
39-
description: 'Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.',
56+
'Full-stack pnpm workspace with separate Worker and Web packages. Share types across the stack seamlessly.',
4057
},
4158
];
4259

@@ -52,25 +69,53 @@ function App() {
5269
<span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">START</span>
5370
</h1>
5471
</div>
55-
<p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
56-
The framework for next generation AI applications
57-
</p>
72+
<a
73+
href="https://github.com/roerohan/fullstack-monorepo-template"
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
className="text-2xl md:text-3xl text-gray-300 mb-4 font-light hover:text-cyan-400 transition-colors inline-block"
77+
>
78+
roerohan/fullstack-monorepo-template
79+
</a>
5880
<p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
59-
Full-stack framework powered by TanStack Router for React and Solid. Build modern applications with server
60-
functions, streaming, and type safety.
81+
TanStack Start + Cloudflare Workers monorepo. Build modern fullstack applications with type-safe RPC,
82+
server functions, and edge deployment.
6183
</p>
84+
85+
<div className="mb-8 p-4 bg-slate-800/70 border border-cyan-500/30 rounded-lg max-w-2xl mx-auto">
86+
<p className="text-sm text-gray-400 mb-2">Live RPC Demo:</p>
87+
<p className="text-lg text-cyan-400 font-mono">{JSON.stringify(data)}</p>
88+
<p className="text-xs text-gray-500 mt-2">
89+
Called <code className="text-cyan-400">WORKER_RPC.sayHello()</code> from server loader •{' '}
90+
<Link to="/rpc" className="text-cyan-400 hover:text-cyan-300 underline">
91+
View more RPC examples at /rpc
92+
</Link>
93+
</p>
94+
</div>
95+
6296
<div className="flex flex-col items-center gap-4">
63-
<a
64-
href="https://tanstack.com/start"
65-
target="_blank"
66-
rel="noopener noreferrer"
67-
className="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
68-
>
69-
Documentation
70-
</a>
97+
<div className="flex gap-3 flex-wrap justify-center">
98+
<a
99+
href="https://tanstack.com/start"
100+
target="_blank"
101+
rel="noopener noreferrer"
102+
className="px-6 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
103+
>
104+
TanStack Docs
105+
</a>
106+
<a
107+
href="https://developers.cloudflare.com/workers"
108+
target="_blank"
109+
rel="noopener noreferrer"
110+
className="px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-orange-500/50"
111+
>
112+
Cloudflare Workers
113+
</a>
114+
</div>
71115
<p className="text-gray-400 text-sm mt-2">
72-
Begin your TanStack Start journey by editing{' '}
73-
<code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">/src/routes/index.tsx</code>
116+
Edit <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">/src/routes/index.tsx</code> or add
117+
RPC methods in{' '}
118+
<code className="px-2 py-1 bg-slate-700 rounded text-orange-400">packages/worker/src/rpc.ts</code>
74119
</p>
75120
</div>
76121
</div>

0 commit comments

Comments
 (0)