git.stevedylan.dev

fix: Fixed how Hono RPC is exported and imported 21d83883

Per [bhvr #22](https://github.com/stevedylandev/bhvr/issues/22) this
changes how the RPC is created, exported from the server package, and
how the client package imports it. Should fix the issue of trying to use
Hono RPC with serveStatic

Steve · 2025-06-07 20:26 2 file(s) · +23 −11

src/utils/helpers.ts +12 −2

import fs from "fs-extra";
import {
	honoRpcTemplate,
	honoClientTemplate,
	shadcnTemplate,
	tailwindTemplate,
	defaultTemplate,


		await fs.writeJson(serverPkgPath, serverPkg, { spaces: 2 });

		// 3. Server modification for RPC export type
		// 3. Server modification for RPC export type (no client imports)
		const serverIndexPath = path.join(projectPath, "server", "src", "index.ts");
		await fs.writeFile(serverIndexPath, honoRpcTemplate, "utf8");

		// 4. Update App.tsx based on template selection using switch statement
		// 4. Create separate client helper file
		const clientHelperPath = path.join(
			projectPath,
			"server",
			"src",
			"client.ts",
		);
		await fs.writeFile(clientHelperPath, honoClientTemplate, "utf8");

		// 5. Update App.tsx based on template selection using switch statement
		const appTsxPath = path.join(projectPath, "client", "src", "App.tsx");

		// Determine template content based on the template type

src/utils/templates.ts +11 −9

export const honoRpcTemplate = `import { Hono } from "hono";
import { cors } from "hono/cors";
import type { ApiResponse } from "shared/dist";
import { hc } from "hono/client";

export const app = new Hono()


	return c.json(data, { status: 200 });
});

const client = hc<typeof app>("");
export type Client = typeof client;
export default app;`;

export const hcWithType = (...args: Parameters<typeof hc>): Client =>
hc<typeof app>(...args);
export const honoClientTemplate = `import { hc } from "hono/client";
import type { app } from "./index";

export default app;`;
export type AppType = typeof app;
export type Client = ReturnType<typeof hc<AppType>>;

export const hcWithType = (...args: Parameters<typeof hc>): Client =>
  hc<AppType>(...args);`;

export const tailwindTemplate = `import { useState } from 'react'
import beaver from './assets/beaver.svg'
import { hcWithType } from 'server'
import { hcWithType } from 'server/dist/client'

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"


export const shadcnTemplate = `import { useState } from 'react'
import beaver from './assets/beaver.svg'
import { Button } from './components/ui/button'
import { hcWithType } from 'server'
import { hcWithType } from 'server/dist/client'

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"



export const defaultTemplate = `import { useState } from 'react'
import beaver from './assets/beaver.svg'
import { hcWithType } from 'server'
import { hcWithType } from 'server/dist/client'
import './App.css'

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"

6	6		import fs from "fs-extra";
7	7		import {
8	8		honoRpcTemplate,
	9	+	honoClientTemplate,
9	10		shadcnTemplate,
10	11		tailwindTemplate,
11	12		defaultTemplate,

65	66
66	67		await fs.writeJson(serverPkgPath, serverPkg, { spaces: 2 });
67	68
68		-	// 3. Server modification for RPC export type
	69	+	// 3. Server modification for RPC export type (no client imports)
69	70		const serverIndexPath = path.join(projectPath, "server", "src", "index.ts");
70	71		await fs.writeFile(serverIndexPath, honoRpcTemplate, "utf8");
71	72
72		-	// 4. Update App.tsx based on template selection using switch statement
	73	+	// 4. Create separate client helper file
	74	+	const clientHelperPath = path.join(
	75	+	projectPath,
	76	+	"server",
	77	+	"src",
	78	+	"client.ts",
	79	+	);
	80	+	await fs.writeFile(clientHelperPath, honoClientTemplate, "utf8");
	81	+
	82	+	// 5. Update App.tsx based on template selection using switch statement
73	83		const appTsxPath = path.join(projectPath, "client", "src", "App.tsx");
74	84
75	85		// Determine template content based on the template type

15	15		export const honoRpcTemplate = `import { Hono } from "hono";
16	16		import { cors } from "hono/cors";
17	17		import type { ApiResponse } from "shared/dist";
18		-	import { hc } from "hono/client";
19	18
20	19		export const app = new Hono()
21	20

34	33		return c.json(data, { status: 200 });
35	34		});
36	35
37		-	const client = hc<typeof app>("");
38		-	export type Client = typeof client;
	36	+	export default app;`;
39	37
40		-	export const hcWithType = (...args: Parameters<typeof hc>): Client =>
41		-	hc<typeof app>(...args);
	38	+	export const honoClientTemplate = `import { hc } from "hono/client";
	39	+	import type { app } from "./index";
42	40
43		-	export default app;`;
	41	+	export type AppType = typeof app;
	42	+	export type Client = ReturnType<typeof hc<AppType>>;
	43	+
	44	+	export const hcWithType = (...args: Parameters<typeof hc>): Client =>
	45	+	hc<AppType>(...args);`;
44	46
45	47		export const tailwindTemplate = `import { useState } from 'react'
46	48		import beaver from './assets/beaver.svg'
47		-	import { hcWithType } from 'server'
	49	+	import { hcWithType } from 'server/dist/client'
48	50
49	51		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"
50	52

109	111		export const shadcnTemplate = `import { useState } from 'react'
110	112		import beaver from './assets/beaver.svg'
111	113		import { Button } from './components/ui/button'
112		-	import { hcWithType } from 'server'
	114	+	import { hcWithType } from 'server/dist/client'
113	115
114	116		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"
115	117

177	179
178	180		export const defaultTemplate = `import { useState } from 'react'
179	181		import beaver from './assets/beaver.svg'
180		-	import { hcWithType } from 'server'
	182	+	import { hcWithType } from 'server/dist/client'
181	183		import './App.css'
182	184
183	185		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"