Yarn Workspaces Tutorial

An example of how to setup a monorepo using yarn workspaces.
Code: github.com/ben...
Links from video:
github.com/bab...
----
Patreon: / benawad
----
Follow Me Online Here:
GitHub: github.com/ben...
LinkedIn: / benawad
Instagram: / benawad97
----
Join the Discord: / discord
Twitter: / benawad
#benawad
TikTok: / benawad ​
​
----
Follow me online: voidpet.com/be...
#benawad

[@MarcosTrazzini]

That's probably the most comprehensive overview of yarn workspaces. Thanks for that!

[@xExekut3x]

I must suck at learning. I read through Yarn's documentation on this, but didn't get it at all. I think I'm just 100% a visual learner. Thanks for the help!

[@Fjarilsmannen]

i so feel you on this!

[@EnricoPolanski]

It's not much of being a visual learner rather developers being very bad at writing and explaining concepts very often. Many documentations add to confusion rather than substract from it.

[@yosha2467]

You're not weird. Learning how tools work requires practicing with them. Reading the docs without getting your hands dirty can't do much. Add to that what others already said about devs thinking they can communicate concepts when they assume foundation not everyone has and there you have it.

[@ankiewicz]

Took a while to get the definition of yarn workspaces but seeing it action is awesome... great work!

[@fernandorojo6311]

Thanks for the simple walk through. Every complexish package should have a short video like this.

[@niftyhacker]

This is great. Coming from Java/Gradle world I've always looked for easy ways to isolate my modules and that's exactly this. Only thing missing now is runtime dependencies.

[@gompro]

One of the most annoying things about having a monorepo without workspace is accidentally installing node_modules in root directory. Before workspace, I had to manually delete these node_modules/packages.json in root directory. But now it's completely fine to install packages in root directory and forget all those nasty things. Especially in VS code terminal, whenever you open a new terminal, its path defaults to your root working directory. Now I don't have to check my current working path and change it all the time just to install single node package. What a wonderful improvement!

[@yunggunr1849]

thanks this is 1000x more useful than the docs

[@AmenRa]

Wow I am finally getting a chance to look into this and I am blown away!!!

[@MrEnsiferum77]

Monorepo is ideal for DDD. U divide every layer in different folder and every folder will have link to the folder(layer) below, only the root(domain folder) will be leaf link.

[@blasttrash]

What is DDD?

[@MrEnsiferum77]

@@blasttrash Domain Driven Design. Perfect place for microservices, but few developers understand really this one. U can't do nothing when the developers in your team don't understand that. Massive topic, but it's the true way how software is done.

[@knightjaz2598]

Thank you for this video

[@iamarya2k21]

Keep up the awesome work! I am new to JS and I could understand everything clearly! ☺️

[@bawad]

Thanks, that's great

[@MaxPicAxe]

Yarn workspaces look awesome! It looks like it's gonna solve all my problems :)

[@thomasquiroga363]

How do you choose between this and Lerna for example? Is Yarn workspaces like an easy way to make monorepo while Lerna is more complex solution?

[@zeocamo]

a idea for the 2 or 3 video in this series, express backend with a react frontend and a react-native app building from the project, maybe a yarn command to start the frontend and backend and one for the react-native and the backend, setups like this is hard to good video on, and will help a lot if i just can share a link to you, because your stuff is clear to understand :)

[@bawad]

I'm going to be doing this 👍

[@zeocamo]

nice :) thx

[@Lee-qj4hk]

10:07 ...tomorrow's video: Yarn workspaces with React and React Native: kzbin.info/www/bejne/n36Xf4WDZ8mchsU

[@oroneki]

I tried yarn workspaces before but webpack made it a nighmare. Today I prefer to use yarn link compiling typescript to es6 with the definition files, but synlinking with react native is still pain. I dont like much the react rewire solution because its one mote thing to keep track of... if typescript paths worked it would be really good, but webpack is the problem with typescript. I hope your series bring some hope. Carry on, Ben!

[@bawad]

I feel your pain, react native is a nightmare and typescript introduces another level of complexity. But I have gotten it to work, which I will be showing

[@oroneki]

Ben Awad Wow!

[@SalsaAS85]

Hello, great tutorial. Where can I find the other React tutorial you have mentioned? Thank you

[@bawad]

kzbin.info?search_query=benawad+yarn+workspace&sp=EgIQAQ%253D%253D

[@kasunsaumya3151]

why your node modules are not showed in the folder structure on left hand side....

[@thammawatbongkarn1175]

Amm ... I have a question so when deploying yarn workspace project, the method to deploy common and server in to use npm publish right?

[@antoniogiroz]

Great video! Thanks!

[@maxiequa567]

Hey Ben. Can you do an update on your VPS/Cloud storage. I noted from your comment reply on an early video you are now using DO/S3. Can you talk us through how you are deploying apps and storing static content. Also, where are you storing your databases as well as which provider do you use to register/reregister domain names and how do you operate an email server for domain email addresses. Thanks!

[@bawad]

I'll make a video about this after my next series. Quick summary for the time being: I'm trying out Dokku on a Digital Ocean server that hosts node.js, Postgres, and redis. I'm using Sendgrid for email (mainly because they gave the most free emails for students). I'm using namespace for domain names, but I'm not in love with them. And yeah using S3 for images with Cloudflare caching them

[@maxiequa567]

Great, thanks for the detailed response.

[@NeerajKumar-zo6bh]

I am getting error like Cannot find module common even after doing same . Does anything change as for 2021?

[@amanlearnscode]

Making react native cli works in yarn workspaces is still a nightmare with me in 2020 :D

[@ergriojeobiejrgerijg]

what about permissions? for open source it's perfect, but does github or any competitor allow you to set permission access not just on repository level, but also on subdirectories? Really enjoy your videos btw :)

[@bawad]

As far as I know, either the whole thing has to be public or private on GitHub. But you can release them separately as npm packages

[@glzr_io]

Just tell the coworker that they can't look in the folder

[@IbrahimBoona]

Nice, thanks bro

[@davidtang1828]

have you seen a workspace prefixed with a "-", like "-system"? seems like it is intending privacy of some sort but wasn't sure if it was a convention or something yarn understands.

[@bawad]

I haven't run across that before

[@KevinJTurner]

So is it correct to say that I shouldn't do yarn add for a package that is local to the monorepo? I should manually add it to the package.json and do a yarn install? In other words, with regards to your sample project... @walnut/server has a dependency on @walnut/common, so manually add @walnut/common to the dependencies section of package.json for @walnut/server, followed by yarn install @walnut/server has a dependency on graphql-yoga, so do a yarn add graphql-yoga Is that correct?

[@bawad]

That's usually how I do it, yeah

[@NikosKatsikanis]

why not just use lerna?

[@frozen_tortus]

This is grate video Ben. 5+

[@ndhaniff]

i use this on cra inside packages/client after yarn install it create node_modules but just have the react-script is it normal?

[@IvanKleshnin]

Seems like a good approach for libraries but I imagine it's not easy (if possible) to deploy an app built this way to something like Zeit Now... They want your package.json to be the source of truth and the folders above it in hierarchy are basically non-accesible. You can try to deploy the folder above package.json... but this violates the requirement #1 so not possible either. @_@

[@bawad]

I haven't tried zeit now before, so I don't know for sure but I don't see why the whole workspace can't be deployed to it

[@deepdivedevs100]

*just checking if this text turns bold*

[@tylikstec8706]

4m30, "$ yarn install"

[@bawad]

😮😮, that's a long time What version of yarn?

[@tylikstec8706]

1.7.0, node 10.4.1

[@bawad]

Could you try cloning my repo, running yarn install and see if you get the same result?

[@tylikstec8706]

I did it. But in your repo you keep "common" and "server" directories inside "packages" directory. After "yarn install" command "node_modules" dir is created, over 130 packages inside however no" common" and no "server" directories inside...

[@bawad]

So when you run the server it does not get the function from common?

[@IbrahimBoona]

if you can make a video about new expo SDK v33.0.0, it would be great

[@bawad]

is there a new feature in v33 that you'd like to see?

[@TheUltimateGeminiHasSurvived]

When you went into /app/server/index.js, shouldn't it have been: const commonFunction = require('../common/index'); ? Because require('common') is not in the same directory.

[@TheUltimateGeminiHasSurvived]

I think I get it. If we didn't have it in the node modules folder.. then it wouldn't have worked...is that right? Can we just go in depth about why this a Yarn thing? Why couldn't I follow the same stephs but instead of yarn install, I did npm install?

[@bawad]

try it yarn symlinks the files locally

[@5ervanttechintel_github_io979]

*But Babel was using Lerna..*

[@Ravikumar-nc9bz]

how to uninstall yarn

[@zeocamo]

what are you using to get the help to the "cd" in your terminal ?

[@bawad]

fish shell

[@zeocamo]

thx, that just send me to found zsh-autosuggestions for the same thing for my zsh thx again, i love all your vid

[@blasttrash]

How are you getting intellisense in your integrated terminal?

[@bawad]

fish shell

[@nonono9700]

Your terminal has a suggestion on it. What is it actually?

[@bawad]

benawad.com/fish

[@riskingeuphoria]

how does anyone have their voice change so much per video?

[@PraexorVS]

Too small letters, I am watching it in the phone 📲

[@preeeby]

Can't wait for you to hit puberty so your voice will be stronger and louder, I will stop maxing out the volume to hear you then :)

[@bawad]

😂😂👍