set up environment variable config

Author: aster-void

.env.sample

@@ -1 +1,8 @@
-NEXT_PUBLIC_MODE=default
+# Config
+PUBLIC_SERVER_URL=http://localhost:4000
+PUBLIC_MOCK_DATA=true
+SERVER_PORT=4000 # optional, server port (alias: PORT, PUBLIC_SERVER_URL.port) (defaults to 4000 if none are specified)
+
+# Secrets
+PUBLIC_X_ANON_KEY=...
+X_API_KEY=...

.gitignore

@@ -1,42 +1,11 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+node_modules
+/.env
 
-node_modules/
-
-.tool-versions
-bun.lockb
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-.next
-out
-
-# production
-build
-
-# misc
+# OS / Dev Env
 .DS_Store
 *.pem
-.direnv
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
+/.direnv
 
-# typescript
+# Build Output
+dist
 *.tsbuildinfo
-next-env.d.ts

packages/server/package.json

@@ -7,8 +7,7 @@
     ".": "./app.ts"
   },
   "scripts": {
-    "dev": "bun run --watch ./serve.ts",
-    "dev:mock": "MOCK=true bun run --watch ./serve.ts"
+    "dev": "bun --env-file=../../.env run --watch ./serve.ts"
   },
   "devDependencies": {
     "@types/bun": "^1.2.18"

packages/server/serve.ts

@@ -1,7 +1,17 @@
 import { app } from "./app.ts";
 
-const port = process.env.SERVER_PORT ?? process.env.PORT ?? 4000;
+const port =
+  process.env.SERVER_PORT ??
+  process.env.PORT ??
+  parsePublicServerURL() ??
+  "4000";
 
 app.listen(port, () =>
   console.log(`Server started at http://localhost:${port}`),
 );
+
+function parsePublicServerURL() {
+  if (!process.env.PUBLIC_SERVER_URL) return undefined;
+  const url = new URL(process.env.PUBLIC_SERVER_URL);
+  return url.port;
+}

packages/web/package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "dev:mock": "VITE_MODE=mock vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "check": "tsc --noEmit"

packages/web/src/app/utils/user.ts

@@ -1,14 +1,13 @@
 import type { RegisterType } from "@/app/type";
 import { SampleUser } from "@/app/utils/mock_data";
-
-const MODE = import.meta.env.VITE_MODE;
+import { env } from "../../lib/env.ts";
 
 export class User {
   private user: RegisterType | undefined;
 
   constructor() {
     if (typeof window !== "undefined") {
-      if (MODE === "mock") {
+      if (env.mockData) {
         this.user = SampleUser;
       } else {
         const storedUser = localStorage.getItem("user");
@@ -36,7 +35,7 @@ export class User {
   setUser(newUser: RegisterType): void {
     this.user = newUser;
 
-    if (typeof window !== "undefined" && MODE !== "mock") {
+    if (typeof window !== "undefined" && !env.mockData) {
       localStorage.setItem("user", JSON.stringify(newUser));
     }
   }

packages/web/src/lib/api.ts

@@ -1,4 +1,5 @@
 import { edenTreaty } from "@elysiajs/eden";
 import type { App } from "@packages/server";
+import { env } from "./env.ts";
 
-export const api = edenTreaty<App>("http://localhost:4000").api;
+export const api = edenTreaty<App>(env.serverURL).api;

packages/web/src/lib/env.ts

@@ -0,0 +1,31 @@
+export const env = {
+  mockData: boolean(import.meta.env.PUBLIC_MOCK_DATA),
+  serverURL: string(import.meta.env.PUBLIC_SERVER_URL, {
+    name: "PUBLIC_SERVER_URL",
+  }),
+};
+
+function boolean(value: string | undefined): boolean {
+  return value === "true" || value === "1";
+}
+
+/**
+ * if value != null -> return value
+ * if defaultValue != null -> return defaultValue
+ * default -> throws Error
+ * @param value 値
+ * @param param1
+ * @returns 結果
+ */
+function string(
+  value: string | undefined,
+  { name, defaultValue }: { name?: string; defaultValue?: string },
+): string {
+  if (value != null) {
+    return value;
+  }
+  if (defaultValue != null) {
+    return defaultValue;
+  }
+  throw new Error(`${name} is undefined`);
+}

packages/web/src/vite-env.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_MODE: string;
+  readonly PUBLIC_SERVER_URL: string;
+  readonly PUBLIC_MOCK_DATA: string;
 }
 
 interface ImportMeta {

packages/web/vite.config.ts

@@ -1,14 +1,15 @@
-import path from "node:path";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      "@": "./src",
     },
   },
+  envDir: "../../",
+  envPrefix: "PUBLIC_",
   server: {
     port: 3000,
   },