use vite for dev server

cdleveille · cdleveille · commit f4d397adc2b8 · 2025-05-05T14:30:05.000-04:00
diff --git a/.env.example b/.env.example
@@ -5,22 +5,13 @@
 #########################################################################################################################################
 
 # determines whether the app runs in development or production mode
-# the app will run in development mode unless either 'BUN_ENV' or 'NODE_ENV' is explicitly set to 'production'
+# the app will run in development mode unless either 'VITE_ENV' is explicitly set to 'production'
 # default: development mode
-BUN_ENV=development
+VITE_ENV=development
 
 # the port the elysia http server runs on (make sure to keep consistent with Dockerfile and fly.toml, if applicable)
 # default: 3000
-PORT=3000
+VITE_PORT=3000
 
-# the port the socket.io websocket server runs on (make sure to keep consistent with Dockerfile and fly.toml, if applicable)
-# default: 3001
-WS_PORT=3001
-
-# the host url of the app - MUST BE SET IN PRODUCTION to whitelist domain in socket.io server CORS config (i.e. https://my-prod-url.com)
-# default: http://localhost
-HOST=http://localhost
-
-# the url of the discit-api server
-# default: http://localhost:5000
-API_URL==http://localhost:5000
+# must match the secret api key of the discit-api - used to authenticate privileged requests
+VITE_API_KEY=********
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -14,4 +14,4 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: superfly/flyctl-actions/setup-flyctl@master
-      - run: flyctl deploy --remote-only --detach --no-cache --config fly.toml --build-secret API_KEY=${{ secrets.API_KEY }}
+      - run: flyctl deploy --remote-only --detach --no-cache --config fly.toml --build-secret VITE_API_KEY=${{ secrets.VITE_API_KEY }}
diff --git a/Dockerfile b/Dockerfile
@@ -16,8 +16,8 @@ COPY --link . .
 # install dependencies, lint project, build frontend, and compile backend
 RUN bun install --ignore-scripts --frozen-lockfile
 RUN bun run biome ci .
-RUN --mount=type=secret,id=API_KEY \
-    API_KEY="$(cat /run/secrets/API_KEY)" bun run build:prod
+RUN --mount=type=secret,id=VITE_API_KEY \
+    VITE_API_KEY="$(cat /run/secrets/VITE_API_KEY)" bun run build:prod
 RUN bun run compile
 
 # minimalist final stage for app image
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "build": "bun run scripts/build.ts",
     "build:prod": "bun run scripts/build.ts BUN_ENV=production && workbox injectManifest workbox-config.json",
     "compile": "bun build --compile --minify --sourcemap src/server/index.ts --outfile main",
-    "dev": "bun run --watch src/server/index.ts",
+    "dev": "vite",
     "start": "bun run src/server/index.ts"
   },
   "devDependencies": {
@@ -39,10 +39,9 @@
     "react-hot-toast": "^2.5.2",
     "react-infinite-scroll-hook": "^5.0.2",
     "react-router-dom": "^7.5.2",
-    "socket.io": "^4.8.1",
-    "socket.io-client": "^4.8.1",
     "typescript": "^5.8.3",
     "vite": "^6.3.4",
+    "vite-tsconfig-paths": "^5.1.4",
     "workbox-cli": "^7.3.0",
     "workbox-routing": "^7.3.0",
     "workbox-strategies": "^7.3.0"
diff --git a/processes/buildClient.ts b/processes/buildClient.ts
diff --git a/processes/index.ts b/processes/index.ts
diff --git a/processes/watch.ts b/processes/watch.ts
diff --git a/scripts/build.ts b/scripts/build.ts
@@ -1,4 +1,40 @@
-import { buildClient } from "@processes";
+import { $ } from "bun";
+import { copyPlugin } from "bun-copy-plugin";
+
+import { Env, Path } from "@constants";
+import { Config, log, now, parseArg } from "@helpers";
+
+const start = now();
+
+const isProd = Config.IS_PROD || (parseArg("BUN_ENV") ?? parseArg("NODE_ENV")) === Env.Production;
+
+const src = Path.ClientSrc;
+const outdir = Path.Public;
+
+const toCopy = ["icons/", "favicon.ico", "manifest.json"];
+
+await $`rm -rf ${outdir}`;
+
+await Bun.build({
+	entrypoints: [`${src}/index.html`, `${src}/sw.ts`],
+	outdir,
+	define: {
+		"import.meta.env.VITE_ENV": `"${isProd ? Env.Production : Env.Development}"`,
+		"import.meta.env.VITE_API_KEY": `"${Config.API_KEY}"`
+	},
+	sourcemap: isProd ? "none" : "linked",
+	naming: {
+		entry: "[dir]/[name].[ext]",
+		asset: "[dir]/[name]~[hash].[ext]",
+		chunk: "[dir]/chunk~[hash].[ext]"
+	},
+	plugins: toCopy.map(path => copyPlugin(`${src}/${path}`, `${outdir}/${path}`)),
+	minify: isProd
+});
+
+const buildMode = isProd ? Env.Production : Env.Development;
+const buildTime = (now() - start).toFixed(2);
+
+log.info(`Build completed in ${buildMode} mode in ${buildTime}ms`);
 
-await buildClient();
 process.exit(0);
diff --git a/src/client/assets/index.ts b/src/client/assets/index.ts
@@ -1,4 +1,3 @@
-// @ts-ignore
 import discitSvg from "./discit.svg";
 
 export { discitSvg };
diff --git a/src/client/index.html b/src/client/index.html
@@ -37,7 +37,7 @@
 		<title>DiscIt</title>
 	</head>
 	<body>
-		<script type="text/javascript" src="index.tsx" defer></script>
+		<script type="module" src="index.tsx" defer></script>
 		<div id="root"></div>
 	</body>
 </html>
diff --git a/src/client/utils/config.ts b/src/client/utils/config.ts
@@ -1,7 +1,12 @@
+import { Env } from "@constants";
+
 export const Config = {
-	IS_PROD: Bun.env.IS_PROD === "true",
-	WS_PORT: Number.parseInt(Bun.env.WS_PORT ?? "3001"),
+	IS_PROD: import.meta.env.VITE_ENV === Env.Production,
 	API_URL: "https://discit-api.fly.dev",
-	API_KEY: Bun.env.API_KEY ?? "",
+	API_KEY: import.meta.env.VITE_API_KEY ?? "",
 	CLERK_PUBLISHABLE_KEY: "pk_test_dW5pdGVkLXNpbGt3b3JtLTkuY2xlcmsuYWNjb3VudHMuZGV2JA"
 };
+
+if (!Config.API_KEY) {
+	throw new Error("Required env var VITE_API_KEY is not set");
+}
diff --git a/src/client/utils/index.ts b/src/client/utils/index.ts
@@ -2,4 +2,3 @@ export * from "./browser";
 export * from "./config";
 export * from "./http";
 export * from "./misc";
-export * from "./socket";
diff --git a/src/client/utils/socket.ts b/src/client/utils/socket.ts
diff --git a/src/server/helpers/config.ts b/src/server/helpers/config.ts
@@ -1,19 +1,17 @@
 import { Env } from "@constants";
 
-const IS_PROD = Bun.env.BUN_ENV === Env.Production || Bun.env.NODE_ENV === Env.Production;
+const IS_PROD = Bun.env.VITE_ENV === Env.Production;
 
-const PORT = Number.parseInt(Bun.env.PORT ?? "3000");
+const PORT = Bun.env.VITE_PORT ? Number.parseInt(Bun.env.VITE_PORT) : 3000;
 
-const WS_PORT = Number.parseInt(Bun.env.WS_PORT ?? "3001");
+const API_KEY = Bun.env.VITE_API_KEY;
 
-const HOST = Bun.env.HOST ?? "http://localhost";
-
-const API_KEY = Bun.env.API_KEY;
+if (!API_KEY) {
+	throw new Error("Required env var VITE_API_KEY is not set");
+}
 
 export const Config = {
 	IS_PROD,
 	PORT,
-	WS_PORT,
-	HOST,
 	API_KEY
 };
diff --git a/src/server/helpers/http.ts b/src/server/helpers/http.ts
@@ -0,0 +1,10 @@
+export const getContentType = (pathname: string) => {
+	if (pathname.endsWith(".html")) return "text/html";
+	if (pathname.endsWith(".css")) return "text/css";
+	if (pathname.endsWith(".js")) return "text/javascript";
+	if (pathname.endsWith(".json")) return "application/json";
+	if (pathname.endsWith(".png")) return "image/png";
+	if (pathname.endsWith(".jpg") || pathname.endsWith(".jpeg")) return "image/jpeg";
+	if (pathname.endsWith(".svg")) return "image/svg+xml";
+	return "text/plain";
+};
diff --git a/src/server/helpers/index.ts b/src/server/helpers/index.ts
@@ -1,4 +1,4 @@
 export * from "./build";
 export * from "./config";
+export * from "./http";
 export * from "./log";
-export * from "./socket";
diff --git a/src/server/helpers/socket.ts b/src/server/helpers/socket.ts
diff --git a/src/server/index.ts b/src/server/index.ts
@@ -1,16 +1,12 @@
 import path from "node:path";
 
-import { Config, initSocket, log } from "@helpers";
+import { Env } from "@constants";
+import { Config, getContentType, log } from "@helpers";
 
 const { IS_PROD, PORT } = Config;
 
 const publicFolder = path.join(process.cwd(), "public");
 
-if (!IS_PROD) {
-	const { buildClient } = await import("@processes");
-	await Promise.all([buildClient(), initSocket()]);
-}
-
 const server = Bun.serve({
 	port: PORT,
 	fetch(request) {
@@ -38,15 +34,6 @@ const server = Bun.serve({
 	development: !IS_PROD
 });
 
-log.info(`HTTP server started on ${server.url.origin}`);
-
-const getContentType = (pathname: string) => {
-	if (pathname.endsWith(".html")) return "text/html";
-	if (pathname.endsWith(".css")) return "text/css";
-	if (pathname.endsWith(".js")) return "text/javascript";
-	if (pathname.endsWith(".json")) return "application/json";
-	if (pathname.endsWith(".png")) return "image/png";
-	if (pathname.endsWith(".jpg") || pathname.endsWith(".jpeg")) return "image/jpeg";
-	if (pathname.endsWith(".svg")) return "image/svg+xml";
-	return "text/plain";
-};
+log.info(
+	`HTTP server started in ${IS_PROD ? Env.Production : Env.Development} mode on ${server.url.origin}`
+);
diff --git a/src/types/constants/index.ts b/src/types/constants/index.ts
@@ -10,11 +10,6 @@ export enum Path {
 	ClientSrc = "src/client"
 }
 
-export enum SocketEvent {
-	Connect = "connect",
-	Reload = "reload"
-}
-
 export enum View {
 	Search = "search",
 	Bag = "bag"
diff --git a/src/types/declarations.d.ts b/src/types/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+	const content: string;
+	export default content;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -26,7 +26,6 @@
       "@contexts": ["src/client/contexts"],
       "@helpers": ["src/server/helpers"],
       "@hooks": ["src/client/hooks"],
-      "@processes": ["processes"],
       "@types": ["src/types/abstract"],
       "@utils": ["src/client/utils"]
     }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,28 +1,22 @@
-import path from "node:path";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
 
-export default defineConfig({
-	plugins: [react()],
-	root: "src/client",
-	publicDir: "public",
-	server: {
-		open: true,
-		port: 3000,
-		strictPort: false,
-		hmr: true
-	},
-	resolve: {
-		extensions: [".ts", ".tsx", ".js", ".jsx"],
-		alias: {
-			"@components": path.resolve(__dirname, "./src/client/components"),
-			"@utils": path.resolve(__dirname, "./src/client/utils"),
-			"@hooks": path.resolve(__dirname, "./src/client/hooks"),
-			"@constants": path.resolve(__dirname, "./src/types/constants"),
-			"@types": path.resolve(__dirname, "./src/types/abstract"),
-			"@assets": path.resolve(__dirname, "./src/client/assets"),
-			"@helpers": path.resolve(__dirname, "./src/server/helpers"),
-			"@processes": path.resolve(__dirname, "./processes")
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd());
+
+	return {
+		plugins: [react(), tsconfigPaths()],
+		root: "src/client",
+		define: {
+			"import.meta.env.VITE_ENV": JSON.stringify(env.VITE_ENV),
+			"import.meta.env.VITE_API_KEY": JSON.stringify(env.VITE_API_KEY)
+		},
+		server: {
+			open: true,
+			port: env.VITE_PORT ? Number.parseInt(env.VITE_PORT) : 3000,
+			strictPort: false,
+			hmr: true
 		}
-	}
+	};
 });

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-// @ts-ignore`
`2`	`1`	`import discitSvg from "./discit.svg";`
`3`	`2`
`4`	`3`	`export { discitSvg };`