How do I use remix with NestJs Backend

[Stancobridge]

Going through the documentation I found out that remix exposes few server adapters, and there is none for NestJs. I was wondering if there is a way to create a custom server adapter or any existing one already...

[sergiodxa]

If you can put NestJS inside an Express one you could use the Express adapter of Remix.

Another option is that you build your own adapter for Nest (you could even publish it to npm so more people could use it!).

And a final option is to run two services, one for Nest and another for Remix.

[Stancobridge]

I would like to go for the second option but no documentation on how to

[sergiodxa]

@Stancobridge right now you will need to check the code on another adapter, the Express one is probably the most similar to what you will need (https://github.com/remix-run/remix/blob/main/packages/remix-express/server.ts), there's a PR to add an option to pass a custom adapter when creating a project and adds some docs on this.

[kaarnale]

I was wondering about this, too. Any updates?

[Stancobridge]

still waiting on this though

[sergiodxa]

The new Remix Stack feature let you pass a --template option and use any repo on GH or another URL when creating a new project, if you build a custom adapter and create a repo on GitHub with the template you could do something like

nix create-remix@latest my-nest-remix-app --template username/remix-nest-adapter-template

And get a project with Nest and Remix already configured

[AndresRodH]

I have been working on adding NestJS as a way to incrementally.. let's say, upgrade, our existing server stack. What I am doing right now is using Nest purely for their Module and Service convention, and utilities surrounding those.

You could use the express adapter and a Nest Standalone Application.

I haven't figured out how to make Nest and Remix happy when using NestFactory.create, but this works for us right now. We already have a GraphQL server and we mainly will be using Nest for the features I already mentioned.

We are passing services to loaders and actions via getLoadContext and it's working pretty well so far!

[AndresRodH]

Actually, I just got it working with NestJS -- or at least, that's what it seems. My solution was to add a global filter to nest via useGlobalFilter.

// remix-handler.ts
import path from 'path';
import type { ExceptionFilter, ArgumentsHost } from '@nestjs/common';
import { Catch } from '@nestjs/common';
import type { NextFunction, Request, Response } from 'express';
import type { GetLoadContextFunction } from '@remix-run/express';
import { createRequestHandler } from '@remix-run/express';

const MODE = process.env.NODE_ENV;
const BUILD_DIR = path.join(process.cwd(), 'build');

////////////////////////////////////////////////////////////////////////////////
function purgeRequireCache() {
  // purge require cache on requests for "server side HMR" this won't const
  // you have in-memory objects between requests in development,
  // alternatively you can set up nodemon/pm2-dev to restart the server on
  // file changes, we prefer the DX of this though, so we've included it
  // for you by default
  for (const key in require.cache) {
    if (key.startsWith(BUILD_DIR)) {
      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
      delete require.cache[key];
    }
  }
}

@Catch()
export class RemixHandler implements ExceptionFilter {
  catch(_exception: unknown, host: ArgumentsHost): void {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse<Response>();
    const request = ctx.getRequest<Request>();
    const next = ctx.getNext<NextFunction>();

    const getLoadContext: GetLoadContextFunction = (req) => req.uow;
    const handle =
      MODE === 'production'
        ? createRequestHandler({ build: require('../build'), getLoadContext })
        : (req: Request, res: Response, next: NextFunction) => {
            purgeRequireCache();
            return createRequestHandler({ build: require('../build'), mode: MODE, getLoadContext })(
              req,
              res,
              next
            );
          };

    void handle(request, response, next);
  }
}

// and then in your main.ts file just do

let app = await NestFactory.create(ServerModule);
app.useGlobalFilters(new RemixHandler());
await app.init();

[AndresRodH]

@Cryptic-ai the setup in the repo I sent a couple messages back is pretty much what I set up at work and HMR is working fine for us.

What does your setup look like?

[wh1337]

@AndresRodH I did a direct copy from you, however I'm running it in a codespace. Let me grab the files locally and test. Also, that was a quick reply and much appreciated! 😄

[AndresRodH]

@Cryptic-ai btw I made that repo in like 20 mins so I'm not even sure everything is working correctly.

Are you running yarn dev? I forgot to update the README 😅

[wh1337]

@AndresRodH no worries, it's still further than I would have got, and yessir running yarn dev. I'm waiting for the node modules to install now locally so i can see if it was some weird codespace issue 🤔

[wh1337]

Hm that's strange. When running it locally on a windows device, I'm getting the

 Error: Script not found: C:\Users\user\code\remix-nestjs\yarn watch

error, yet it worked fine on codespace lol let me retry in code space and ensure the ports are being forwarded

@AndresRodH

[antoinechalifour]

Hi there !

I just added Nest to a Remix app, using the express adapter.

• Here is a Nest Controller using the native express objects to run Remix : https://github.com/antoinechalifour/remix-hexagonal-architecture/blob/master/src/web/remix/RemixController.ts

If you don't need Nest's mechanisms such as DI, this controller should be enough . Otherwise you can integrate Nest and Remix further :

• Since I like the DI in Nest, I am in fact using the Remix context to "bridge" the actions and loaders, and instantiate and execute them in Nest ;
• ... which make possible writing decorators for having a Nest-like paradigm for Remix data functions : https://github.com/antoinechalifour/remix-hexagonal-architecture/tree/master/src/web/remix/decorators ;

There are also other ways to do it. In another project (private unfortunately), I declare all the pages as @Injectable(), and use a JavaScript proxy object as the context, which uses a moduleRef for resolving pages in actions / loaders.

---

EDIT : old message, with broken links but most logic is the same.

The "Nest to Remix" bridge module source code is here https://github.com/antoinechalifour/remix-hexagonal-architecture/tree/master/src/remix-nest-adapter

TLDR :

• there's a RemixController using the createRequestHandler : https://github.com/antoinechalifour/remix-hexagonal-architecture/blob/master/src/remix-nest-adapter/RemixController.ts
• it requires a little bit of tweaks to start the app (run remix watch and nest start) : https://github.com/antoinechalifour/remix-hexagonal-architecture/blob/master/package.json
• then the app can import the Remix module using its build output : https://github.com/antoinechalifour/remix-hexagonal-architecture/blob/master/src/main.ts
• (bonus) I am using the DataFunctionArgs "context" attribute to execute any loader and action code in Nest. Using this i can leverage Nest's dependency injection framework : https://github.com/antoinechalifour/remix-hexagonal-architecture/blob/master/app/routes/login.tsx
• (bonus) I then added quality of life decorators for handling things like Authentication, ... and runtime payload validation : https://github.com/antoinechalifour/remix-hexagonal-architecture/blob/master/src/web/Actions.ts

[wh1337]

Seems your links are broken, do you updated ones?

[antoinechalifour]

I just updated the post with new links, and more options to do so :)

[geongeorge]

I've developed a straightforward project based on the excellent Remix guide. This project maintains separate directories for Nest and Remix, simplifying updates. It supports Remix Hot Module Replacement (HMR) and offers a unified command for starting the development server.

You can view the project here: Nest Remixed.

[JinYuSha0]

You can take a look at my open source projects nest-remix
all nestjs features can be used on remix, dependency injection, global or local interceptors, filters, pipes, guards
hope you will like it