Feature: Use NestJS integration as SSR/http server

[brandonroberts]

Which scope/s are relevant/related to the feature request?

platform

Information

NestJS is very popular Node.js framework for building APIs and is widely used in the Angular ecosystem. This feature would allow NestJS to be used as the server for the /api routes, and provided integration as the backend for SSR.

Links:

• https://www.npmjs.com/package/vite-plugin-node
• https://docs.nestjs.com/

In development, NestJS would be configured under the /api path. During the build it would host the Analog application and provide additional configured API routes.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[Yberion]

Hello, which adapter will use the implementation?

It would be great if it could use the Fastify adapter by default. 😄

[brandonroberts]

It will be set up in a way where you can control the implementation. There will be an API "entry point" where you can add additional configuration to the NestJS/Fastify adapter.

[goetzrobin]

Seems like this could be helpful:
https://github.com/wjq990112/nestjs-ssr

[nhvu95]

Does anyone currently work on this?

[goetzrobin]

@brandonroberts how should routing work with nest? Since nest has the concept of controllers which themselves have a path and methods inside of these controllers that can have their own path, I think it might be better to just require an app module inside the server folder and then let people define their own structure inside that folder however they please?

[brandonroberts]

Yea, that's where I'm leaning also. Integrating with Nest would be more manual in some regards, because there's no file based routing, and developers would have more control over the server integration

[brandonroberts]

@nhvu95 no one is working on this yet

[goetzrobin]

@brandonroberts @nhvu95 I can spend some time on this if you are open to that

[goetzrobin]

Haven't made too much progress unfortunately. I am running into issues with loadSSRModule trying to use the vite-plugin-node and more.
I did find this project however: https://github.com/cyco130/vavite and it has an example that might be helpful.
Specifically these examples:

• https://github.com/cyco130/vavite/tree/main/examples/nestjs
• https://github.com/cyco130/vavite/tree/main/examples/nestjs-vite-plugin-ssr

@brandonroberts just to confirm my overall understanding of what is going on is correct:
In DEV: vite dev server renders our Angular application (and ideally runs the NestJs Express or Fastify server as a middleware under the /api route)
In PROD: vite builds static assets to the public assets folder of the NestJs Express or Fastify server and our code makes that server aware how to render Angular on the server.

Does that sounds about right?

[brandonroberts]

Yes, that sounds right. Maybe we could start by providing an example repo the two working together as a starting point. No rush on this though as we already have a working server solution in Analog and the trpc integration

[jeremylcarter]

I am happy to help out on this issue. Who is coordinating the effort?

[Flusinerd]

Hi @jeremylcarter .
I have done some work but ran into a roadblock. If you want you could take a look at this:
https://github.com/Flusinerd/analog-nestjs-example/tree/ssr

Basically the issue is that import.meta.glob does not exist, when using rollup and therefore the analog router can't be imported. If you remove the import of the router in src/app/app.config.ts, then everything works except for the router ofc.

If you have further questions, I'd be happy to help. I also had a bit of a conversation about this on the analog discord inside the Contributing -> ideas channel.

[jeremylcarter]

Thanks! I'll have a look

[cskiwi]

@jeremylcarter Any update/progress on the nestjs integration?

[brandonroberts]

Made some progress here with efforts from @cskiwi

Able to serve/build the nestjs server along with the Analog app in this repo

https://github.com/brandonroberts/nestjs-analog

SSR support still needs work

[cskiwi]

@brandonroberts oh nice. I'll try and find some time to look at the SSR, unless you figured it out by then :)

[cskiwi]

@brandonroberts, been a bit busy. Any changes regarding the NestJS "integration".

[brandonroberts]

Same here. No new movement on it as of late

[jeremylcarter]

Sorry everyone. I was planning on looking at this integration, but I got distracted by Dapr NestJS integration instead :)

https://github.com/jeremylcarter/nest-dapr/tree/feature/actor

What are the blockers for Analog + NestJS?

[cskiwi]

I made some progress that can be relevant, right now this is skipping the analog. So just having a NestJs + SSR and native angular.

I think once I get it up and running it should be possible to port for analog.
Repo: https://github.com/cskiwi/herring-gull-angular
Open issues (one is just nx + vite related)

• Routing not finding local library (nx) nitedani/vite-plugin-angular#10
• Client hydration not working? nitedani/vite-plugin-angular#11
• Routing not working on SSR nitedani/vite-plugin-angular#12

UPDATE; got it all working without analog. will try to port it soon
UDPATE 2: found new issue, shouldn't be blocking

[cskiwi]

@brandonroberts, @jeremylcarter

So I finally got some time to work on it, but i'm on a strange roadblock which I can't figure out.
I've made a new nx repo including 3 projects and more or less the latest package versions:

• A default analog project
• A Nestjs + Angular project
• A Nestjs + Analog project

So I'm currently having 2 issues,

1) Analog is not a function

If the package.json includes "type": "module", none of the analog projects build and they throw:

failed to load config from C:\Users\glenn\Documents\Code\cskiwi\analog-nestjs\apps\nestjs-analog\vite.config.ts

 >  NX   analog is not a function

2) vite_dev_server is not a function

If I remove the module type, then the non-analog project won't build with some ESM error, but the default analog project builds, the nestjs-analog project then gives me:

failed to load config from C:\Users\glenn\Documents\Code\cskiwi\analog-nestjs\apps\nestjs-analog\vite.config.ts

 >  NX   (0 , import_expose_vite_dev_server.default) is not a function

So here is where I'm currtly stuck. If anyone wants to have a look at it, feel free to clone the following repo to get going: https://github.com/cskiwi/analog-nestjs

[cskiwi]

For anybody wondering. I made some good progress running nestjs and angular as a single app (it's now running! )
However, that joy ended fast when I wanted to add apollo/graphql and have some SSR up and running.

This is starting from the template: https://github.com/cskiwi/angular-nestjs-vite
If you'd move the GraphQLModule from src/app/main.ts to the shared (between SSR and Client render): src/shared.module.ts you get the following error at runtime:

vavite/reloader: Failed to load server entry
SyntaxError: [vite] Named export 'ApolloLink' not found. The requested module '@apollo/client/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@apollo/client/core';
const {ApolloLink} = pkg;

    at analyzeImportedModDifference (file:///C:/<path>/node_modules/vite/dist/node/runtime.js:514:13)
    at ViteRuntime.processImport (file:///C:/<path>/node_modules/vite/dist/node/runtime.js:894:66)
    at ViteRuntime.cachedRequest (file:///<path>/node_modules/vite/dist/node/runtime.js:912:21)

however when I build the project and then run the project with node <path>/server/index.js it works. So it's something that's only happening at serve time

I tried lot's of things, but none worked:

• adding "esModuleInterop": true, to my tsconfig
• changing moduleResolution to budler
• using vite-plugin-cjs-interop
• ....

As the analog community is a bit larger then one of it's dependencies, might be usefull to have this here. Because at one point someone might experience the same error (sorry if this is not allowed)

[cskiwi]

Update from my side. got a simple working example: https://github.com/cskiwi/angular-nestjs-starter
Still working on the material template as angular material 18 gives some strange behaviour