Remix + Vite + Express - no root js files

[lauhon]

In the intro blog for vite support https://remix.run/blog/remix-heart-vite

One advantage of vite is supposed to be "TypeScript for all your files. No more .js or .mjs files needed at the root of your project. Use vite.config.ts and even run your custom server via tsx server.ts or node --loader tsm server.ts."

Allthough the vite-express template still comes with a server.js

Would be cool to have the benefit in the starter. I would be willing to raise a PR here, but I would need a pointer as to how to start the app in production.

Two ideas would be with tsx, or tsm loader for example, but both seem to be unstable, not recommended for production, options.

[lauhon]

Another approach would be to have second build step that builds server.ts and have the result be the starting point of the npm start command

[kiliman]

Probably the easiest would be to convert the file to TypeScript and then update package.json

"scripts": {
  "build": "remix vite:build && npm run build:server",
  "build:server": "esbuild server.ts --platform=node --outdir=build/server",
  "dev": "npm run build:server && node build/server/server.js",
  "start": "cross-env NODE_ENV=production node build/server/server.js"
}

Vite already uses esbuild, so it's not another dependency. This will use the same compiler as the Remix app.

Also need to update the production server import since we are importing a sibling file

// server.ts
const remixHandler = createRequestHandler({
  build: viteDevServer
    ? () => viteDevServer.ssrLoadModule("virtual:remix/server-build")
    : // @ts-expect-error this file is generated at build time and relative to build directory
      // eslint-disable-next-line import/no-unresolved
      await import("./index.js"),
});

See https://github.com/kiliman/remix-vite-express

[jrr]

I'm using tsx for now, in order to at least have TypeScript, but I would much prefer to instead send the express code through Vite, with the same bundling behavior, etc. as all the Remix code.

Seems like this ought to be possible! Like, one of the benefits of "Just use Vite" could be flexibility for situations like this.

[reconbot]

Another loader in the mix, esbuild-register uses esbuild as a require/loader hook and I use it to execute my server. Works great and is well supported.

[kiliman]

I created a Vite plugin that lets you use Express for development and production entirely in TypeScript. No special build steps. It's all handled automatically by Vite and Remix.

https://github.com/kiliman/remix-express-vite-plugin

[ikibalnyi]

@kiliman is it compatible with react-router 7?

[dy0gu]

As of now, there is still no starter template using a server.ts file with vite.

It's really annoying having a whole typescript codebase except for one file, I've tried everything and can't seem to get a production build to work with a custom server.ts file compiled, although dev seems to work okay with tsx.

With @kiliman's plugin you have a quick fix but I tried it and found it sacrificed customizability for ease of use, when customizability is exactly what I want when using a custom server.

For example, adding middleware is straight forward and well implemented but if I understood correctly there is a hardcoded log saying "Server started on...." which can not be removed or, in my case, replaced with custom logic that I need after the express server starts listening.

The env variable names for the PORT and HOST are also hardcoded which is a deal breaker for me when using a monorepo with multiple servers that need their ports/hosts individually identified in a single CI/CD environment.

If no one has any other suggestions I guess personally my best option will be to head over to @kiliman's repo and propose PRs for a callback after the server starts listening and add parameters to pass env variable values/names dynamically. It seems to be a really well build plugin and a good base for what I believe both me and the OP are after.

[kiliman]

You can customize the production server using the createSever callback from createExpressApp. By default, it creates a basic server from the Express template.

If you need more customization, please feel free to submit an issue/PR. Thanks!