Use separate server.dev.js and server.prod.js files

node-custom-server/Dockerfile

@@ -15,8 +15,8 @@ WORKDIR /app
 RUN npm run build
 
 FROM node:20-alpine
-COPY ./package.json package-lock.json server.js /app/
+COPY ./package.json package-lock.json server.prod.js /app/
 COPY --from=production-dependencies-env /app/node_modules /app/node_modules
 COPY --from=build-env /app/build /app/build
 WORKDIR /app
-CMD ["npm", "run", "start"]
+CMD ["npm", "run", "start"]

node-custom-server/Dockerfile.bun

@@ -18,8 +18,8 @@ WORKDIR /app
 RUN bun run build
 
 FROM dependencies-env
-COPY ./package.json bun.lockb server.js /app/
+COPY ./package.json bun.lockb server.prod.js /app/
 COPY --from=production-dependencies-env /app/node_modules /app/node_modules
 COPY --from=build-env /app/build /app/build
 WORKDIR /app
-CMD ["bun", "run", "start"]
+CMD ["bun", "run", "start"]

node-custom-server/Dockerfile.pnpm

@@ -19,8 +19,8 @@ WORKDIR /app
 RUN pnpm build
 
 FROM dependencies-env
-COPY ./package.json pnpm-lock.yaml server.js /app/
+COPY ./package.json pnpm-lock.yaml server.prod.js /app/
 COPY --from=production-dependencies-env /app/node_modules /app/node_modules
 COPY --from=build-env /app/build /app/build
 WORKDIR /app
-CMD ["pnpm", "start"]
+CMD ["pnpm", "start"]

node-custom-server/README.md

@@ -84,7 +84,7 @@ Make sure to deploy the output of `npm run build`
 ```
 ├── package.json
 ├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
-├── server.js
+├── server.prod.js
 ├── build/
 │   ├── client/    # Static assets
 │   └── server/    # Server-side code

node-custom-server/package.json

@@ -3,8 +3,8 @@
   "type": "module",
   "scripts": {
     "build": "react-router build",
-    "dev": "cross-env NODE_ENV=development node server.js",
-    "start": "node server.js",
+    "dev": "cross-env NODE_ENV=development node server.dev.js",
+    "start": "node server.prod.js",
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {

node-custom-server/server.dev.js

@@ -0,0 +1,35 @@
+import * as vite from "vite";
+import express from "express";
+
+const PORT = Number.parseInt(process.env.PORT || "3000");
+const app = express();
+
+console.log("Starting development server");
+
+const viteDevServer = await vite.createServer({
+  server: { middlewareMode: true },
+});
+// `vite.middlewares` is a Connect instance which can be used as a middleware
+// in any connect-compatible Node.js framework.
+// https://vite.dev/guide/ssr#setting-up-the-dev-server
+app.use(viteDevServer.middlewares);
+
+viteDevServer
+  // `ssrLoadModule` automatically transforms ESM source code without bundling,
+  // enabling live refresh of changed modules similar to Hot Module Reloading.
+  .ssrLoadModule("./server/app.ts")
+  .then((source) => {
+    // Here, `source` is effectively behaving like:
+    // `import * as source from 'server/app.ts'`
+    app.use(source.app);
+  })
+  .catch((error) => {
+    if (typeof error === "object" && error instanceof Error) {
+      viteDevServer.ssrFixStacktrace(error);
+    }
+    console.log({ error });
+  });
+
+app.listen(PORT, () => {
+  console.log(`Server is running on http://localhost:${PORT}`);
+});

node-custom-server/server.prod.js

@@ -0,0 +1,18 @@
+import express from "express";
+
+import { app as rrApp } from "./build/server/index.js";
+
+const PORT = Number.parseInt(process.env.PORT || "3000");
+const app = express();
+
+console.log("Starting production server");
+app.use(
+  "/assets",
+  express.static("build/client/assets", { immutable: true, maxAge: "1y" }),
+);
+app.use(express.static("build/client", { maxAge: "1h" }));
+app.use(rrApp);
+
+app.listen(PORT, () => {
+  console.log(`Server is running on http://localhost:${PORT}`);
+});

node-custom-server/server/app.ts

@@ -1,23 +1,33 @@
 import "react-router";
 import { createRequestHandler } from "@react-router/express";
 import express from "express";
+import morgan from "morgan";
+import compression from "compression";
 
 declare module "react-router" {
+  // If you need to pass data through from this script into React Router, this
+  // will give you type safety throughout our app.
   interface AppLoadContext {
     VALUE_FROM_EXPRESS: string;
   }
 }
 
 export const app = express();
 
+app.use(compression());
+app.disable("x-powered-by");
+
 app.use(
   createRequestHandler({
     // @ts-expect-error - virtual module provided by React Router at build time
     build: () => import("virtual:react-router/server-build"),
     getLoadContext() {
+      // This is where we'll return the actual values we defined the types for
+      // earlier in the file.
       return {
         VALUE_FROM_EXPRESS: "Hello from Express",
       };
     },
-  })
+  }),
 );
+app.use(morgan("tiny"));