Why I’m using a monorepo with Yarn workspaces

💬 Discord / discord
🔔 Newsletter newsletter.webdevcody.com/
📁 GitHub github.com/webdevcody
📺 Twitch / webdevcody
🤖 Website webdevcody.com
🐦 Twitter / webdevcody

[@prasanthrv4850]

Hi, I just love your unscripted, no flashy clickbait thumbnail kind videos, always get to the point, great stuff 💛. Would like some videos on your thoughts about contributing to open source and how to get started, etc., or is it necessary to get a remote job. Anyways love your videos, keep going 🔥

[@degenyakuza]

he’s been one of my favorite source of information related to web development or development in general. He never clickbaits only sometimes with title of video but its for SEO afaik.

[@meganfrankosky351]

I'm just getting started with yarn and building a monorepo structure and this overview was super helpful! I'd love to hear what snags you ran into along the way and your take on if it's worth it in the long run.

[@hsider]

This is cool, without you I wouldn't know this exists. I had a question in my mind for a long time on how to couple my project parts/apps in a single git and here you are :). Your videos are like going into the local bakery and see bread being made, that's what makes your channel unique. 👍

[@WebDevCody]

Haha i like that analogy!

[@hsider]

@@WebDevCody hhh happy that you like it. It's a signature of your channel, may be you don't know it, that's how I and other people see it.

[@WebDevCody]

@@hsider it’s the vibe I’m going for. One of the best way to learn how to code is to actually watch someone code; obviously coding yourself is the best way

[@hsider]

@@WebDevCody exactly! Add to that what dev channels on KZbin do is promoting simple stuff to make money it has nothing to do with development 😆 it's addressed to new programmers. Most of your viewers are actually old and good developers, they're interested in seeing what and how others do real projects where every aspect is important.

[@anhibitor1023]

Keep up the amazing content

[@medalikhaled]

Thanks for sharing, your content helps a lot

[@anthonygg_]

Nice vid Cody!

[@gordonfreimann]

highly useful, very informative. Thank you

[@JegErN0rsk]

Looking at your videos there is clearly so much more to being a web developer than just React for the frontend and Java/C# or whatever language for the backend. Can you make a video talking about the "unspoken" tools and tasks that are expected of each end of the stack?

[@amitsingh5198]

Great video. I also had trpc not importing types when using in pnpm wokrspaces but the issue was that we have to install trpc/server in the client package as well for types to work. Now I have trpc as separate package and types work correctly

[@WebDevCody]

I’ll have to try that out, maybe that’s all I needed. Nothing wrong with rest either; it’s still the dominating approach to client server communication, but I do miss my tRPc on this project a bit

[@OleksandrKucherenko]

Is it possible to setup with Yarn 3.5 PnP mode and ts-node as a major executor of the code in developer mode?

[@anasouardini]

do I need to use workspaces if I'm using pnpm? I don't know that much about workspaces bu from what you've said seems like it's used to save disk space.

[@notarealhandle123]

From my experience, the main challenge I faced - building the server, because after adding monorepo I ended up with the server code that I no longer could just copy over to my hosting provider via FTP, since it now had a dependency on my local "shared" repository. I needed to add bundling that would make "shared" code part of the server's PROD build. That's the major downside to monorepos.

[@aleksandrszagorskis3306]

Hey, mate! Great video. Can you share what VSCode theme are you using?

[@VincentJenks]

Interesting, thanks for posting this. I've been making the rounds, trying to build the perfect boostrap/prototype DX for a fullstack serverless + React application, in a basic monorepo. The issue I've run into so far, is the hoisting of node_modules to the top level of the repo. It seems to break any shared references in the lambda functions, since it can't deploy what isn't directly available inside of the lambda portion of the repo. I'm turning to Yarn now, as a last-ditch effort, because it seems to be the only pkg manager that allows "nohoist", and allows you to physically divide node_modules to the various project/package folders within the monorepo. I don't care about disk space, I just want shared code to work within my lambdas! Any thoughts on that?

[@berkesandras]

Nice video @WebDevCody! One question came in my mind - how do you deploy the API package individually as they have common dependencies in a shared node_modules folder?

[@SeibertSwirl]

Good job babe!!!!!

[@JohnZakaria]

Do you have good reasons to why aren't you using yarn berry?

[@hnnazm]

When you upload the code to version control, do you upload each of the workspace into separate repo and linked it by submodule? Or just in one repo?

[@WebDevCody]

They are all in the same repo

[@shreerajshiramoji4488]

Nice one

[@lacherolachero9409]

I have hard time to understand how all this beauty works in prod? How to you compile the needed imported packages and run everything using Docker?

[@WebDevCody]

Well usually you’d have library packages which would be imported when you bundle next or your ui or api. That bundle would have all the code needed which you could run inside a container

[@amranimohamad4741]

yo , what 's the Packege manager that ur gonne stick with for the future I've heard that Pnpm is more effiecient then npm what would you say about it ???

[@WebDevCody]

No clue, I think you can randomly pick one and the world will keep turning

[@peevable]

Hi WDC, do you code on windows or linux or mac (or maybe some sort of linux VM)? I can't really tell since you hide a lot of your screen.

[@WebDevCody]

mac

[@oussama40612]

Why do use ts node to run a .ts file instead of compiling it

[@WebDevCody]

It’s faster than waiting for the entire thing to compile and then you’d need to cd into the dist directory to run the js

[@monawwarabdullah7438]

Which icon package is it?

[@WebDevCody]

Probably hero icons? Or react icons

[@monawwarabdullah7438]

@@WebDevCodylol, I meant, in VS Code

[@monawwarabdullah7438]

*icon pack (vscode)

[@notarealhandle123]

A good practice for monorepos is not to use specific package names in workspaces, but rather use "packages/*". The reason is to be able to deploy packages only as needed. For example, you want to deploy a server - you copy just the server + shared packages, then you can run the root install successfully, and it won't be looking for "client" package on the server, whereas in your approach it will.

[@marqetintl]

Care to expand on this pls? By "copy" i'm guessing you're referring to docker but I still fail to understand how this would be helpful. Or maye you meant "workspace:^" instead of "packages/*"

[@Hiperultimate]

Hi Web Dev Cody, I thought of checking out this project of yours and after getting overwhelmed by the sheer amount of stuff you used a question came in mind. How did you know that which technology you have to use and why? And did you learn those technologies before using or just read the docs and did the bare bones? It would be really great if you could reply.

[@WebDevCody]

Yeah it’s a lot, and I learned most of this over years on the job. It’s better to just pick Nextjs and deploy to an existing provider if your starting off or have a small team. Docker is just a bonus. Yarn is just npm with slightly different commands. Terraform and serverless are IaC tools you’d only need if you like doing things the hard way in AWS. GitHub actions are only if you need a ci pipeline.

[@Hiperultimate]

@@WebDevCody I see.... First off thanks for the reply! I am learning NextJS at the moment as my current job refuses to give me anything other than testing for some reason even though they took me as a dev. They are working on a platform called ServiceNow which is not so good to work with. So I thought id take matters in my own hands and keep doing what I like. I hope one day I would be as good as you so I can confidently do my work and play games in my free time :D

[@WebDevCody]

@@Hiperultimate you’ll get there. It stinks your company doesn’t let you do other things, but testing is good to learn

[@midosobhy2922]

what is the name of this vscode theme ?

[@WebDevCody]

bearded theme stained blue

[@midosobhy2922]

@@WebDevCody thank you

[@charliesta.abc123]

Lol this is what I was busy trying this today. Everything works but now I'm trying to rip out my prisma stuff into it's own package. I'm not winning. Typescript is showing me flames. I don't even know if this is something I should do

[@anuragpramanik6095]

Are you using yarn v2?

[@WebDevCody]

No clue lol

[@Alan910127]

Have you ever tried Turborepo? It seems that it works with yarn/npm/pnpm workspaces, and adds some additional ability to them. I would like to see you make some videos about that.

[@WebDevCody]

I haven’t tried it yet

[@055David]

hmmmmmmmmm, not that valuable, can find this in most docs, should focus more on issues you faced, and not how to achieve what most ppl can set up following the worst stackoverflow comment. Camera quality is good though!