feat: switch to server in dev & prod

server/dev.mjs

@@ -0,0 +1,33 @@
+// This is a polyglot entrypoint for Headplane when running in development
+// It does some silly magic to load the vite config, set some globals that
+// are required to function, and create the vite development server.
+import { createServer } from 'vite'
+import { env, exit } from 'node:process'
+import { log } from './utils.mjs'
+
+log('DEVX', 'INFO', 'This script is only intended for development')
+env.NODE_ENV = 'development'
+
+// The production entrypoint uses a global called "PREFIX" to determine
+// what route the application is being served at and a global called "BUILD"
+// to determine the Remix handler. We need to set these globals here so that
+// the development server can function correctly and override the production
+// values.
+
+log('DEVX', 'INFO', 'Creating Vite Development Server')
+const server = await createServer({
+	server: {
+		middlewareMode: true
+	}
+})
+
+// This entrypoint is defined in the documentation to load the server
+const build = await server.ssrLoadModule('virtual:remix/server-build')
+
+// We already handle this logic in the Vite configuration
+global.PREFIX = server.config.base.slice(0, -1)
+global.BUILD = build
+global.MODE = 'development'
+global.MIDDLEWARE = server.middlewares
+
+await import('./prod.mjs')

server/prod.mjs

@@ -0,0 +1,165 @@
+// This is a polyglot entrypoint for Headplane when running in production
+// It doesn't use any dependencies aside from @remix-run/node and mime
+// During build we bundle the used dependencies into the file so that
+// we can only need this file and a Node.js installation to run the server.
+// PREFIX is defined globally, see vite.config.ts
+
+import { access, constants } from 'node:fs/promises'
+import { createReadStream, existsSync, statSync } from 'node:fs'
+import { createServer } from 'node:http'
+import { join, resolve } from 'node:path'
+import { env } from 'node:process'
+import { log } from './utils.mjs'
+
+log('SRVX', 'INFO', `Running with Node.js ${process.versions.node}`)
+
+try {
+	await access('./node_modules/@remix-run', 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`')
+	log('SRVX', 'ERROR', error)
+	process.exit(1)
+}
+
+const {
+	createRequestHandler: remixRequestHandler,
+	createReadableStreamFromReadable,
+	writeReadableStreamToWritable
+} = await import('@remix-run/node')
+const { default: mime } = await import('mime')
+
+const port = env.PORT || 3000
+const host = env.HOST || '0.0.0.0'
+const buildPath = env.BUILD_PATH || './build'
+const baseDir = resolve(join(buildPath, 'client'))
+
+if (!global.BUILD) {
+	try {
+		await access(join(buildPath, 'server'), constants.F_OK | constants.R_OK)
+		log('SRVX', 'INFO', 'Found build directory')
+	} catch (error) {
+		const date = new Date().toISOString()
+		log('SRVX', 'ERROR', 'No build found. Please run `pnpm build`')
+		log('SRVX', 'ERROR', error)
+		process.exit(1)
+	}
+
+	// Because this is a dynamic import without an easily discernable path
+	// we gain the "deoptimization" we want so that Vite doesn't bundle this
+	const build = await import(resolve(join(buildPath, 'server', 'index.js')))
+	global.BUILD = build
+	global.MODE = 'production'
+}
+
+const handler = remixRequestHandler(global.BUILD, global.MODE)
+const http = createServer(async (req, res) => {
+	const url = new URL(`http://${req.headers.host}${req.url}`)
+
+	if (global.MIDDLEWARE) {
+		await new Promise(resolve => {
+			global.MIDDLEWARE(req, res, resolve)
+		})
+	}
+
+	if (!url.pathname.startsWith(PREFIX)) {
+		res.writeHead(404)
+		res.end()
+		return
+	}
+
+	// We need to handle an issue where say we are navigating to $PREFIX
+	// but Remix does not handle it without the trailing slash. This is
+	// because Remix uses the URL constructor to parse the URL and it
+	// will remove the trailing slash. We need to redirect to the correct
+	// URL so that Remix can handle it correctly.
+	if (url.pathname === PREFIX) {
+		res.writeHead(302, {
+			Location: `${PREFIX}/`
+		})
+		res.end()
+		return
+	}
+
+	// Before we pass any requests to our Remix handler we need to check
+	// if we can handle a raw file request. This is important for the
+	// Remix loader to work correctly.
+	//
+	// To optimize this, we send them as readable streams in the node
+	// response and we also set headers for aggressive caching.
+	if (url.pathname.startsWith(`${PREFIX}/assets/`)) {
+		const filePath = join(baseDir, url.pathname.replace(PREFIX, ''))
+		const exists = existsSync(filePath)
+		const stats = statSync(filePath)
+
+		if (exists && stats.isFile()) {
+			// Build assets are cache-bust friendly so we can cache them heavily
+			if (req.url.startsWith('/build')) {
+				res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
+			}
+
+			// Send the file as a readable stream
+			const fileStream = createReadStream(filePath)
+			const type = mime.getType(filePath)
+
+			res.setHeader('Content-Length', stats.size)
+			res.setHeader('Content-Type', type)
+			fileStream.pipe(res)
+			return
+		}
+	}
+
+	// Handling the request
+	const controller = new AbortController()
+	res.on('close', () => controller.abort())
+
+	const headers = new Headers()
+	for (const [key, value] of Object.entries(req.headers)) {
+		if (!value) continue
+
+		if (Array.isArray(value)) {
+			for (const v of value) {
+				headers.append(key, v)
+			}
+
+			continue
+		}
+
+		headers.append(key, value)
+	}
+
+	const remixReq = new Request(url.href, {
+		headers,
+		method: req.method,
+		signal: controller.signal,
+
+		// If we have a body we set a duplex and we load the body
+		...(req.method !== 'GET' && req.method !== 'HEAD' ? {
+				body: createReadableStreamFromReadable(req),
+				duplex: 'half'
+			} : {}
+		)
+	})
+
+	// Pass our request to the Remix handler and get a response
+	const response = await handler(remixReq, {}) // No context
+
+	// Handle our response and reply
+	res.statusCode = response.status
+	res.statusMessage = response.statusText
+
+	for (const [key, value] of response.headers.entries()) {
+		res.appendHeader(key, value)
+	}
+
+	if (response.body) {
+		await writeReadableStreamToWritable(response.body, res)
+		return
+	}
+
+	res.end()
+})
+
+http.listen(port, host, () => {
+	log('SRVX', 'INFO', `Running on ${host}:${port}`)
+})

server/utils.mjs

@@ -0,0 +1,4 @@
+export function log(topic, level, message) {
+	const date = new Date().toISOString()
+	console.log(`${date} (${level}) [${topic}] ${message}`)
+}