server.mjs

import * as fs from "node:fs";
import { createRequestHandler } from "@remix-run/express";
import { installGlobals } from "@remix-run/node";
import chalk from "chalk";
import express from "express";
import morgan from "morgan";

const start = Date.now();

let viteVersion;
let remixVersion;
if (process.env.NODE_ENV !== "production") {
  // get the vite version from the vite package.json
  viteVersion = JSON.parse(
    fs.readFileSync("node_modules/vite/package.json")
  ).version;
  remixVersion = JSON.parse(
    fs.readFileSync("node_modules/@remix-run/dev/package.json")
  ).version;
}

installGlobals();

let vite =
  process.env.NODE_ENV === "production"
    ? undefined
    : await import("vite").then(({ createServer }) =>
        createServer({
          server: {
            middlewareMode: true,
          },
        })
      );

const app = express();

// handle asset requests
if (vite) {
  app.use(vite.middlewares);
} else {
  // add morgan here for production only
  // dev uses morgan plugin, otherwise it spams the console with HMR requests
  app.use(morgan("tiny"));
  app.use(
    "/assets",
    express.static("build/client/assets", { immutable: true, maxAge: "1y" })
  );
}
app.use(express.static("build/client", { maxAge: "1h" }));

// handle SSR requests
app.all(
  "*",
  createRequestHandler({
    build: vite
      ? () => vite.ssrLoadModule("virtual:remix/server-build")
      : await import("./build/server/index.js"),
  })
);

const port = 3000;
app.listen(port, "0.0.0.0", () => {
  if (process.env.NODE_ENV === "production") {
    console.log("http://localhost:" + port);
  } else {
    // since we're using a custom server, emulate what vite dev server prints

    const elapsed = Date.now() - start;

    console.log(
      `  ${chalk.greenBright.bold("VITE")} ${chalk.green(
        `v${viteVersion}`
      )} ${chalk.blueBright.bold("Remix")} ${chalk.blue(
        `v${remixVersion}`
      )} ready in ${chalk.bold(elapsed)} ms`
    );
    console.log();
    console.log(
      `  ${chalk.greenBright.bold("➜")}  ${chalk.bold("Local:")}   ${chalk.cyan(
        "http://localhost:" + port
      )}`
    );
    console.log();
  }
});