Actually working React Router v7

Author: vcarl

app/entry.server.tsx

@@ -1,7 +1,6 @@
 import "dotenv/config";
 // started with https://developers.cloudflare.com/workers/get-started/quickstarts/
 import express from "express";
-import { createRequestHandler } from "@react-router/express";
 // import { broadcastDevReady } from "react-router";
 // import path from "path";
 import { verifyKey } from "discord-interactions";
@@ -18,31 +17,7 @@ import * as report from "~/commands/report";
 import * as track from "~/commands/track";
 import setupTicket from "~/commands/setupTickets";
 
-declare module "react-router" {
-  // Your AppLoadContext used in v2
-  interface AppLoadContext {
-    whatever: string;
-  }
-
-  // TODO: remove this once we've migrated to `Route.LoaderArgs` instead for our loaders
-  interface LoaderFunctionArgs {
-    context: AppLoadContext;
-  }
-
-  // TODO: remove this once we've migrated to `Route.ActionArgs` instead for our actions
-  interface ActionFunctionArgs {
-    context: AppLoadContext;
-  }
-}
-
 // const BUILD_DIR = path.join(process.cwd(), "build");
-const viteDevServer = isProd()
-  ? undefined
-  : await import("vite").then((vite) =>
-      vite.createServer({
-        server: { origin: "localhost:3000", middlewareMode: true },
-      }),
-    );
 
 const app = express();
 
@@ -56,16 +31,37 @@ app.use(Sentry.Handlers.requestHandler());
 Route handlers and static hosting
 */
 
-if (viteDevServer) {
-  app.use(viteDevServer.middlewares);
-} else {
+if (isProd()) {
+  console.log("Starting production server");
   app.use(
     "/assets",
-    express.static("build/client/assets", {
-      immutable: true,
-      maxAge: "1y",
+    express.static("build/client/assets", { immutable: true, maxAge: "1y" }),
+  );
+  app.use(express.static("build/client", { maxAge: "1h" }));
+  // @ts-expect-error Because this is a weird circular import that React Router wants for custom server integrations
+  // https://github.com/remix-run/react-router-templates/blob/f1a43a647de66d811b85d7f96d3b57b7e29ce0e7/node-custom-server/server.js#L41
+  const source = await import("./build/server/index.js");
+  console.log({ source });
+  app.use(source.app);
+} else {
+  console.log("Starting development server");
+  const viteDevServer = await import("vite").then((vite) =>
+    vite.createServer({
+      server: { middlewareMode: true },
     }),
   );
+  app.use(viteDevServer.middlewares);
+  viteDevServer
+    .ssrLoadModule("./app/server.ts")
+    .then((source) => {
+      app.use(source.app);
+    })
+    .catch((error) => {
+      if (typeof error === "object" && error instanceof Error) {
+        viteDevServer.ssrFixStacktrace(error);
+      }
+      console.log({ error });
+    });
 }
 app.use(express.static("build/client", { maxAge: "1h" }));
 
@@ -105,21 +101,6 @@ registerCommand(report);
 registerCommand(track);
 registerCommand(setupTicket);
 
-const build = viteDevServer
-  ? () => viteDevServer.ssrLoadModule("virtual:react-router/server-build")
-  : // @ts-ignore This breaks when `build/` doesn't exist, like during CI
-    await import("../build/server/index.js");
-
-// needs to handle all verbs (GET, POST, etc.)
-app.all(
-  "*",
-  createRequestHandler({
-    // `remix build` and `remix dev` output files to a build directory, you need
-    // to pass that build to the request handler
-    build,
-  }),
-);
-
 /** ERROR TRACKING
   Must go after route handlers
 */

app/index.ts

@@ -0,0 +1,11 @@
+import "react-router";
+import { createRequestHandler } from "@react-router/express";
+import express from "express";
+
+export const app = express();
+app.use(
+  createRequestHandler({
+    // @ts-expect-error - virtual module provided by React Router at build time
+    build: () => import("virtual:react-router/server-build"),
+  }),
+);

app/server.ts

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "npm run dev:init; run-p dev:css dev:app",
+    "dev": "npm run dev:init; run-p dev:css dev:bot",
     "start": "npm run start:migrate; npm run start:bot",
     "test": "vitest",
     "build": "run-s build:*",
@@ -14,14 +14,14 @@
     "kysely": "kysely",
     "": "",
     "start:migrate": "kysely migrate:list; kysely migrate:latest",
-    "start:bot": "react-router-serve build/server/index.js",
+    "start:bot": "node build/server/index.js",
     "prepare": "husky || true",
     "typecheck": "react-router typegen && tsc -b",
     "build:css": "npm run generate:css --minify",
     "build:app": "react-router build",
     "dev:init": "run-s start:migrate kysely:seed generate:db-types",
     "dev:css": "npm run generate:css -- --watch",
-    "dev:app": "react-router dev",
+    "dev:bot": "tsx watch --exclude 'vite.config.*' ./app/index.js",
     "kysely:seed": "kysely seed:run",
     "generate:css": "tailwindcss -o ./app/styles/tailwind.css",
     "generate:db-types": "kysely-codegen --log-level debug --dialect sqlite --out-file ./app/db.d.ts; prettier --write ./app/db.d.ts"
@@ -46,6 +46,7 @@
     "discord.js": "^14.16.0",
     "dotenv": "^16.0.1",
     "express": "^4.18.1",
+    "isbot": "^5",
     "kysely": "^0.27.5",
     "kysely-ctl": "^0.10.1",
     "lodash-es": "^4.17.21",

package-lock.json

@@ -2,10 +2,10 @@ import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
-export default defineConfig({
-  server: {
-    port: 3000,
-    origin: "localhost:3000",
+export default defineConfig(({ isSsrBuild }) => ({
+  build: {
+    rollupOptions: isSsrBuild ? { input: "./app/server.ts" } : undefined,
   },
+  server: { port: 3000, origin: "localhost:3000" },
   plugins: [tsconfigPaths(), reactRouter()],
-});
+}));