API in Remix without resources routes

[sloonz]

For various reasons, I wanted to use regular express for my /api/* hierarchy. I found a really nice way to integrate it, so I figure I’d share. Note that it’s using Vite.

1. Create the API

As a simple example, app/api.tsx :

import express from "express";
const api = express.Router();
api.get("/test", (req, res) => res.json({success: true}));
export default api;

2. Re-export the API from the entry point (app/entry.server.tsx)

export {default} from "@remix-run/dev/dist/config/defaults/entry.server.node";
export {default as api} from "./api";

3. Use the API on the custom server

// ...
const isDev = process.env.NODE_ENV === "development";
const devServer = isDev && await import("vite").then(vite => vite.createServer({server: {middlewareMode: true}}));
// ...
app.use("/api", isDev ?
  ((req, res, next) => devServer.ssrLoadModule("virtual:remix/server-build").then(m => m.entry.module.api(req, res, next)).catch(err => next(err))) :
  (await import("./build/server/index.js")).entry.module.api);

One nice thing is you have "server-side HMR" : you don’t have to restart your server if you modify your API.

One thing that could be better : @remix/express exporting the default handleRequest instead of having to monkey-import from remix-run/dev or using remix reveal.

[tanvirraj]

do you have any long example i'm also looking something like this
express api
but remix app user express like default
and i'm calling api from remix loader