Can we combine a NestJS app with React?

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ก.ย. 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 14 วันที่ผ่านมา

      @@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 10 วันที่ผ่านมา

      @@mariusespejo Yeah!

  • @patrickbelanger6253
    @patrickbelanger6253 หลายเดือนก่อน

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

  • @bugraotken
    @bugraotken 11 หลายเดือนก่อน +1

    Incredible tutorial, thank you Marius!

  • @abacuswithrehan264
    @abacuswithrehan264 ปีที่แล้ว

    Nice tutorial, was stuck on monorepos for weeks.

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

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

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

  • @naranyala_dev
    @naranyala_dev ปีที่แล้ว +1

    more about monorepo please, thank you

  • @LawrenceChege
    @LawrenceChege 4 หลายเดือนก่อน

    THANK YOU! So so much

  • @oleksandrsalivon
    @oleksandrsalivon 6 หลายเดือนก่อน +1

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

  • @veracsthedefiled
    @veracsthedefiled 9 หลายเดือนก่อน

    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.

  • @santyas
    @santyas ปีที่แล้ว

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

  • @amazekhashaa7309
    @amazekhashaa7309 ปีที่แล้ว

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

  • @benjaflinston
    @benjaflinston 2 หลายเดือนก่อน

    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  2 หลายเดือนก่อน +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

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

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

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

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

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

  • @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 ❤️

  • @cxreed
    @cxreed ปีที่แล้ว +1

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

  • @nopik4669
    @nopik4669 ปีที่แล้ว +6

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

    • @chambaderaphael8946
      @chambaderaphael8946 ปีที่แล้ว

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

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

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

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      Thanks!! Glad you found it useful

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

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

  • @peacekper
    @peacekper 4 วันที่ผ่านมา

    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
      @mariusespejo  18 นาทีที่ผ่านมา

      Hope your project goes well!

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

  • @leiayuri
    @leiayuri 4 หลายเดือนก่อน

    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  4 หลายเดือนก่อน +1

      Yes, turborepo supports having local libraries for shared code

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

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

  • @leiayuri
    @leiayuri 4 หลายเดือนก่อน

    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  4 หลายเดือนก่อน +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!

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

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

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

  • @narebinhaa
    @narebinhaa ปีที่แล้ว +1

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

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

  • @jaroslavhuss7813
    @jaroslavhuss7813 ปีที่แล้ว

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

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

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

  • @JonBrookes
    @JonBrookes 10 หลายเดือนก่อน

    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 ?

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

  • @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  11 หลายเดือนก่อน

      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

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

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

  • @redakker
    @redakker 4 หลายเดือนก่อน

    Thank you very much!

    • @mariusespejo
      @mariusespejo  4 หลายเดือนก่อน +1

      You’re welcome!

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

  • @DenisMikhalev
    @DenisMikhalev 4 หลายเดือนก่อน

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

  • @TroyJoachim
    @TroyJoachim 9 หลายเดือนก่อน

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

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

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

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

  • @freddiefrexie7524
    @freddiefrexie7524 ปีที่แล้ว

    thanks man truly helpful and inspiring👏🙌

  • @ixixix-vw2rq
    @ixixix-vw2rq ปีที่แล้ว

    Thank you Marius. Excellent video!

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

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

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

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

  • @edwardcolonhidalgo2465
    @edwardcolonhidalgo2465 ปีที่แล้ว

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

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

  • @stubertv7088
    @stubertv7088 ปีที่แล้ว

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

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

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

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

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

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

  • @julihermes
    @julihermes ปีที่แล้ว

    Thanks for this awesome video!

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

  • @Raihan004
    @Raihan004 ปีที่แล้ว

    thank you very much

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

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

  • @satyampawar1634
    @satyampawar1634 ปีที่แล้ว

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

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

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

    • @satyampawar1634
      @satyampawar1634 ปีที่แล้ว

      @@mariusespejo thanks mate

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

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

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

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

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

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

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

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

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

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

  • @douchecomment
    @douchecomment 5 หลายเดือนก่อน

    Excellent tutorial mate!!!