feat: fix build scripts and server
This commit is contained in:
Aarnav Tale
parent
f3c9d8b54c
commit
a4bb3cce5f
@ -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);
|
||||
});
|
||||
}
|
||||
35
package.json
35
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-dom": "^19.0.1",
|
||||
"@uiw/codemirror-theme-github": "^4.23.6",
|
||||
"@uiw/react-codemirror": "^4.23.6",
|
||||
"@types/react": "^19.0.2",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"@uiw/codemirror-theme-github": "^4.23.7",
|
||||
"@uiw/react-codemirror": "^4.23.7",
|
||||
"clsx": "^2.1.1",
|
||||
"dotenv": "^16.4.7",
|
||||
"isbot": "^5.1.17",
|
||||
"mime": "^4.0.4",
|
||||
"isbot": "^5.1.19",
|
||||
"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",
|
||||
"tailwind-merge": "^2.5.5",
|
||||
"remix-utils": "^8.0.0",
|
||||
"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",
|
||||
"zod": "^3.23.8"
|
||||
"yaml": "^2.7.0",
|
||||
"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"
|
||||
},
|
||||
|
||||
1240
pnpm-lock.yaml
1240
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -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 {
|
||||
createRequestHandler: remixRequestHandler,
|
||||
createReadableStreamFromReadable,
|
||||
writeReadableStreamToWritable,
|
||||
} = await import('@react-router/node');
|
||||
const { createRequestHandler } = await import('react-router');
|
||||
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 = remixRequestHandler(global.BUILD, global.MODE);
|
||||
const handler = createRequestHandler(global.BUILD, global.MODE);
|
||||
const http = createServer(async (req, res) => {
|
||||
const url = new URL(`http://${req.headers.host}${req.url}`);
|
||||
|
||||
|
||||
123
server/streams.mjs
Normal file
123
server/streams.mjs
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
server/vite.config.ts
Normal file
33
server/vite.config.ts
Normal file
@ -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',
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user