From d62e81977e14c7b6038c12d392295f8c1b462e10 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Wed, 6 Dec 2023 14:29:26 -1000
Subject: [PATCH] More work on bundling vite for production

---
 .gitignore           |  3 ++-
 CONTRIBUTING.md      |  9 +++++++++
 index.ts             | 30 ++++++++++++++++++++++++------
 package.json         |  3 ++-
 pages/main.ts        | 11 ++---------
 pages/routes.ts      |  8 ++++++++
 pages/vite.config.ts |  2 +-
 7 files changed, 48 insertions(+), 18 deletions(-)
 create mode 100644 pages/routes.ts

diff --git a/.gitignore b/.gitignore
index db1bd149..c5cd2e05 100644
--- a/.gitignore
+++ b/.gitignore
@@ -168,4 +168,5 @@ dist
 .yarn/install-state.gz
 .pnp.\*
 config/config.toml
-uploads/
\ No newline at end of file
+uploads/
+pages/dist
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 19e9ce47..ed673bf5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -89,6 +89,15 @@ bun dev
 
 If your port number is lower than 1024, you may need to run the command as root.
 
+### Running the Vite server
+
+To start the Vite server, run:
+```sh
+bun vite:dev
+```
+
+This should be run in a separate terminal window. The Vite server is used to serve the frontend assets and to provide hot module reloading.
+
 ## Running tests
 
 To run the tests, run:
diff --git a/index.ts b/index.ts
index bb4270a4..f4583783 100644
--- a/index.ts
+++ b/index.ts
@@ -13,6 +13,7 @@ import type { PrismaClientInitializationError } from "@prisma/client/runtime/lib
 import { HookTypes, Server } from "~plugins/types";
 import { initializeRedisCache } from "@redis";
 import { connectMeili } from "@meilisearch";
+import routes from "~pages/routes";
 
 const timeAtStart = performance.now();
 const server = new Server();
@@ -135,13 +136,30 @@ Bun.serve({
 
 			return await file.default(req.clone(), matchedRoute, auth);
 		} else {
-			// Proxy response from Vite at localhost:5173
-			const proxy = await fetch(
-				req.url.replace(config.http.base_url, "http://localhost:5173")
-			);
+			// Check if path matches Vite routes
+			if (
+				routes.find(route => route.path === new URL(req.url).pathname)
+			) {
+				// Proxy response from Vite at localhost:5173
 
-			if (proxy.status !== 404) {
-				return proxy;
+				const proxy = await fetch(
+					req.url.replace(
+						config.http.base_url,
+						"http://localhost:5173"
+					)
+				);
+
+				if (proxy.status !== 404) {
+					return proxy;
+				}
+			}
+
+			if (new URL(req.url).pathname.startsWith("/assets")) {
+				// Serve from pages/dist/assets
+				return new Response(
+					// @ts-expect-error Custom Bun extension
+					Bun.file(`./pages/dist${new URL(req.url).pathname}`)
+				);
 			}
 
 			return new Response(undefined, {
diff --git a/package.json b/package.json
index a16ddb2d..f45d546d 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
   "scripts": {
     "dev": "bun run index.ts",
     "vite:dev": "bunx --bun vite pages",
-    "start": "bun run index.ts",
+    "vite:build": "bunx --bun vite build pages",
+    "start": "NODE_ENV=production bun run index.ts & bunx --bun vite preview pages --port 5173",
     "migrate-dev": "bun prisma migrate dev",
     "migrate": "bun prisma migrate deploy",
     "lint": "eslint --config .eslintrc.cjs --ext .ts .",
diff --git a/pages/main.ts b/pages/main.ts
index 6c9302be..92f1b4c5 100644
--- a/pages/main.ts
+++ b/pages/main.ts
@@ -2,19 +2,12 @@ import { createApp } from "vue";
 import "./style.css";
 import "virtual:uno.css";
 import { createRouter, createWebHistory } from "vue-router";
-import Login from "./login.vue";
 import App from "./App.vue";
-
-const Home = { template: "<div>Home</div>" };
-
-const routes = [
-	{ path: "/", component: Home },
-	{ path: "/oauth/authorize", component: Login },
-];
+import routes from "./routes";
 
 const router = createRouter({
 	history: createWebHistory(),
-	routes,
+	routes: routes,
 });
 
 const app = createApp(App);
diff --git a/pages/routes.ts b/pages/routes.ts
new file mode 100644
index 00000000..003ee65f
--- /dev/null
+++ b/pages/routes.ts
@@ -0,0 +1,8 @@
+import Login from "./login.vue";
+
+const Home = { template: "<div>Home</div>" };
+
+export default [
+	{ path: "/", component: Home },
+	{ path: "/oauth/authorize", component: Login },
+];
diff --git a/pages/vite.config.ts b/pages/vite.config.ts
index 8bd4b8dd..95074a01 100644
--- a/pages/vite.config.ts
+++ b/pages/vite.config.ts
@@ -5,7 +5,7 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
 	base: "/",
 	build: {
-		outDir: "../vite-dist",
+		outDir: "./dist",
 	},
 	// main.ts is in pages/ directory
 	resolve: {