Add env package, configure web API urls in .env

apps/api/package.json

@@ -13,11 +13,10 @@
     "@hono/node-server": "^1.13.2",
     "@hono/trpc-server": "^0.3.2",
     "@manifold/auth": "*",
+    "@manifold/env": "^0.0.0",
     "@manifold/router": "*",
-    "@t3-oss/env-core": "^0.11.1",
     "dotenv": "^16.4.5",
-    "hono": "^4.6.5",
-    "zod": "^3.23.8"
+    "hono": "^4.6.5"
   },
   "devDependencies": {
     "@manifold/eslint-config": "*",

apps/api/src/env.ts

@@ -1,9 +1,8 @@
 import "dotenv/config";
 
-import { createEnv } from "@t3-oss/env-core";
+import { createEnv, z } from "@manifold/env";
 import type { Context } from "hono";
 import { env } from "hono/adapter";
-import { z } from "zod";
 
 export const getEnv = (c?: Context) =>
   createEnv({

apps/web/.env.example

@@ -0,0 +1,8 @@
+# custom browser to use when vite opens the app
+BROWSER=
+
+# vite proxies the API in local development
+API_PROXY_URL=http://localhost:3000
+
+# so the client should make api requests to the vite proxy
+PUBLIC_API_BASE_URL=http://localhost:5173

apps/web/package.json

@@ -17,6 +17,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@manifold/auth": "*",
     "@manifold/engine": "*",
+    "@manifold/env": "^0.0.0",
     "@manifold/lib": "*",
     "@manifold/router": "*",
     "@manifold/tailwind-config": "*",
@@ -53,6 +54,7 @@
     "eslint": "^8.57.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
+    "tsx": "4.19.2",
     "typescript": "^5.6.3",
     "vite": "^5.1.4",
     "vite-plugin-comlink": "^5.0.1",

apps/web/src/env.ts

@@ -0,0 +1,15 @@
+import { createEnv, z } from "@manifold/env";
+
+console.log(import.meta.env);
+export const env = createEnv({
+  server: {
+    API_PROXY_URL: z.string(),
+  },
+  client: {
+    PUBLIC_API_BASE_URL: z.string(),
+  },
+  clientPrefix: "PUBLIC_",
+  runtimeEnv: import.meta.env,
+});
+
+export type Env = typeof env;

apps/web/src/utils/trpc.ts

@@ -3,6 +3,8 @@ import { httpBatchLink } from "@trpc/client";
 import { createTRPCReact } from "@trpc/react-query";
 import superjson from "superjson";
 
+import { env } from "~env";
+
 /**
  * This type annotation feels unnecessary, but `tsc` chokes without it.
  *
@@ -16,7 +18,7 @@ export const trpcClient = trpc.createClient({
   transformer: superjson,
   links: [
     httpBatchLink({
-      url: "http://localhost:5173/api/trpc",
+      url: new URL("/api/trpc", env.PUBLIC_API_BASE_URL).toString(),
     }),
   ],
 });

apps/web/vite.config.ts

@@ -1,11 +1,26 @@
+import "dotenv/config";
+
 import react from "@vitejs/plugin-react";
 import jotaiDebugLabel from "jotai/babel/plugin-debug-label";
 import jotaiReactRefresh from "jotai/babel/plugin-react-refresh";
+import { tsImport } from "tsx/esm/api";
 import { defineConfig } from "vite";
 import { comlink } from "vite-plugin-comlink";
 import tsconfigPaths from "vite-tsconfig-paths";
 
+import type { Env } from "./src/env";
+
+/**
+ * Cannot import TS ESM modules directly in Vite config, so we rely on `tsx`'s
+ * `tsImport` helper to load the `env` module, which we then have to cast to the
+ * correct type manually, :sadge:
+ */
+const { env } = (await tsImport("./src/env.ts", {
+  parentURL: import.meta.url,
+})) as { env: Env };
+
 export default defineConfig({
+  envPrefix: "PUBLIC_",
   plugins: [
     comlink(),
     react({ babel: { plugins: [jotaiDebugLabel, jotaiReactRefresh] } }),
@@ -17,7 +32,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:3000",
+        target: env.API_PROXY_URL,
         changeOrigin: true,
       },
     },

packages/db/package.json

@@ -25,10 +25,9 @@
   },
   "dependencies": {
     "@auth/core": "^0.37.2",
-    "@t3-oss/env-core": "^0.11.1",
+    "@manifold/env": "^0.0.0",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.35.3",
-    "pg": "^8.13.0",
-    "zod": "^3.23.8"
+    "pg": "^8.13.0"
   }
 }

packages/db/src/env.ts

@@ -1,7 +1,6 @@
 import "dotenv/config";
 
-import { createEnv } from "@t3-oss/env-core";
-import { z } from "zod";
+import { createEnv, z } from "@manifold/env";
 
 export const env = createEnv({
   server: {

packages/env/README.md

@@ -0,0 +1 @@
+# `@manifold/env`

packages/env/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@manifold/env",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@t3-oss/env-core": "^0.11.1",
+    "zod": "^3.23.8"
+  }
+}

packages/env/src/index.ts

@@ -0,0 +1,4 @@
+import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod";
+
+export { createEnv, z };

packages/ui/package.json

@@ -60,8 +60,7 @@
     "react-resizable-panels": "^2.1.4",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.3",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "tailwindcss-animate": "^1.0.7"
   },
   "lint-staged": {
     "**/*.{js,ts,tsx}": [