feat: fix build scripts and server

app/entry.server.tsx

@@ -1,59 +0,0 @@
-import { PassThrough } from 'node:stream';
-
-import type { AppLoadContext, EntryContext } from 'react-router';
-import { createReadableStreamFromReadable } from '@react-router/node';
-import { ServerRouter } from 'react-router';
-import { isbot } from 'isbot';
-import { renderToPipeableStream } from 'react-dom/server';
-
-import { loadContext } from './utils/config/headplane';
-
-await loadContext();
-
-export const streamTimeout = 5000;
-export default function handleRequest(
-	request: Request,
-	responseStatusCode: number,
-	responseHeaders: Headers,
-	reactRouterContext: EntryContext,
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	_loadContext: AppLoadContext,
-) {
-	const ua = request.headers.get('user-agent');
-	const isBot = ua ? isbot(ua) : false;
-
-	return new Promise((resolve, reject) => {
-		let shellRendered = false;
-		const { pipe, abort } = renderToPipeableStream(
-			<ServerRouter context={reactRouterContext} url={request.url} />,
-			{
-				[isBot ? 'onAllReady' : 'onShellReady']() {
-					shellRendered = true;
-					const body = new PassThrough();
-					const stream = createReadableStreamFromReadable(body);
-					responseHeaders.set('Content-Type', 'text/html');
-
-					resolve(
-						new Response(stream, {
-							headers: responseHeaders,
-							status: responseStatusCode,
-						}),
-					);
-
-					pipe(body);
-				},
-				onShellError(error: unknown) {
-					reject(error as Error);
-				},
-				onError(error: unknown) {
-					responseStatusCode = 500;
-					if (shellRendered) {
-						console.error(error);
-					}
-				},
-			},
-		);
-
-		setTimeout(abort, streamTimeout + 1000);
-	});
-}

package.json

@@ -4,7 +4,7 @@
 	"sideEffects": false,
 	"type": "module",
 	"scripts": {
-		"build": "remix vite:build && vite build",
+		"build": "react-router build && vite build --config server/vite.config.ts",
 		"dev": "node server/dev.mjs",
 		"start": "node build/headplane/server.js",
 		"typecheck": "tsc"
@@ -15,34 +15,34 @@
 		"@dnd-kit/sortable": "^8.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
 		"@kubernetes/client-node": "^0.22.3",
-		"@primer/octicons-react": "^19.13.0",
+		"@primer/octicons-react": "^19.14.0",
 		"@react-aria/toast": "3.0.0-beta.18",
 		"@react-router/node": "^7.0.0",
 		"@react-stately/toast": "3.0.0-beta.7",
 		"@shopify/lang-jsonc": "^1.0.0",
-		"@types/react": "^19.0.1",
+		"@types/react": "^19.0.2",
-		"@types/react-dom": "^19.0.1",
+		"@types/react-dom": "^19.0.2",
-		"@uiw/codemirror-theme-github": "^4.23.6",
+		"@uiw/codemirror-theme-github": "^4.23.7",
-		"@uiw/react-codemirror": "^4.23.6",
+		"@uiw/react-codemirror": "^4.23.7",
 		"clsx": "^2.1.1",
 		"dotenv": "^16.4.7",
-		"isbot": "^5.1.17",
+		"isbot": "^5.1.19",
-		"mime": "^4.0.4",
+		"mime": "^4.0.6",
 		"oauth4webapi": "^2.17.0",
 		"react": "19.0.0",
 		"react-aria-components": "^1.5.0",
-		"react-codemirror-merge": "^4.23.6",
+		"react-codemirror-merge": "^4.23.7",
 		"react-dom": "19.0.0",
-		"react-error-boundary": "^4.1.2",
+		"react-error-boundary": "^5.0.0",
 		"react-router": "^7.0.0",
-		"remix-utils": "^7.7.0",
+		"remix-utils": "^8.0.0",
-		"tailwind-merge": "^2.5.5",
+		"tailwind-merge": "^2.6.0",
 		"tailwindcss-react-aria-components": "^1.2.0",
-		"undici": "^7.1.0",
+		"undici": "^7.2.0",
 		"usehooks-ts": "^3.1.0",
 		"ws": "^8.18.0",
-		"yaml": "^2.6.1",
+		"yaml": "^2.7.0",
-		"zod": "^3.23.8"
+		"zod": "^3.24.1"
 	},
 	"devDependencies": {
 		"@babel/preset-typescript": "^7.26.0",
@@ -51,10 +51,11 @@
 		"autoprefixer": "^10.4.20",
 		"babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
 		"postcss": "^8.4.49",
-		"tailwindcss": "^3.4.16",
+		"react-router-dom": "^7.1.1",
+		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.7.2",
-		"vite": "^6.0.3",
+		"vite": "^6.0.6",
 		"vite-plugin-babel": "^1.3.0",
 		"vite-tsconfig-paths": "^5.1.4"
 	},

server/prod.mjs

@@ -11,11 +11,15 @@ import { join, resolve } from 'node:path';
 import { env } from 'node:process';
 import { log } from './utils.mjs';
 import { getWss, registerWss } from './ws.mjs';
+import {
+	createReadableStreamFromReadable,
+	writeReadableStreamToWritable,
+} from './streams.mjs';
 
 log('SRVX', 'INFO', `Running with Node.js ${process.versions.node}`);
 
 try {
-	await access('./node_modules/@react-router', constants.F_OK | constants.R_OK);
+	await access('./node_modules/react-router', constants.F_OK | constants.R_OK);
 	log('SRVX', 'INFO', 'Found node_modules dependencies');
 } catch (error) {
 	log('SRVX', 'ERROR', 'No node_modules found. Please run `pnpm install`');
@@ -23,11 +27,7 @@ try {
 	process.exit(1);
 }
 
-const {
+const { createRequestHandler } = await import('react-router');
-	createRequestHandler: remixRequestHandler,
-	createReadableStreamFromReadable,
-	writeReadableStreamToWritable,
-} = await import('@react-router/node');
 const { default: mime } = await import('mime');
 
 const port = env.PORT || 3000;
@@ -53,8 +53,7 @@ if (!global.BUILD) {
 	global.MODE = 'production';
 }
 
-console.log(remixRequestHandler);
+const handler = createRequestHandler(global.BUILD, global.MODE);
-const handler = remixRequestHandler(global.BUILD, global.MODE);
 const http = createServer(async (req, res) => {
 	const url = new URL(`http://${req.headers.host}${req.url}`);
 

server/streams.mjs

@@ -0,0 +1,123 @@
+// https://github.com/remix-run/react-router/blob/main/packages/react-router-node/stream.ts#L4
+export async function writeReadableStreamToWritable(stream, writable) {
+	let reader = stream.getReader();
+	let flushable = writable;
+
+	try {
+		while (true) {
+			let { done, value } = await reader.read();
+
+			if (done) {
+				writable.end();
+				break;
+			}
+
+			writable.write(value);
+			if (typeof flushable.flush === 'function') {
+				flushable.flush();
+			}
+		}
+	} catch (error) {
+		writable.destroy(error);
+		throw error;
+	}
+}
+
+// https://github.com/remix-run/react-router/blob/08e4f2fd399543cab776f4be8a29181093a3702c/packages/react-router-node/stream.ts#L66
+export const createReadableStreamFromReadable = (source) => {
+	let pump = new StreamPump(source);
+	let stream = new ReadableStream(pump, pump);
+	return stream;
+};
+
+class StreamPump {
+	highWaterMark;
+	accumalatedSize;
+	stream;
+	controller;
+
+	constructor(stream) {
+		this.highWaterMark =
+			stream.readableHighWaterMark ||
+			new Stream.Readable().readableHighWaterMark;
+		this.accumalatedSize = 0;
+		this.stream = stream;
+		this.enqueue = this.enqueue.bind(this);
+		this.error = this.error.bind(this);
+		this.close = this.close.bind(this);
+	}
+
+	size(chunk) {
+		return chunk?.byteLength || 0;
+	}
+
+	start(controller) {
+		this.controller = controller;
+		this.stream.on('data', this.enqueue);
+		this.stream.once('error', this.error);
+		this.stream.once('end', this.close);
+		this.stream.once('close', this.close);
+	}
+
+	pull() {
+		this.resume();
+	}
+
+	cancel(reason) {
+		if (this.stream.destroy) {
+			this.stream.destroy(reason);
+		}
+
+		this.stream.off('data', this.enqueue);
+		this.stream.off('error', this.error);
+		this.stream.off('end', this.close);
+		this.stream.off('close', this.close);
+	}
+
+	enqueue(chunk) {
+		if (this.controller) {
+			try {
+				let bytes = chunk instanceof Uint8Array ? chunk : Buffer.from(chunk);
+
+				let available = (this.controller.desiredSize || 0) - bytes.byteLength;
+				this.controller.enqueue(bytes);
+				if (available <= 0) {
+					this.pause();
+				}
+			} catch (error) {
+				this.controller.error(
+					new Error(
+						'Could not create Buffer, chunk must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object',
+					),
+				);
+				this.cancel();
+			}
+		}
+	}
+
+	pause() {
+		if (this.stream.pause) {
+			this.stream.pause();
+		}
+	}
+
+	resume() {
+		if (this.stream.readable && this.stream.resume) {
+			this.stream.resume();
+		}
+	}
+
+	close() {
+		if (this.controller) {
+			this.controller.close();
+			delete this.controller;
+		}
+	}
+
+	error(error) {
+		if (this.controller) {
+			this.controller.error(error);
+			delete this.controller;
+		}
+	}
+}

server/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+
+const prefix = process.env.__INTERNAL_PREFIX || '/admin';
+if (prefix.endsWith('/')) {
+	throw new Error('Prefix must not end with a slash');
+}
+
+export default defineConfig(() => {
+	return {
+		build: {
+			minify: false,
+			target: 'esnext',
+			rollupOptions: {
+				input: './server/prod.mjs',
+				output: {
+					entryFileNames: 'server.js',
+					dir: 'build/headplane',
+					banner: '#!/usr/bin/env node\n',
+				},
+				external: (id) => id.startsWith('node:') || id === 'ws',
+			},
+		},
+		define: {
+			PREFIX: JSON.stringify(prefix),
+		},
+		resolve: {
+			alias: {
+				stream: 'node:stream',
+				crypto: 'node:crypto',
+			},
+		},
+	};
+});

vite.config.ts

@@ -19,35 +19,6 @@ export default defineConfig(({ isSsrBuild }) => {
 	// If we have the Headplane entry we build it as a single
 	// server/prod.mjs file that is built for production server bundle
 	// We know the remix invoked command is vite:build
-	if (
-		process.env.NODE_ENV !== 'development' &&
-		!process.argv.includes('vite:build')
-	) {
-		return {
-			build: {
-				minify: false,
-				target: 'esnext',
-				rollupOptions: {
-					input: './server/prod.mjs',
-					output: {
-						entryFileNames: 'server.js',
-						dir: 'build/headplane',
-						banner: '#!/usr/bin/env node\n',
-					},
-					external: (id) => id.startsWith('node:'),
-				},
-			},
-			define: {
-				PREFIX: JSON.stringify(prefix),
-			},
-			resolve: {
-				alias: {
-					stream: 'node:stream',
-					crypto: 'node:crypto',
-				},
-			},
-		};
-	}
 
 	return {
 		base: prefix,