refactor: simplify server entrypoint

.github/workflows/ci.yml

@@ -8,10 +8,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: pnpm
       - run: make lint
       - run: pnpm i
@@ -25,10 +25,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: pnpm
       - run: pnpm i
       - run: make docker/up db/reset/test db/seed-download
@@ -44,10 +44,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: pnpm
       - run: pnpm i
       - uses: actions/cache@v3
@@ -76,10 +76,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: pnpm
       - run: pnpm i
       - run: make docker/up db/recreate
@@ -103,7 +103,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - uses: actions/download-artifact@v3
         with:
           name: coverage-unit

app/e2e/videos.test.ts

@@ -224,7 +224,6 @@ test.describe("video playback rate", () => {
     await page
       .getByTestId("PlaybackRateSelect")
       .selectOption({ label: "0.75" });
-    await page.pause();
   });
 });
 

app/entry.server.tsx

@@ -1,9 +1,6 @@
 import { RemixServer } from "@remix-run/react";
 import type { HandleDocumentRequestFunction } from "@remix-run/server-runtime";
 import { renderToString } from "react-dom/server";
-import { injectInitializeServer } from "./misc/initialize-server";
-
-injectInitializeServer();
 
 const handler: HandleDocumentRequestFunction = (
   request,

app/misc/initialize-server.ts

@@ -1,24 +1,16 @@
-import { once } from "@hiogawa/utils";
-import { installGlobals } from "@remix-run/node";
 import {
   finalizeDrizzleClient,
   initializeDrizzleClient,
 } from "../db/drizzle-client.server";
 import { initializeConfigServer } from "../utils/config";
 import { initializeSessionStore } from "../utils/session.server";
 
-export const initializeServer = once(async () => {
-  installGlobals();
+export async function initializeServer() {
   initializeConfigServer();
   initializeSessionStore();
   await initializeDrizzleClient();
-});
+}
 
 export async function finalizeServer() {
   await finalizeDrizzleClient();
 }
-
-// to workaround async initialization on the server (cf. @remix-run/server-runtime patch)
-export function injectInitializeServer() {
-  Object.assign(globalThis, { __onRequestHandler: initializeServer });
-}

app/root.tsx

@@ -40,7 +40,7 @@ export const links: LinksFunction = () => {
   // prettier-ignore
   return [
     { rel: "stylesheet", href: require("../build/css/index.css") },
-    { rel: "icon", href: require("./assets/icon-32.png"), sizes: "32x32" },
+    { rel: "icon", href: "/favicon.ico" },
     { rel: "manifest", href: "/manifest.json" },
   ];
 };
@@ -132,7 +132,7 @@ function Root() {
         </div>
       </div>
       <Scripts />
-      <LiveReload />
+      {process.env.NODE_ENV !== "production" && <LiveReload />}
     </>
   );
 }

app/server/entry-dev.ts

@@ -0,0 +1,58 @@
+import fs from "node:fs";
+import { createServer } from "node:http";
+import path from "node:path";
+import process from "node:process";
+import { createMiddleware } from "@hattip/adapter-node";
+import express from "express";
+import { listenPortSearchByEnv } from "./http";
+
+async function main() {
+  //
+  // require buildPath with require.cache invalidation
+  //
+
+  const buildPath = path.resolve(process.argv[2]);
+
+  // require.cache trick as a cheap live reload
+  function requireBuild() {
+    console.log(`[entry-dev] Loading ${buildPath}`);
+    delete require.cache[buildPath];
+    return require(path.resolve(buildPath)) as typeof import("./entry-hattip");
+  }
+
+  let build = requireBuild();
+  fs.watch(path.dirname(buildPath), (eventType, filename) => {
+    if (eventType === "change" && path.basename(buildPath) === filename) {
+      build = undefined!;
+    }
+  });
+
+  //
+  // express app
+  //
+
+  const app = express();
+  const server = createServer(app);
+
+  // serve client build assets
+  app.use(
+    "/build",
+    express.static(build.assetsBuildDirectory, {
+      immutable: true,
+      maxAge: "1y",
+    })
+  );
+  app.use("/", express.static("./public"));
+
+  // main logic as hattip handler
+  app.all("*", (req, res, next) => {
+    build ??= requireBuild();
+    return createMiddleware(build.createHattipApp())(req, res, next);
+  });
+
+  // start app
+  const port = await listenPortSearchByEnv(server);
+  console.log(`[entry-dev] Server running at http://localhost:${port}`);
+}
+
+main();

app/server/entry-hattip.ts

@@ -0,0 +1,97 @@
+import { type RequestHandler, compose } from "@hattip/compose";
+import { once } from "@hiogawa/utils";
+import * as build from "@remix-run/dev/server-build";
+import { createRequestHandler } from "@remix-run/server-runtime";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+import type * as hono from "hono";
+import { logger } from "hono/logger";
+import { initializeServer } from "../misc/initialize-server";
+import { TRPC_ENDPOINT } from "../trpc/common";
+import { createTrpcAppContext } from "../trpc/context";
+import { trpcApp } from "../trpc/server";
+
+// based on https://github.com/hi-ogawa/vite-fullstack-example/blob/92649f99b041820ec86650c99cfcd49a72e79f71/src/server/hattip.ts#L16-L28
+
+export function createHattipApp() {
+  return compose(
+    createLogger(),
+    createBootstrapHandler(),
+    createTrpchandler(),
+    createRemixHandler()
+  );
+}
+
+// re-export for entry-dev
+// ts-prune-ignore-next
+export const assetsBuildDirectory = build.assetsBuildDirectory;
+
+//
+// remix
+//
+
+function createRemixHandler(): RequestHandler {
+  const remixHandler = createRequestHandler(build);
+  return async (ctx) => {
+    const response = await remixHandler(ctx.request);
+    return response;
+  };
+}
+
+//
+// trpc
+//
+
+function createTrpchandler(): RequestHandler {
+  return async (ctx) => {
+    if (!ctx.url.pathname.startsWith(TRPC_ENDPOINT)) {
+      return ctx.next();
+    }
+    return fetchRequestHandler({
+      endpoint: TRPC_ENDPOINT,
+      req: ctx.request,
+      router: trpcApp,
+      createContext: createTrpcAppContext,
+      onError: (e) => {
+        console.error(e);
+      },
+    });
+  };
+}
+
+//
+// bootstrap
+//
+
+function createBootstrapHandler(): RequestHandler {
+  const initializeServerOnce = once(initializeServer);
+  return async (ctx) => {
+    await initializeServerOnce();
+    return ctx.next();
+  };
+}
+
+//
+// logger
+//
+
+function createLogger(): RequestHandler {
+  // borrow hono's logger by minimal hattip-hono compatibility layer
+  // https://github.com/honojs/hono/blob/0ffd795ec6cfb67d38ab902197bb5461a4740b8f/src/middleware/logger/index.ts
+  const honoLogger = logger();
+
+  return async (ctx) => {
+    let res!: Response;
+    await honoLogger(
+      {
+        req: { method: ctx.method, raw: ctx.request },
+        get res() {
+          return res;
+        },
+      } as hono.Context,
+      async () => {
+        res = await ctx.next();
+      }
+    );
+    return res;
+  };
+}

app/server/entry-vercel.ts

@@ -0,0 +1,12 @@
+import { createMiddleware } from "@hattip/adapter-node";
+import { createHattipApp } from "./entry-hattip";
+
+// cf. https://github.com/hattipjs/hattip/blob/03a704fa120dfe2eddd6cf22eff00c90bda2acb5/packages/bundler/bundler-vercel/readme.md
+
+export default createVercelHanlder();
+
+function createVercelHanlder() {
+  return createMiddleware(createHattipApp(), {
+    trustProxy: true,
+  });
+}