Can we combine a NestJS app with React?

[@earthpligrim5757]

thanks a tonn saviour @mariusespejo . Its been a very smooth, simple and crisp explanation. Amazed by this tutorial. apreciate your effort towards the community. however there a little error from your steps when been used with latest version of turo i.e '^1.12.5', I had to add persistent as true like below "dev": { "cache": false, "persistent": true }, in order to the application run if not the fe is starting and crashing down. I had a hard time in figuring out and thought i could help someone via this comment.

[@mariusespejo]

Ah yes thank you! Yup in the newer versions turbo expects you to set long running process (e.g. things in watch mode) as “persistent”. Fyi my most recent video is an expansion of this setup which includes creating type safety between the api and client, if you’re interested, but it also shows the most up to day setup that we did in this video.

[@snoudev]

@@mariusespejo Hello Marius, I love your content. Could you please do a video on how to deploy this codebase 😍😍 ? Thank you very much for your amazing video🤜🤛

[@belkocik]

@@mariusespejo Yeah!

[@nopik4669]

Very cool and useful video! Waiting for the next videos Nest JS and React with NX Monorepo

[@chambaderaphael8946]

Nx, rspack and vite, excellent combo for netsj/react | vue

[@NickBoyd-v9c]

Incredible tutorial just what I needed! Very clear with each step of the walkthrough, will definitely coming back for more content! I never write comments but had to show some support haha. Thanks so much!

[@mariusespejo]

Thanks!! Glad you found it useful

[@peacekper]

Thank you so much for this! I'm working on a personal project and have always used python for my backend and wanted to try something new with NestJS. This was super helpful!

[@mariusespejo]

Hope your project goes well!

[@patrickbelanger6253]

Very neat! I was looking for such solution to bundle my client with my nest js backend. Thank you for sharing!

[@skpatel20]

Great tutorial! Exactly what I was looking for and more. One thing I miss though: How to share common code with instant IDE update (i.e. when I change somewthing in common code, it should be reflected in react and api code instantly.

[@mariusespejo]

Turborepo has support for internal packages for shared code. I assume it’s set up to restart apps locally if changed, not positive but worth a try

[@christopheanfry2425]

Really nice and useful video. Starting with nest following your videos about it and I really like it, the architecture and the documentation are amazing compared to express. 🙏🙏

[@bugraotken]

Incredible tutorial, thank you Marius!

[@MerthanMerter]

tutorials like this should always cover client side routing.....

[@mariusespejo]

It’s a tutorial on setting up a monorepo for any client, routing for a specific client is completely out of scope. Anyways if you’re curious you just need to use react-router which is well documented, and setup the server such that it always returns index.html unless the path starts with /api

[@MerthanMerter]

@@mariusespejo didn't know it would work that simple. thank you for fast response.

[@narebinhaa]

Amazing content once more! You just saved my personal project.

[@deriegle]

Very cool! I just started using Turborepo on a project and really enjoy it. It would be cool to get the dev/prod environments to be the same so you’re always working from a single server. I know that’s not easy but it’s something I’ve been wanting to do for awhile. I almost got it to work with NestJS/Remix before but it wasn’t perfect.

[@mariusespejo]

Yeah I imagine that’s not straightforward since Nest locally runs on webpack while remix comes with their own app server I think. Personally I’d probably just run the two servers separately in all environments to get dev/prod parity

[@dungledang5120]

Thank you for explaining everything step by step from scratch. I really appreciate your hard work in helping the community. Once again, thank you very much.

[@mariusespejo]

Glad to help!

[@abacuswithrehan264]

Nice tutorial, was stuck on monorepos for weeks.

[@mariusespejo]

Glad to help!

[@TroyJoachim]

Very good tutorial. A great use case for this is for Vite PWAs.

[@kellslte]

I enjoyed this walkthrough and am thinking of all the things I could do with this. Great Video! I have some reservations though: I work in a team and do not want to constantly monitor how my teammates play nicely with the mono repo. I might use this for applications I build on my own.

[@yashkhd1100]

Excellent setup. Only think missing is a shared lib between client and server like sharing common models/DTO objects between them.

[@mariusespejo]

Turborepo does have support for that, you can configure a common lib for the apps to pull from

[@pedro.carrasco]

Thanks for the video Marius. Is a very good approach to monorepo and I like the development flow that you propose. We deploy the server and the client in different machines, but is good to have the two parts in the same repo in my opinion. I will try it...

[@mariusespejo]

I do think server and client having their own deployments ultimately would scale better. But yeah if you have a need to deploy changes from both ends together, then you might benefit from a monorepo and a single CI/CD pipeline. Also when you’re making a feature that changes something on both sides, then you can have a single git branch for that… can share code, types, and eslint/prettier config, etc.

[@asimalqasmi7316]

So great work. I liked watching your coding process. Keep up the great coding!

[@mariusespejo]

Thank you Asim!

[@asimalqasmi7316]

@@mariusespejo I changed reactjs to astro I did it since it is vite 👍 I will try to learn more about Nestjs

[@DenisMikhalev]

That's exactly what I needed to know, thanks!

[@JonBrookes]

this is brilliant, thanks for this. The pattern you use is clear and easy to understand. I'm inspired to re-implementing a go project I have that uses a react front end with this approach and Nestjs for comparison. Like you say, NestJS has a lot of structure, some would say its opinionated, I don't care, it gives us comprehensive guidelines to follow best practice I would tend to go with something like this to go for containerised deploy which would give a number of options for hosting. Out of interest I wondered, is that your favoured approach with NestJS or do you tend to go for back end as a service providers or other / both ?

[@ixixix-vw2rq]

Thank you Marius. Excellent video!

[@palvikas5]

Great video Marius! I had the same idea some time back to have Next.js + NestJS monorepo with shared types for all the entities but couldn't able to configure that. Do you know how you would configure shared types which are TypeORM entities from the NestJS' side? It would be really great if you can make a video on it! Thanks!

[@mariusespejo]

You can maybe try something like this: turbo.build/repo/docs/handbook/sharing-code/internal-packages I mean in general also understand that single repo means each of yours app technically should have access to any common code/folder

[@mohamedfoula503]

Thanks for the video it is really helpful. I have a question though, why not use the serve static in local development too instead of making turbo and run each app on its own?

[@mariusespejo]

Because in local development you’re changing the code often and you need an actual dev server, like with vite or webpack, which can do things like hot module reload or auto refresh browser on changes, etc. It’s just more convenient

[@BUTTERFLY-eo6ob]

Is the prod mode that you showed us considered as Server side rendering since the serveur is serving the client build to the browser ? Thanks for this very nice tutorial !

[@mariusespejo]

Good question, no it does not count as server-side rendering. SSR means typically you are rendering the page of your client on the server, on the fly. In this case we are building the client upfront and simply having the server serve up those files. So you effectively have a single page application here. If you are interested in SSR your best bet are using frameworks such as NextJS or Remix

[@mohamedazizdhouibi]

Hi Marius Espejo, I really enjoyed this video! It was super informative. I was wondering if you could consider making a follow-up video on deploying such a project on free hosting platforms. I think it would be immensely helpful to many of us who are eager to take our projects to the next level without breaking the bank xD. Thanks for your great content!

[@mariusespejo]

Yeah good thought, will think about it, thanks!

[@naranyala_dev]

more about monorepo please, thank you

[@santyas]

Great example! Have you tried to deploy it on vercel? It can't run a main.js output dist file

[@freddiefrexie7524]

thanks man truly helpful and inspiring👏🙌

[@ericwinkdev]

Thanks so much for this video, and your more recent on ts-rest. If you were to include ts-rest in this setup, how would you manage the contract files? Where would you choose to place them when sharing between your front-end and back-end?

[@mariusespejo]

Good question and actually a great video idea, but to answer your question: turborepo has this concept of “internal packages” which is really any code that you want to share across your apps, so in my mind that’s a pretty good place to maintain a contract

[@ericwinkdev]

@@mariusespejo Thanks for such a quick reply! As I'm reading more about TurboRepo, I definitely agree with you on that. Keep up the awesome work!

[@farshidhamidi]

Thanks Marius. Looks awesome! Can you tell me what do you use in your terminal which gives you suggestion as you type? Thanks

[@mariusespejo]

There are several tools that can give you that ability but I have been using Warp personally

[@farshidhamidi]

yeah I use oh-my-zsh but I'll give this a go! Thanks. Keep it up

[@leiayuri]

Hey Marius. Would u have any video talking about various scenarios where we can cause memory leaks in our nestjs app and how to avoid them?

[@mariusespejo]

I do not currently have a video for that. But I imagine you can get memory leaks from things like caching, ORMs (can sometimes load a bunch of data into memory), things relating to EventEmitter (e.g. maybe too many listeners), etc. anything really that might not be properly garbage collected. I don’t know that I have any specific advice on how to avoid, but make sure to keep an eye on your app’s memory usage in test environments, run some stress testing to see how it handles large loads. Then in production make sure you have alarms set for when memory goes unexpectedly high. Hope that helps!

[@oleksandrsalivon]

Could you show how to deploy that kind of project to Vercel?

[@benjaflinston]

Good content bro. But, how can I use git in this project? Would I create two repositories and save indivudualy or just one with turbo configs?

[@mariusespejo]

The point of monorepo is to have one repo for two or more applications, if you have two repositories that’s longer a monorepo. Hope that helps

[@SamuelPares]

Amazing! I've been using NestJs and Vite React SPA in different repositories, so I need to duplicate all types, DTOs, etc. If I understood correctly, with TurboRepo, I can build both projects in one repository, sharing code between them. Since I don't need SEO, I don't see why I should use NextJs or Remix. However, I have some doubts about this approach. Could you please enlighten me: 1) I build SaaS multi-tenant apps, identifying the tenant by the subdomain. So, in NestJs, when I access request hostname, what will I get? Will it be localhost or the actual subdomain and domain accessed in browser? 2) How should I handle authentication? Currently, I implement login by returning an access token and refresh token, but now, would it be better to use session-based authentication?

[@mariusespejo]

Yes if SEO is not a big concern and you’re okay with SPA no need for Next/Remix. They have their own pros/cons but not going to discuss that here. Re: your questions. You might be overthinking it a little bit. The main point is that both apps are in the same repo, so yes you can share code and types. However everything else is entirely up to you. If you want to you could still deploy your react app separately as you do today and nothing would change, just that now the code lives together. In the setup in this video the Nest server also becomes the client server in production so that you don’t need an extra server to serve up the client SPA. E.g if your server’s domain is samuelpares.com, then The Nest server would respond with the SPA (index.html) for all routes except what you designate as the api path, e.g. you can set it up so that sameuelpares.com/api doesn’t return index.html but instead sends requests to your API. Your react client would just then need to make requests like fetch(/api/whatever”); So that also means this setup has no effect on your auth strategy, you can pick either of those approaches. Hope that makes sense. Also if your main problem is simply sharing types or general end-to-end type safety check out my video on ts-rest

[@SamuelPares]

@@mariusespejo I see, thanks.. just another thing, about the proxy in development mode, I need that my server receives the subdomain is being accessed, do you have any ideas how could I do it using still relative paths in fetchs?

[@AleksandrChernovIT]

How we can dockerize this stack? I`m so confused when read turbo-docs about dockerize ci/cd, maybe u have experience in this? Thanks for this video, great tutorial!

[@mariusespejo]

It’s important to understand that the build output here is just a client SPA and a nodejs server (nest) which serves up that client build. So really it would be just like any other dockerized node app. Make sure you run build and make the client build available to the server

[@julihermes]

Thanks for this awesome video!

[@AjaySharma-vz9ei]

thanks for this amazing tutorial, i have came across an issue i have added 2 nest api's in the app when i do npm i in the root the node_modules is to getting generated in the individual nest api folder

[@mariusespejo]

That’s expected if your apps require dependencies at different versions

[@wassimbenr]

Hello Marius, great video! I have one question: I m currently developing a small app and I went with Next JS client & NestJs server, the problem is that I have only implemented the authentification with next-auth client side, and the rest of the API call with nestJs. Is that a problem for guards to give access to only connected users with specific roles?

[@mariusespejo]

I can’t tell you if there is or isn’t a security problem with your setup, that depends totally on how your infrastructure is setup. Is your API publicly accessible and can anyone simply spoof a user with roles? If so then yes it’s a problem. Do you have the servers in a VPC to make sure only requests from your client are coming in? Then not having authentication on the API is probably okay if you set that up correctly. Why not just implement both authentication and authorization on the API though? That would make the most sense to me

[@wassimbenr]

@@mariusespejo thanks for the comment. Yes my bad, I started with nextJs first and I used next-auth because it’s easy but now when I get to focus more on the server side I start frustrating I am using nestjs with prisma and mongoDB. Do you have any tips or suggestions that I can follow because I am new to it.

[@mariusespejo]

There is a video in my channel on how to do auth with Nest. You also could just ditch nest and just do everything on Next, have you thought about that? If you only have basic API needs, you can just do your prisma/mongo work in Next directly

[@wassimbenr]

@@mariusespejo well noted! I'll have a look ! thank you.

[@leiayuri]

Hi, man, thanks in advance. Let say if you we have a multiple NestJS applications where we have a React as our client. Would be possible to share a common folder between my client and all my nestjs server? Which approach would you use to achieve that result?

[@mariusespejo]

Yes, turborepo supports having local libraries for shared code

[@jarod51]

Very cool tutorial ! Will the combination of Nest as backend + Next as frontend work the same ?

[@mariusespejo]

Not necessarily. I mean the idea is the same, you can have one root build command that builds both your apps. Single repo and same CI/CD pipeline. However you now have two servers to spin up upon deployment, whereas in this video we have one (because the Nest is serving up the static client).

[@chrisl_ca]

Hi Marius! This is an awesome video! Thanks for did it! And I have a question, I followed the tutorial but in vscode I always get lint error in client/.eslintrc.cjs file. if you solved that hope you could share! thanks!

[@tootyrnt5533]

Nice! Didn't know Nest was capable of serving entire SPAs. Assuming this also works for other frameworks?

[@mariusespejo]

Yup it’s agnostic since SPAs are all mostly just an index.html with static files

[@stubrei]

Great tutorial,it's very helpfull❤️🙌🏻

[@amazekhashaa7309]

that was one of the most progressive tutorial i ever seen.

[@mohammediliassaffani8877]

thanks for the video . can u make a Course that u build a ful stack app with react and nest and postgresql thank you again

[@dipeshshivrame4632]

Hello Marius, I deployed React (using Vite ) and Nestjs separately both on vercel. The problem I am facing is "GET" request is working but I am getting CORS issue for POST request even though I have specified origin in enableCors in nestjs. Do you have any idea on this?

[@mariusespejo]

You might also need to configure stuff for vercel specifically, via vercel.json vercel.com/guides/how-to-enable-cors Note I haven’t tried deploying a nest app to vercel so I’m not 100% sure

[@tleveque]

I think it would make more sense to use Nest in combination with Angular. They are so similar!

[@mariusespejo]

Similarity doesn’t necessarily mean it would make more sense lol I would pick solutions based on actual tradeoffs (e.g. in comparison to similar tools in the space like react, vue, etc.)

[@edwardcolonhidalgo2465]

excellent video!!!!!!! thank you so much

[@LawrenceChege]

THANK YOU! So so much

[@rahmatsulistio]

Nice video bro. What screen recorder are you using? I use OBS in Mac M1, but the color is a bit blurry

[@mariusespejo]

I use screenflow but I know most other tutorial channels do use OBS, it’s a good choice. The blurry text could be from incorrect export settings. It’s also often good to use bigger font sizes so there’s more pixels (I think). Plus the color/theme of editor also plays a part to a degree, e.g. consider themes with higher contrast.

[@redakker]

Thank you very much!

[@mariusespejo]

You’re welcome!

[@veracsthedefiled]

I tried to add a shared typescript project just to share types and functions with frontend, NestJS doesn't automatically restart when that shared project changes, its a problem.

[@MaxProgramming]

I was looking for something like this because I really like Nest but I wanna do it with Next. Not using Next might be a little pain for me lol. But it makes sense to not spin up 2 servers

[@mariusespejo]

Personally I think that Next can handle the backend on it’s own, unless you really need a standalone Nest API for other clients

[@satyampawar1634]

Which font do you use in VS Code it looks amazing... Please let me know 😅

[@mariusespejo]

I think that’s Cascadia Mono, it’s free!

[@satyampawar1634]

@@mariusespejo thanks mate

[@chechochimes]

Awesome! Thanks for this guide. Do you have some NestJs courses with advanced content (here or published in Udemy or similar)? Thanks again!

[@mariusespejo]

I don’t at this time but likely in the future!

[@Raihan004]

thank you very much

[@CanseSelecta]

Hello Marius, Thanks a lot for your video !!! I have a question about repository of a project of this type (Nest + React) under a git repository. I currently followed your tutorial and I wanted to create a repository on git, I tried several methods but I cannot push the entire application. I only have apps/client but apps/api does not want to be pushed. Do you have an idea or a tip to resolve this problem?

[@CanseSelecta]

Article or video ?

[@mariusespejo]

I can’t think of a reason why it would not allow to push. Make sure to check the any errors that show when you attempt to push. Also make sure that you don’t have accidentally added to your gitignore

[@CanseSelecta]

Ok thanks @@mariusespejo

[@CanseSelecta]

That was juste a .git create in api but not in client. And a .gitignore of .IDEA

[@petroliashchynskyi9900]

Great vid! Have you tried Nx or Lerna?

[@mariusespejo]

I have not! Looking to try out Nx sometime, I’ve heard good things. Lerna from my understanding is now owned by the folks behind Nx? So I assume that’s kind of going away

[@joebowbeer]

@@mariusespejo Nx and Lerna are orthogonal and simbiotic, but also check-out lerna-lite, which only adds what workspaces does not.

[@danielguldbergaaes6432]

@@mariusespejo I think that is correct, if you are using lerna in a project then just keep doing that, but don't start another project with it.

[@rudeadyet1992]

Awesome tutorial! Could you also make a CI/CD deployment strategy for such arch? Thanks :)

[@mariusespejo]

Yeah I’ll see if I can but at a high-level deploying a nest app is really like deploying any other node app, which you can do on platforms like vercel, aws, etc. For the pipeline pick whatever tool you like, have it pull code from your repo, use turbo to build your app, the build output is basically your deployable.

[@rudeadyet1992]

@@mariusespejo That makes sense, cheers! :)

[@marekiaro636]

I'd love to see how to dockerize it and deploy automatically, I'm a newbie and it will be very helpful

[@MicroVita-i1h]

Can the client deploy the dist folder on the server?Does the api still need to upload the dist folder?Is it okay if the user runs index.html from the client dist folder?

[@mariusespejo]

In general the client needs some kind of server, it’s up to you what to use. But the point of the example here is that the all code is in one repo, we already have server for the api, so might as well have it serve up the client

[@oyinlolaolasunkanmi]

Can you do a follow up, with CI/CD and deployment to the cloud ?

[@mariusespejo]

Possibly but I have a list of topics to cover and it might take a while. Note it’s not as complicated as it seems. All you need is a pipeline that runs “npm run build” and the output is simply a node/nest app that you can deploy in so many places

[@markhermano1]

Great video! I'm trying to switch from Nx to Turbo, I wonder if the setup also adopts the same principle as Nx that we should make apps as lightweight as possible and do the heavy lifting on the shared packages or libraries within the workspace. I guess this is subjective but I want to know your thoughts on this.

[@mariusespejo]

I don’t have a strong opinion on that to be honest but if you do have common logic used across multiple apps, or perhaps common UI components used across multiple clients, then having that defined once in a shared package makes a lot of sense. Turbo also does support “internal packages” exactly for this purpose

[@desertpillar5286]

Nice way of doing it! I'm sure that has it's uses. Personally I would try and not couple them too much and instead use an Nx monorepo and deploy the frontend to something like Netlify and the backend somewhere else. But can absolutely see this as a nice way of doing simple projects. But I think Nx is pretty superior to Turbo.

[@mariusespejo]

The two apps are still fairly independent, changing code in one side doesn’t necessarily affect the other. It just so happens that the nest server serves up the client build, so that’s fairly light coupling in my mind. But yes, in more complicated projects you’d probably want to scale each side independently, at which point separate deployments would make a lot of sense. And yes you totally could use Nx as an alternative, definitely seems more feature rich, turbo just felt dead simple to get started with for me personally

[@desertpillar5286]

@@mariusespejo once you go Nx you can never go back ;). It does all of the config etc that you needed to do with turbo, and all the generators work while you can also easily build your own plugins (for more advanced projects. Another favorite feature is that is supports whatever programming language you want to use while still keeping everything managed and ran as npm scripts. Would love to see a video of you covering NX too. :) love your videos, keep up the great work!

[@gwynbleidd9921]

Thanks for the tutorial! I really liked it and decided to use it for a project I'm working on. Can you please tell me how to create a gitignore file so I wont push unnecessary files to github?

[@mariusespejo]

Make sure to always check docs if you’re not sure. Also typically when you create projects like nest, it comes with a .gitignore, you might just need to move it to the root of your monorepo git-scm.com/docs/gitignore

[@gwynbleidd9921]

@@mariusespejo The client and the api both have their own .gitignore files. Not sure how to combine them or if I even need it :\ Also thanks for the quick response!!

[@mariusespejo]

Right, use that as a starting point. Make a .gitignore at the root and copy things over to it, from each app, to combine them. You might just need to update the paths, taking into account that your apps are inside /apps. If that still doesn’t make sense to you I suggest reading the docs and truly understanding how gitignore works

[@kot3st859]

Heyo! I'm using mongoDB. I did everything as you explained and showed. At the stage when i run npm start my server working fine and i get in console server working on my port (its nice). But my client part doesnt work. There is even no message with link in console like visit localhost::port. How to solve it?

[@mariusespejo]

Sorry I wouldn’t know the problem from this comment alone, might want to ask in stackoverflow

[@thongtech1984]

But when we deployed the app, we used to deploy only the dist folder, so can you explain how it would work and how to do it?

[@mariusespejo]

Yes to deploy the nest app you mostly need the dist folder, but in this instance you also need the build for the client

[@shakapaker]

Hi! Is it possible to add also Python microservice that communicates with NestJS using RabbitMQ? Where to put it inside monorepo and If it's not node so I can't manage python deps using turbo?

[@mariusespejo]

I’m not totally sure about that, turbo definitely seems like a it’s meant to work with the node/npm ecosystem. If it’s a totally different language I’d probably just do it in a different repo if it was me personally

[@balsatech]

I'm having issues to deploy it. "/api" route is being recognized as a page even adding "exclude: api/*" on server static module, and i can't do requests. Do you have any idea about this problem?

[@balsatech]

Quick update: I just found a way to deploy it, uploading a video explaining right now

[@somalydev]

Can you show video combine NestJs with Flutter using yarn workspace?

[@mariusespejo]

Not really familiar with flutter sorry. I think yarn workspaces are only for js projects?

[@ae7057]

At 3:13, what plugin are you using to get command auto-completion?

[@ixixix-vw2rq]

I need to know this as well 👀

[@mariusespejo]

Lots of different ways to get intellisense/autocomplete on the terminal but here I’m using warp which has that as a feature built-in

[@hitarashi]

Hey I really got Inspired and started to use this method but can we do ssr with nest vite react ?

[@mariusespejo]

If you specifically want ssr you’re better off using nextjs

[@hitarashi]

​@@mariusespejo So How can we integrate nestjs with nextjs I think we can use nest-next package would appreciate if you make a tut for nextjs with nestjs

[@mariusespejo]

I don’t think it’s worth integrating them together. If you specifically want your APIs built with Nest, then just deploy it as it own app/api, proxy requests from next to it. The integration is basically the API requests. If you don’t have a real need for a standalone API however consider just using next alone, build the API there, it’s a fullstack framework

[@hitarashi]

Okay thanks for your quick reply ❤️

[@nahim.hossain.shohan]

Could you please suggest how can i do the part of proxy thing in nextJS? Like the vite.config.ts I have next.config.ts. how can i do that in next 14?

[@mariusespejo]

You wouldn’t. See the core difference in the SPA setup here is that in production the client build is served by the nest server. So any api calls the client makes just goes to that same server. We proxy in dev to simulate that, because in dev the client has its own server. For a next + nest setup however you have two servers to spin up in production, so you would need to make http calls from next to nest. Totally different setup. I would suggest however if you plan to use Next, consider if you really need a separate app for the API still

[@sushantrajbanshi4508]

Please do one for NestJS + Angular with Turborepo 👏

[@mariusespejo]

Replace the react setup with however you create angular apps, the rest is 90% the exact same thing

[@sushantrajbanshi4508]

@@mariusespejo Thanks a lot, btw have you used Nx monorepo ?

[@mariusespejo]

I have not but I’ve heard it’s a good alternative

[@sushantrajbanshi4508]

@@mariusespejo I think it's better than Turbo in terms of community and ecosystem of plugins. You should give it a try. 👍

[@mariusespejo]

Totally! it’s been around much longer so I definitely see that, it’s on my todo list to compare the two

[@xDiggie]

Hello, this helped me a lot! I just need help with the .env file (I'm using ConfigModule for it) . So the .env is in the root of api directory, and it works and can be accessed with npm run dev from the main root directory( where turbo.json is), but it doesn't work after build and then npm start-ing. What could be a solution for this? Tried placing the .env file in the main root and changing some options for ConfigModule but it doesn't work. Any feedback would be appreciated. Thanks!

[@mariusespejo]

You can pass “envFilePath” param to ConfigModule.forRoot to customize where it should look for the file. If the path to it is different between your src and build/dist, then you need to add some conditional logic there, for example envFilePath: fs.existsSync(pathToFile) ? pathToFile : null However I would question why the path would be different. Personally I would suggest placing .env on the root of the entire project, not the api directory. That’s where configmodule will look for it by default, assuming you’re running the apps for the root of the project

[@xDiggie]

​@@mariusespejo Thanks! Just a follow up question, having gone further into making my app, why is my npm build suddenly including a src directory on the dist of api? With that, there's error showing up that there's no module found in the path 'apps/api/dist/main' as the 'main' is now inside a 'src'. So I tried making it work by adding the /src before 'main' in root package json like ` "start": "node apps/api/dist/src/main" ` but now the client doesnt work. Rewatching the vid I can see that it's because ` ServeStaticModule.forRoot({ rootPath: join(__dirname, '../..', 'client', 'dist'), }), ` needs to add another ../ to find client/dist/index. What is the right way to do this? should I prevent having a 'src' directory on build inside my api/dist? if so how? Thanks again!

[@mariusespejo]

I would not expect there to be an src folder in dist. I would suggest fixing that problem specifically. I have seen that issue before though, I think it happens when you import stuff outside of src in your code, but I’m not positive

[@xDiggie]

@@mariusespejo Fixed both of them! Seriously, thanks! Subbed

[@xDiggie]

@@mariusespejo Hey, how are you doing! I wanna reach out again for a problem I've encountered. I'm trying to deploy to Vercel and I just couldn't make it work after trying out different suggestions and settings from anywhere. The error I got was there was no "public" directory for output. so I changed some settings there to use "apps/api/dist" which didn't work too. I tried with "apps/client/dist" as well but it doesn't find other pages to navigate with react-router. Maybe you have an Idea how to make this work? or any other deployment method (no need to be in vercel), to show a live build. Thanks.

[@Weagle1337]

Hi, how do you handle the SPA routes with front end nested routes? i'm getting error when I enter to a path like: "/user/232", idk what is happening

[@mariusespejo]

You need to make your server return the SPA on any route, then reserve a base path for your api like /api create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

[@Weagle1337]

@@mariusespejo Yes with Express I know how to do it, but, do you know a solution for this in nest js?

[@mariusespejo]

Understand that nest is just a layer on top of express.. it’s basically the same solution, create a catch all route. Check the docs or any of my videos if you’re still not sure

[@jakovfilipsabolicek798]

Is this viable for serverless deployment?

[@mariusespejo]

Probably but don’t think it would be the best setup, you’d be better off using Next.js

[@pew4410]

Bro how do I deal with localhost 3000 which creates an 404 error?? It can run ones but then it breaks which is annoying

[@mariusespejo]

I can’t tell from this comment alone what the problem might be, generally 404 means not found, figure out what’s missing in your config

[@whoami9269]

If someone encounters a similar issue where Vite exits automatically after running npm run dev in the root directory (turbo run dev), you need to downgrade it to ^1.10.4 - `npm i -D turbo@1.10.4`.

[@whoami9269]

vercel/turbo/issues/5331

[@tranquillityEnthusiast]

We need to combine with angular, become they are similar

[@mariusespejo]

You can if you want to, you can use whatever client framework

[@jaroslavhuss7813]

Big thanks... I just can not stand the Nextjs's BE solution. Not just from the architectural point of view.

[@futurenew1091]

thanks for sharing but you can help me config run migration mysql2 with this structure. Thank you !

[@mariusespejo]

Sorry I don’t really have the capacity to help people write their own code, I suggest reading docs and taking what you learned here and give it a shot yourself.

[@whoisthe.l]

How lucky i am or is this the power of seo?

[@mariusespejo]

Must be lucky!

[@jale9955]

Can you share this repository please?

[@mariusespejo]

Sorry it’s not in a repo, I recommend using the video as a guide. I spend time explaining things but it honestly is a pretty quick setup

[@jaroslavhuss7813]

Hmmmm I wish there is a github repo for this...

[@mariusespejo]

I mean I show exactly how to set it up in the video… it’s really not that much work

[@hamzacoskun8190]

@@mariusespejo yes, but sometimes reading the code makes it better understood. and often faster. whatever, thank you for the video.