Nest: Why NestJS doesn't support React and Vue?

[clRcoDE]

this is feature requesting about nestjs the new nodejs framework

nestjs has really big potential to be one of the most wanted frameworks in nodejs world ( especially the enterprise side )

and it can be great choice for javascript developers who want to learn new nodejs thing

its has modular architecture and typescript support out of the box

but it is deeply integrated with angular framework

without any prejudices angular is losing its competition to react and vue

many developers love react , many big companies support and using it

and many new people want to learn it

but there isn't any documentary or support to working nestjs with react or vue

i cant understand why @kamilmysliwiec resisting to add support for any other frontend library to nestjs

its better for nestjs to be frontend library independent

[jmcdo29]

What do you mean by "doesn't support React or Vue"? I'm curious if I am understanding your question or not.

NestJS is a server side framework, just like Express, Koa, Hapi, etc. The only way that NestJS "supports" Angular is that it follows a similar architecture pattern and you can use the ng builder instead of the typescript compiler. There is a segment in the documentation called Model-View-Controller that describes how to use a templating language (like Handlebars) with the framework. The whole point of a server is to be front-end agnostic. You can use whatever front-end framework you please.

[twittwer]

@clRcoDE can you explain what you mean with "deeply integrated with angular framework"?

[clRcoDE]

NestJS is a server side framework, just like Express, Koa, Hapi, etc. The only way that NestJS "supports" Angular is that it follows a similar architecture pattern and you can use the ng builder instead of the typescript compiler. There is a segment in the documentation called Model-View-Controller that describes how to use a templating language (like Handlebars) with the framework. The whole point of a server is to be front-end agnostic. You can use whatever front-end framework you please.

okey i know what is server side framework and what is frontend framework :)

there is a huge similarity between angular and nest syntax
this will make hard time learning nestjs for none-angular developers

even there is no document or article about how to use react (or vue) and nestjs together and what is potential problems to deals with

[twittwer]

similarity between angular and nest syntax

Can you provide a sample for:

• what syntax disturbs you
• how you would expect it

[jmcdo29]

even there is no document or article about how to use react (or vue) and nestjs together and what is potential problems to deals with

There isn't docs on how to use Angular with the framework either, by the way.
The biggest reason NestJS follows the Angular architecture is simply because there is a well defined structure to it. It takes away the issue of "How do I structure my app?", and allows developers to get back to writing code instead of worrying about structure.

By the way, I figured you knew what a server framework was, but figured it was also still worth pointing out that it should be front-end agnostic. 😉

[underfisk]

When you work with Vue or React itself you usually wanna provide a build which is a single file or chunks and your server simply delivers on http request.
That is one way of doing things but you can have something like some framework do that is specify for example a webpack configuration and when you update something of your React code you're server will have an updated build but still is a final result (you can't write code inside server with React or Vue) but you can set one of your views as a chunk part or a build file.

[clRcoDE]

There isn't docs on how to use Angular with the framework either, by the way.

all of examples and documents outside is about nestjs + angular

The biggest reason NestJS follows the Angular architecture is simply because there is a well defined structure to it. It takes away the issue of "How do I structure my app?", and allows developers to get back to writing code instead of worrying about structure.

acceptable
but it will be a good idea to support React developers by adding React-sugar syntax and define better documents for new comers 🤔
@kamilmysliwiec

[underfisk]

@clRcoDE That is not a good idea mixing a state based application which React is designed on with a server that in a scalable way is stateless (since it may need to share data across instances) and so keeping an isolated state isn't good. Anyway Angular architecture is the only well designed one using Typescript which kinda makes our life easier to work with JS.
I agree with you at some point in syntax level but making Nest an opinionated framework won't help so that's why people is free to design a React-sugar syntax or another syntax style.

Frontend data flow must not be confused and mixed with backend data flow, it doesn't work the same way and is not mentioned too (that's why backbone surges to fix the model synchronization between multiple data sources)

[jmcdo29]

all of examples and documents outside is about nestjs + angular

None of the examples are specifically about Angular, at least from the Nest documentation site. Any outside examples are the issue with those authors and should be taken up with them, it is not a fault of the framework.

acceptable
but it will be a good idea to support React developers by adding React-sugar syntax and define better documents for new comers 🤔

What kind of React-sugar syntax would you be thinking of? Would this syntax bring breaking changes to the rest of the framework? I don't think that the syntax of the framework scares off new devs, it may just be a bit of a learning curve, but that is the same with any new framework.

[underfisk]

@jmcdo29 I agree with you, it's not the framework that scares off the new developers also i think Nestjs is pretty easy to learn (if the developer has not knowledge of express it will be harder to learn nest ofc).

[clRcoDE]

@clRcoDE That is not a good idea mixing a state based application which React is designed on with a server that in a scalable way is stateless (since it may need to share data across instances) and so keeping an isolated state isn't good.

🤔

Anyway Angular architecture is the only well designed one using Typescript which kinda makes our life easier to work with JS.

disagree , Typescript is well supported in React too

I agree with you at some point in syntax level but making Nest an opinionated framework won't help so that's why people is free to design a React-sugar syntax or another syntax style.

disagree , nestjs is opinionated framework by the way, opinionated by angular , its far away from a independent library

Frontend data flow must not be confused and mixed with backend data flow, it doesn't work the same way and is not mentioned too (that's why backbone surges to fix the model synchronization between multiple data sources)

agree with this

[underfisk]

@clRcoDE React wasn't made on top of typescript, it supports with nice typing's but isn't directly made for ts which angular is (supports js but badly so that's what i mean)

disagree , nestjs is opinionated framework by the way, opinionated by angular , its far away from a independent

That's why it's explaining it's heavily inspired by Angular which by following their architecture makes it opinionated in angular way but doesn't mix other frameworks and strictly make you do something without freedom. (May be quite opinionated yes but i don't consider it as SailsJS where it is very opinionated)

[clRcoDE]

What kind of React-sugar syntax would you be thinking of? Would this syntax bring breaking changes to the rest of the framework? I don't think that the syntax of the framework scares off new devs, it may just be a bit of a learning curve, but that is the same with any new framework.

i not scare of learning curve i'm scare of zero documentation and conflicts with React

[underfisk]

@clRcoDE If nestjs was made with pure js it would be harder without docs :D but since we are with typescript and still has good explanation on prop/methods/.. is very easy and we don't need to often go on docs (at learning phase)

[jmcdo29]

i not scare of learning curve i'm scare of zero documentation and conflicts with React

@clRcoDE How do you currently integrate your React front-end with your server?

[clRcoDE]

How do you currently integrate your React front-end with your server?

both are separate from each other , express has an easy syntax with lots of documents and your hands are open for changes
there is thousands of article/questions/issues about react + express on the web

[clRcoDE]

React wasn't made on top of typescript, it supports with nice typing's but isn't directly made for ts which angular is (supports js but badly so that's what i mean)

React wasn't made on top of the typescript but you can do typescript in React with ease

[underfisk]

React wasn't made on top of the typescript but you can do typescript in React with ease

Yes i know that but still there were points that could have achived such as decorators and much more that they didn't and Angular on the other side did, so there's quite a difference

[jmcdo29]

I feel like express has a lot of _tutorials_ but NestJS has just as much _documentation_ if not more. The thing you seem to be missing are _examples_ on how to integrate NestJS with React.

React wasn't made on top of the typescript but you can do typescript in React with ease

While this is true, React was not created to have a strict architecture, which is what Nest is overall trying to achieve, an architecture that is easy to follow, hence the Angular-esque following.

there is thousands of article/questions/issues about react + express on the web

And most of this is due to Express's popularity and age. Express has been around the block for a while and it was my first framework to work with. Give it time, and Nest will have the same. Even better, make a post yourself about Nest + React. The issue here isn't the framework documentation, it's the lack of articles that you can find, not a fault of the framework in any way.

[underfisk]

@jmcdo29 Express extension is made on top of middlewares and also this applies on socketio
Since Nest allow's you to override some behavious and you can still set middlewares to process what you want, if you're main goal is to keep express but in a typescript way i think nest is doing good
There are some parts where Nest makes you locked and i mean that i found some ways that i had to do a workaround specially when you want to access services at adapter level which i was sad about

[clRcoDE]

agree with you
now i'm think i was wrong , nest and react can work together but documentation is about zero , nest is still growing and its not mature as express/hapi yet
and we need nest developers who code React/Vue on front side share their experiences
seems most of nest users are angular developers and no one like react-syntax-sugar idea

cheers
@jmcdo29
@underfisk
@kamilmysliwiec

[underfisk]

In fact I'm using React with Nest in production but my combination is that I serve a react build with Nest and the app (spa) uses websocket to retrieve the data. So far is great. Also I have our mobile app with react native working good too

[clRcoDE]

In fact I'm using React with Nest in production but my combination is that I serve a react build with Nest and the app (spa) uses websocket to retrieve the data. So far is great. Also I have our mobile app with react native working good too

this is awesome i'm React/React Native developer too
. what is your service/application ?
. is there any need to config React app with webpack/parcel ?
. how much do you think Nestjs is harder to develop than express ? was it worth it?

friendly request :
. can you write an article about combining these technologies together?
@underfisk

[underfisk]

• It's a project management platform (SaaS) which offers a real-time app and a mobile implementation too with native
• My backend is running (with nestjs ofc) serving a static build (at production/staging) produced from webpack but at development what i do is use backend to host some endpoints (react has a proxy for that port) and websockets events (using socketio) so nothing special indeed, it's the normal way

• Not harder, i started developing a framework likely as Nestjs but my main goal was not making a modular framework, it was a easier version with less things. Express is very easy and nestjs so far has helped me a lot taking care of express and socketio at same time. What nestjs offers for express and that's what i like the most, is the decorators where you can optionally have or not some parameters and also add metadata for express routes. So resuming, it was totally worth

• What you mean on article? There are lot of resources i can tell you that will help you understand how backend usually works with frontend frameworks but in the end it's pretty simple, the frameworks are simply bundled (they have to be transpiled if using babel es6+) so you'll get a file that can be served from your server routes and browser will interpret it so i don't think there's something special about it
  Another thing, you can have a parallel bundling and backend reload and serve the new build or whatever you wanna know as a real-time reload

I don't know if this helped you, i hope it does :)

[BrunnerLivio]

Thanks everyone for your patience and friendly help! Really awesome to see the community help each other out :cat:

I will close this issue since it is not related to NestJs. Feel free to discuss further if there is any need :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.