More work on bundling vite for production

.gitignore

@@ -169,3 +169,4 @@ dist
 .pnp.\*
 config/config.toml
 uploads/
+pages/dist

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:

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, {

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 .",

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);

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 },
+];

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: {