Can we combine a NestJS app with React?

Поділитися
Вставка
  • Опубліковано 5 жов 2024
  • In this quick video we learn how to create a monorepo using turborepo, which combines a NestJS API with a React frontend. We will also learn how to set up our Nest application to serve up our React SPA build so that we only need to run a single server for production!

КОМЕНТАРІ • 185

  • @earthpligrim5757
    @earthpligrim5757 6 місяців тому +8

    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
      @mariusespejo  6 місяців тому +1

      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
      @snoudev 20 днів тому

      @@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
      @belkocik 16 днів тому

      @@mariusespejo Yeah!

  • @nopik4669
    @nopik4669 Рік тому +6

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

  • @peacekper
    @peacekper 10 днів тому

    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!

  • @NickBoyd-v9c
    @NickBoyd-v9c Рік тому +4

    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!

  • @patrickbelanger6253
    @patrickbelanger6253 2 місяці тому

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

  • @christopheanfry2425
    @christopheanfry2425 Рік тому +2

    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. 🙏🙏

  • @narebinhaa
    @narebinhaa Рік тому +1

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

  • @bugraotken
    @bugraotken 11 місяців тому +1

    Incredible tutorial, thank you Marius!

  • @deriegle
    @deriegle Рік тому +4

    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
      @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

  • @skpatel20
    @skpatel20 8 місяців тому

    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
      @mariusespejo  8 місяців тому

      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

  • @naranyala_dev
    @naranyala_dev Рік тому +1

    more about monorepo please, thank you

  • @abacuswithrehan264
    @abacuswithrehan264 Рік тому

    Nice tutorial, was stuck on monorepos for weeks.

  • @TroyJoachim
    @TroyJoachim 9 місяців тому

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

  • @MerthanMerter
    @MerthanMerter 8 місяців тому

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

    • @mariusespejo
      @mariusespejo  8 місяців тому +1

      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
      @MerthanMerter 8 місяців тому

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

  • @kellslte
    @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.

  • @DenisMikhalev
    @DenisMikhalev 5 місяців тому

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

  • @asimalqasmi7316
    @asimalqasmi7316 Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому

      Thank you Asim!

    • @asimalqasmi7316
      @asimalqasmi7316 Рік тому

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

  • @dungledang5120
    @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.

  • @mohamedazizdhouibi
    @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
      @mariusespejo  Рік тому

      Yeah good thought, will think about it, thanks!

  • @pedro.carrasco
    @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
      @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.

  • @ixixix-vw2rq
    @ixixix-vw2rq Рік тому

    Thank you Marius. Excellent video!

  • @yashkhd1100
    @yashkhd1100 Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому +1

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

  • @LawrenceChege
    @LawrenceChege 4 місяці тому

    THANK YOU! So so much

  • @freddiefrexie7524
    @freddiefrexie7524 Рік тому

    thanks man truly helpful and inspiring👏🙌

  • @palvikas5
    @palvikas5 Рік тому +2

    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
      @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

  • @amazekhashaa7309
    @amazekhashaa7309 Рік тому

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

  • @julihermes
    @julihermes Рік тому

    Thanks for this awesome video!

  • @redakker
    @redakker 4 місяці тому

    Thank you very much!

  • @stubertv7088
    @stubertv7088 Рік тому

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

  • @edwardcolonhidalgo2465
    @edwardcolonhidalgo2465 Рік тому

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

  • @JonBrookes
    @JonBrookes 11 місяців тому

    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 ?

  • @oleksandrsalivon
    @oleksandrsalivon 6 місяців тому +1

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

  • @tootyrnt5533
    @tootyrnt5533 Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому

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

  • @rudeadyet1992
    @rudeadyet1992 Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому +1

      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
      @rudeadyet1992 Рік тому

      @@mariusespejo That makes sense, cheers! :)

    • @marekiaro636
      @marekiaro636 Рік тому

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

  • @ericwinkdev
    @ericwinkdev 9 місяців тому

    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
      @mariusespejo  9 місяців тому +1

      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
      @ericwinkdev 9 місяців тому

      @@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!

  • @mohamedfoula503
    @mohamedfoula503 8 місяців тому

    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
      @mariusespejo  8 місяців тому +1

      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

  • @leiayuri
    @leiayuri 5 місяців тому

    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
      @mariusespejo  5 місяців тому +1

      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!

  • @desertpillar5286
    @desertpillar5286 Рік тому +2

    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
      @mariusespejo  Рік тому +1

      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
      @desertpillar5286 Рік тому +2

      @@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!

  • @santyas
    @santyas Рік тому

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

  • @dipeshshivrame4632
    @dipeshshivrame4632 Рік тому +1

    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
      @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

  • @farshidhamidi
    @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
      @mariusespejo  Рік тому +1

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

    • @farshidhamidi
      @farshidhamidi Рік тому

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

  • @tleveque
    @tleveque Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому +1

      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.)

  • @rahmatsulistio
    @rahmatsulistio Рік тому

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

    • @mariusespejo
      @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.

  • @jarod51
    @jarod51 Рік тому

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

    • @mariusespejo
      @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).

  • @BUTTERFLY-eo6ob
    @BUTTERFLY-eo6ob 8 місяців тому

    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
      @mariusespejo  8 місяців тому +1

      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

  • @Raihan004
    @Raihan004 Рік тому

    thank you very much

  • @benjaflinston
    @benjaflinston 3 місяці тому

    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
      @mariusespejo  3 місяці тому +1

      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

  • @MaxProgramming
    @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
      @mariusespejo  Рік тому +1

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

  • @AjaySharma-vz9ei
    @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
      @mariusespejo  Рік тому

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

  • @wassimbenr
    @wassimbenr Рік тому +1

    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
      @mariusespejo  Рік тому +1

      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
      @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
      @mariusespejo  Рік тому +1

      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
      @wassimbenr Рік тому

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

  • @veracsthedefiled
    @veracsthedefiled 10 місяців тому

    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.

  • @AleksandrChernovIT
    @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
      @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

  • @SamuelPares
    @SamuelPares 8 місяців тому

    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
      @mariusespejo  8 місяців тому

      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
      @SamuelPares 8 місяців тому

      @@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?

  • @chrisl_ca
    @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!

  • @oyinlolaolasunkanmi
    @oyinlolaolasunkanmi Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому +1

      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

  • @leiayuri
    @leiayuri 5 місяців тому

    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
      @mariusespejo  5 місяців тому +1

      Yes, turborepo supports having local libraries for shared code

  • @chechochimes
    @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
      @mariusespejo  Рік тому

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

  • @student-cs
    @student-cs Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому

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

  • @petroliashchynskyi9900
    @petroliashchynskyi9900 Рік тому

    Great vid! Have you tried Nx or Lerna?

    • @mariusespejo
      @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
      @joebowbeer Рік тому

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

    • @danielguldbergaaes6432
      @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.

  • @gwynbleidd9921
    @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
      @mariusespejo  Рік тому +1

      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
      @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
      @mariusespejo  Рік тому +1

      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

  • @douchecomment
    @douchecomment 5 місяців тому

    Excellent tutorial mate!!!

  • @balsatech
    @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
      @balsatech Рік тому

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

  • @thongtech1984
    @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
      @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

  • @kot3st859
    @kot3st859 11 місяців тому

    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
      @mariusespejo  11 місяців тому

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

  • @whoami9269
    @whoami9269 7 місяців тому

    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
      @whoami9269 7 місяців тому

      vercel/turbo/issues/5331

  • @sushantrajbanshi4508
    @sushantrajbanshi4508 Рік тому

    Please do one for NestJS + Angular with Turborepo 👏

    • @mariusespejo
      @mariusespejo  Рік тому +1

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

    • @sushantrajbanshi4508
      @sushantrajbanshi4508 Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому +1

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

    • @sushantrajbanshi4508
      @sushantrajbanshi4508 Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому +1

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

  • @satyampawar1634
    @satyampawar1634 Рік тому

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

  • @MicroVita-i1h
    @MicroVita-i1h 10 місяців тому

    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
      @mariusespejo  10 місяців тому

      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

  • @CanseSelecta
    @CanseSelecta 8 місяців тому

    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
      @CanseSelecta 8 місяців тому

      Article or video ?

    • @mariusespejo
      @mariusespejo  8 місяців тому

      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
      @CanseSelecta 8 місяців тому

      Ok thanks
      @@mariusespejo

    • @CanseSelecta
      @CanseSelecta 8 місяців тому

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

  • @jaroslavhuss7813
    @jaroslavhuss7813 Рік тому

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

  • @nahim.hossain.shohan
    @nahim.hossain.shohan 5 місяців тому

    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
      @mariusespejo  5 місяців тому

      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

  • @pew4410
    @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
      @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

  • @shakapaker
    @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
      @mariusespejo  Рік тому +1

      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

  • @ae7057
    @ae7057 Рік тому

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

    • @ixixix-vw2rq
      @ixixix-vw2rq Рік тому

      I need to know this as well 👀

    • @mariusespejo
      @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

  • @jakovfilipsabolicek798
    @jakovfilipsabolicek798 Рік тому

    Is this viable for serverless deployment?

    • @mariusespejo
      @mariusespejo  Рік тому

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

  • @cxreed
    @cxreed Рік тому +1

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

  • @Weagle1337
    @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
      @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
      @Weagle1337 Рік тому

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

    • @mariusespejo
      @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

  • @markhermano1
    @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
      @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

  • @hitarashi
    @hitarashi Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому +1

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

    • @hitarashi
      @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
      @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
      @hitarashi Рік тому

      Okay thanks for your quick reply ❤️

  • @tranquillityEnthusiast
    @tranquillityEnthusiast 10 місяців тому

    We need to combine with angular, become they are similar

    • @mariusespejo
      @mariusespejo  10 місяців тому

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

  • @xDiggie
    @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
      @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
      @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
      @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
      @xDiggie Рік тому

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

    • @xDiggie
      @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.

  • @jale9955
    @jale9955 9 місяців тому

    Can you share this repository please?

    • @mariusespejo
      @mariusespejo  9 місяців тому

      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

  • @futurenew1091
    @futurenew1091 Рік тому

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

    • @mariusespejo
      @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.

  • @jaroslavhuss7813
    @jaroslavhuss7813 Рік тому

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

    • @mariusespejo
      @mariusespejo  Рік тому

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

    • @hamzacoskun8190
      @hamzacoskun8190 Рік тому +1

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