Remix Vite Express and Nodemon

[matys1]

When you set up a new project using Remix, Vite and Express template, what's the recommended modern best practice for handling the server.js file? Is it something like nodemon or PM2? I assume Vite cannot also watch server.js and do a full restart of the server since Vite is just an Express middleware?

[admirsaheta]

You're correct! In Remix with the Vite and Express template, there's no need for a separate process manager like nodemon or PM2 to watch server.js. Here's how Remix handles it with best practices:

• Remix uses a built-in development server based on Vite.
• This server automatically watches for changes in your code, including server.js.
• When a change is detected, Vite rebuilds and restarts the server.

As for the server.js file it shouldn't contain complex logic or business logic, its primary role is to configure Remix and set up the Express server.

[matys1]

@admirsaheta you're right that server.js shouldn't contain complex business logic (e.g. express APIs for the app) as those should be defined using remix loader and action functions which get bundled and outputted in build/server. server.js is indeed mostly for server config like setting CSP headers, compression etc. but I noticed that:

1. server.js is in JavaScript and not TypeScript
2. making changes to server.js does not restart the actual express server (Vite does not appear to be watching this file)

It would be nice if server.js was in TypeScript because I do need to extend it a bit to create a couple of express APIs for an external system and it would be nice to understand what's the best way to restart the express server when changes are made. For the time being I hooked up nodemon as I wasn't able to get Vite to watch the file and restart it for me (I'm new to Vite so maybe this is possible).

Recommendations welcome.

[jrestall-finact]

You can use a number of options, tsx is a very popular one such as used in the epic-web stack. ts-node is another popular option as seen in xHomu's template here.

A less popular option I personally really like is vite-node since it aligns with using vite for the dev server, can share vite config, use vite plugins and supports fast HMR of the server.ts code. Try them all and see which you prefer.

// package.json
"scripts": {
  "dev": "vite-node --watch ./server.ts"
  ...

One complexity with vite-node is that to support HMR you need to cleanup any resources before they are re-initialized on HMR in the "vite:beforeFullReload" hook, such as releasing server ports.

// server.ts

// Vite-Node HMR hooks
if (import.meta.hot) {
  // Before we reload the application, ensure that we stop the running servers to release ports.
  import.meta.hot.on("vite:beforeFullReload", async () => {
    console.info("[HMR] Restarting Server");
    await attemptGracefulShutdown();
  });
}

const attemptGracefulShutdown = async () => {
  if (viteDevServer) {
    viteDevServer.close();
  }

  async function closeServer(server: http.Server) {
    return new Promise((resolve, reject) => {
      if (server?.listening) {
        server.close((e) => (e ? reject(e) : resolve("ok")));
      } else {
        resolve("ok");
      }
    });
  }

  // server is a global variable set by server = app.listen(port, () => {
  await closeServer(server);
};

[x0s3]

if u are using node just use the new built in --watch flag 😄

e.g:

node --watch ./server.mjs

or if using ts

node --watch --experimental-strip-types ./server.mts

[matys1]

@jrestall-finact this is great for dev. But how do you make sure the server.ts file gets compiled to server.js when running npm run build for production? I'm simply try to use tsc on server.ts it also performs redundant compilation of the output from npm run build since server.ts contains:

const remixHandler = createRequestHandler({
  build: (viteDevServer
    ? () => viteDevServer.ssrLoadModule("virtual:remix/server-build")
    : await import("./build/server/index.js")) as unknown as ServerBuild,
});

[jrestall]

For the production server.ts -> server.js build you still need to use esbuild like in xHomu's template.

"build:server": "esbuild --platform=node --format=esm ./server.ts --outdir=./",

[matys1]

@jrestall thanks, this is brilliant! vite-node for dev and esbuild for prod is a magical combination. What a setup.

[kiliman]

I use my plugin https://github.com/kiliman/remix-express-vite-plugin which bundles the express server with the Remix app in a single bundle. This way I don't have to juggle separate builds and the Express app can even import from the Remix app.