Connect frontend to oRPC server

- Add Vite proxy to forward /api/v1/rpc to API server (port 9861)
- Create oRPC client in src/lib/api/client.ts
- Add @orpc/client and @orpc/contract dependencies
- Add @reviq/api-contract workspace dependency
- Extract DEFAULT_PORT constant to api-server/src/constants.ts
- Change API server default port from 3001 to 9861

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/api-server/src/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * Default port for the API server
+ */
+export const DEFAULT_PORT = 9861;

apps/api-server/src/index.ts

@@ -1,9 +1,10 @@
 import { RPCHandler } from "@orpc/server/fetch";
+import { DEFAULT_PORT } from "./constants.js";
 import { router } from "./router.js";
 
 const handler = new RPCHandler(router);
 
-const port = import.meta.env.PORT ?? 3001;
+const port = import.meta.env.PORT ?? DEFAULT_PORT;
 
 Bun.serve({
   port,

apps/publisher-dashboard/package.json

@@ -12,6 +12,9 @@
     "clean": "rm -rf .svelte-kit dist .eslintcache"
   },
   "dependencies": {
+    "@orpc/client": "^1.13.2",
+    "@orpc/contract": "^1.13.2",
+    "@reviq/api-contract": "workspace:*",
     "@tanstack/svelte-query": "^6.0.14",
     "@tanstack/svelte-query-devtools": "^6.0.3",
     "bits-ui": "^2.15.4",

apps/publisher-dashboard/src/lib/api/client.ts

@@ -0,0 +1,14 @@
+import type { ContractRouterClient } from "@orpc/contract";
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { contract } from "@reviq/api-contract";
+
+const link = new RPCLink({
+  url: "/api/v1/rpc",
+});
+
+/**
+ * Type-safe oRPC client for the API
+ */
+export const api: ContractRouterClient<typeof contract> =
+  createORPCClient(link);

apps/publisher-dashboard/src/lib/api/index.ts

@@ -0,0 +1 @@
+export { api } from "./client.js";

apps/publisher-dashboard/vite.config.ts

@@ -6,5 +6,11 @@ export default defineConfig({
   plugins: [tailwindcss(), sveltekit()],
   server: {
     port: 6827,
+    proxy: {
+      "/api/v1/rpc": {
+        target: "http://localhost:9861",
+        changeOrigin: true,
+      },
+    },
   },
 });

bun.lock

@@ -50,6 +50,9 @@
       "name": "@apps/publisher-dashboard",
       "version": "0.0.1",
       "dependencies": {
+        "@orpc/client": "^1.13.2",
+        "@orpc/contract": "^1.13.2",
+        "@reviq/api-contract": "workspace:*",
         "@tanstack/svelte-query": "^6.0.14",
         "@tanstack/svelte-query-devtools": "^6.0.3",
         "bits-ui": "^2.15.4",

packages/api-contract/src/contract.ts

@@ -232,3 +232,5 @@ export const contract = oc.router({
     }),
   }),
 });
+
+export type APIContract = typeof contract;

packages/api-contract/src/index.ts

@@ -1,4 +1,5 @@
 // Export the contract
+export type { APIContract } from "./contract.js";
 export { contract } from "./contract.js";
 export * from "./schemas/admin.js";
 export * from "./schemas/auth.js";