Step-by-Step Monorepo Tutorial: Turbo Repo, Vite, Next, Tailwind, and Storybook

video and in this video we are diving deep into the world of mono repos using a tool called turbo repo we'll be creating two react.js app one with the feet and one of the Nexus with that will also be developing one UI liability that can be shared across both the apps for The Styling we'll be using Tailwind CSS will make sure the Tailwind config can be shared across all the apps so we'll develop the Tailwind config as a separate package and with that we'll encapsulate the Tailwind in the UI Library so that the UI Library can be used as a standalone UI package and that's not all we're also spinning up a storybook app for the stunning UI documentation oh by the way just in case you are interested about some theoretical stuff about Mono repo let me tell you let's first understand what's the opposite of mono repo the opposite of monorip is called poly repo which you normally use so every app has a server repository but in mono repo the repository can contain multiple apps and packages which means all your apps can see at the same package and the same config which will make it easier to scale your multi-billion dollar to-do app but let me tell you the problems with the poly repos are just going to explain so let's stick to the exciting stuff and let's get started okay so let's first go to documentation I'll put this link in the description box and look at this quick start here we have this command so let's copy this npx create turbo at latest and go to your terminal and put it here okay it will ask you to name the turbo repo and look at this gradient text so I'll name this turbo demo and we'll be using yarn okay let it create and by the way guys do you know that Google Facebook Twitter all of them has their own build system which is not open source this target is actually open source but all these giant company has their own build system okay this project is created and let's see due to Turbo demo and open this in your code reader and let's go through the folder structure okay so inside this root we have total three folders on its apps on its node modules and the other one is packages so inside these apps we have all the apps we are going to create so as of now in the boilerplate it gives you the docks and wave which both both of them and exist app we'll be treating today JSF one is the V10 one is an xjs app so I am going to delete this docs folder later okay and then I have this node modules in the root which manage all the node modules of the entire project okay and then I have these packages since at the packages we are going to put all those files on all those folders which will be shared across all the apps for example we can put all the configuration file for example Tailwind config TS config ear slim config pre-tr config and then we can also put the UI Library which can be shared across all the apps okay and then I have this package.json okay so inside the package.js and you can see this workspace so this is basically called yarn workspace and inside this workspace is referring all the workspace we have so inside the apps this is mentioned as star so star means all the app so inside the apps if you can see we have this docs and web which both are individual workspace and same for the packages so this is packages slash star it means all the all the apps inside the packages are separate workspace right and then I have this few Scripts the version name is star what does the star mean star means we refer to the local package that's it and then I have this Peter and turbo which means just refer to the remote package from the npm registry okay cool and then it's been sending the node engine we are going to use and then the package manager so we are going to use yarn with the 1.2219 version cool now let's go deep into this ESPN config custom with the star so I told you that it means to refer to a local package and if we just go inside the packages folder you can see this we have this estin config custom and inside the Cs link config customers we have this package.json this eventually installs all the packages required for the years linked but that's the beauty of package right just install this at some place at one place and see at the config across all the apps so that you don't need to install the packages in all the apps okay cool just look at the name the name is really important for all the packages okay on anything else no if you see this inside the TS config we have this package.json which exposes three three files base.json exist.json and react library.json what it means it means that we have this base.json file which is basically the basic configuration of typescript and then if you see the next dates.json who is actually extending the base.json and then overriding all the you know typescript properties needed for the next year's project and same for the react Library okay same it's extendingthebase.json and overriding some of the properties but if you notice inside the web if you go to tsconfig.json it's extending the TS config slash nextgs.json so this TS config is coming from the local package and is exposing three files one of them is nexus.json which is being extended by our web project and then if you see the UI inside the UI we have this tsconfig.json which is extending TS config slash react library.json but wait and this UI package and this web app this web app actually can refer to a local package because if you notice the package.json it's safe accessorization of web you can see that we have referred inside the dev dependency that hey just use the TS config of this local this I told you the star means local Json we have this tsconfig which is being referred as a local package okay this concept will get even more clear because I told you that we are going to use our Tailwind package as a shared package all right okay next let's see this UI okay so inside this UI package here this button which says Boop and now if you just go to web inside this web just go to package.json again and here you can see that we are installing the UI actually not installing but referring to the local package with the star so it means now our web app can actually use the button component or the whole UI Library so if you just go to Pages inside these Pages we have this index.tsx which is using this button from the UI and same for the docs if you just go inside the docs if you can just go to package.json and see that this is being installed as a local package and if you just go to Pages inside this Pages we have this index.tss which is using the button so let's do one thing let's just run the development server so it's done yarn Dave okay now just go to package.json of the root and see we have this depth command which runs will go to all the apps we'll go to all the workspace and find the dev script and it will run the dev script if the dev script is not available it will just ignore that else it will just run the dev script so uh just go to terminal and see that it's being started the server is started one is at three thousand and one in one is at 3001. a book and local 3001 I have dogs book so now just go to button component and change something let's say from book to good button and see good button and inside the wave also we have this good button let me just increase the font size okay nice we don't need this react cool okay so let's do something interesting let's add Tailwind we're going to add Talon in the way first and then we'll create a Terrain config as a seat config which will be shared across all the apps okay let's do it just split the terminal and install Tailwind in web so for that we are going to navigate to The Wave workspace so for that we can use Eon workspace and then I told you that everything is a separate workspace every app is a server workspace actually and then just go to web and then add Tailwind so tell you in CSS processes and auto prefixer will be installed as Dev dependency and again this has nothing to do with mono repo this is basically just to install Teru ncsc next CSF yeah done okay next thing is just go to web folder let me just close all the other folders inside the web folders We need to create the Tailwind configs so Tailwind Dot config.js let's add the config module.exports content you know what let me just open the recommendation exists yeah look at this config so let's copy this and paste it here we are not going to use the source directory so just remove these we are also not using app oh by the Nexus 13 has this experimental app directory which we are not going to use because that is experimental so yeah this pages and components folders so all the files of pages and components folder will be parsed okay oh by the way I hope you know what do I mean by parts that's the basic of CSS basic of Tailwind actually okay and then we also need to create the post css.comfig file suppose css.comfig.js so let me just copy paste this post CSS config file and now let's create the Styles folder so inside the root style slash global.css okay let me just add the Tailwind directives to import the global.css we need to use the underscore app.tsx file so let's create this inside the pages underscore app.tsx and let me just copy paste this underscore app.tsx yeah so you're doing nothing basically just exporting the app component with the page props and then just importing the global.css so with this our web app I mean this web Nexus apps should have access detail wind so let's see just go to index.tsx and let me just add some CSS class sorry tell you in class oh BG rate 700 padding eight let's see local is three thousand across 3001 oh we can see that the styles are reset so the Tailwind is added but for some reason the classes are not being detected what might be the reason let me just restart the server so yeah and Dave okay let me just refresh the page yeah it's working so please restart the server if anything goes wrong okay cool and now let me create the Tailwind config as a separate package so for that just go to packages folder and create a package called Tailwind config basically just create a folder called telling config and put a package.json file cool escape the package.json file so fasting first the name the name is really important guys because the package will be referred by this name 0.0.0 which does not really matter because we are not going to publish this anywhere and then we need to add the files so files we're going to expose one file and that is terrainconfig.js okay so let me just create the tailing config.js file telling Dot config.js and copy the Italian config.js from the web so copy this and paste it here okay I am going to modify the content slightly so with the pages and components we also pass the content of our UI Library as of now this is not a good practice we'll change it later but I also want to show you that parsing can happen with the UI Library also so let's go to this UI we need to refer all the files of UI so for that we can do something like this add another value and that is dot dot slash dot dot slash go to packages and inside the packages just go to UI and refer all the files so start start Flash starts dot just refer all the TSX j6 jsts files okay cool and now what we are going to do is we'll go to a package.json of wave and we will tell this project that hey I want you to refer to a Tailwind config package of the local so let's go to Dev dependency and say tell you in config and is refer to a local package so now we can access the television config package so just go to Tailwind config up wave a lot of telling config and remove everything and just export the talion config package now the tailing can't be packaged but the talent config Talent config.js so again let me repeat so this is basically exporting the config which is created inside the Tailwind config which is actually a package so if you notice here we have to stayed in config.js file which is actually being shared app so it means you can use any plugin any theme any colors here which will be used in the webmix.s app okay cool guys one thing to notice here you need to run yarn again because you have just modified the package.json run the iron in the root folder please okay and then restart the server and let's see our apps would work fine yeah it's working fine but with this if we go to UI slash button and if we add any class on this button let's say class name BG blue 700 or 600 and pairing 4 and save it and you can see that our button has the color so this UI package is using the Tailwind CSS but this is not a good practice we should not parse this in the talent config instead we should tell all the apps that hey please make sure that you are purging the right content based on your folder structure right okay so for that what we can do is uh we can just go to Italian config again so these are telling config of terrain config package and will remove the content part and now web will do what will extend this config so let me just comment this out for now okay okay so we'll not be exporting directly in state we'll be putting this in a set config and then module.export will first spread the shared config and then we'll add the content okay let me just copy the pages and components fine so you have just improved our config okay now if you refresh now if you refresh you can see that our talent is working fine for the web app but the button style is not working we are gonna fix that later and you can probably guess why our Tailwind CSS is not working for the UI because we are not purging the content of UI okay I'll see that later but now it's time to create a byte app or defeat so let me just delete the docs folder I mean the Docs app and create a byte app so for that this cd2 apps okay and just run yarn create byte I forgot to comment or let me just check once and by to react oh and by the way guys please make sure to like the video and subscribe to our Channel and hopefully I'll be consistent this time so I got to see uncomment young kid right let me just run this young kid fight inside the apps folder hmm the project name byte project I will be using react a typescript of course I love typescript and our byte budget is created so if you see the folder structure inside the folder structure just go to apps where the docs is being created again and again let me just delete this okay we have this byte project and we I know like sometimes I pronounce white as beat and then sometimes I pronounce beat as bytes and I don't know what is the right pronunciation cool let's now install telen CSS in bit project let's open the terminal CD back to the root folder now you might say that hey why have not you installed aliensis globally I have not installed Italian since globally because some of my apps might not be using television right so there's no point of installing the terrorists globally so in workspace just go to a workspace named project bit project and add the Italian CSS Auto prefixer and post CSS okay let it installed okay just run yarn so that our yarn lock file gets synced cool okay now uh just go to my bit project byte and beat and inside this beat just go to source and here just look at the index.css file I am going to remove everything and add the Tailwind directives so let me just copy the Tailwind directives from global.css and put this index.css guys this has nothing to do with the monodepo this is how television you can add Tailwind CSS and beat oh okay this index.css is obviously imported in a main.psx okay cool now let's add the post CSS and the Tailwind config but before that let me close all the other files fine so inside the root I am going to create the Tailwind config so tell in dot config dot CJs it's a common JS module so in feet you need to add CJs okay so what I am going to do I'm going to just copy the Italian config from the web and put it here okay notice one thing it's first importing the Tailwind config from Tailwind config package but there's an issue and that is we have not mentioned anywhere that we are going to use this local package right so for that just go to package.json of our bit project let's go to package.json and here we need to mention this hey we are going to use tail in config and it will be a local package that's it now this terrain config can be that's it now this alien config is shared so we can just go to trailing Dot config.c.js and here instead of purging all these pages and components we can just Purge all the files of source right and of course the index.html not inside the public right so that's the beauty of our Criterion config and let's also copy the post css.config.js we could have just created this first CSS or config.js as a CID config but that's fine okay so just paste it post css.com fig ures again common JS module let me just paste it here fine so with this our wheat project has access product alien classes let's see just go to source and add some trailing classes inside the app.tsx okay let me just remove all these ready things red things and just add BG yellow 700 and add padding okay let me just run the development server so yarn Dave this will run all the development server of all our apps so this beat project has this Dev script and I told you that turbo will go through all the dev script and run all the dev scripts so div bit it should run on Port 5173 which is the default Port of fit so look at this uh it has the stallion classes and our beat project is ready with the shared config and now remember this UI styles of this button is not working as fixed it okay so for that just go to UI uh and let's create this UI as a standalone Tailwind component Library so for that again we need to install Tailwind here so yarn workspace UI add terrain season courses and Auto Body fixer okay let it install meanwhile we can just copy this tail in config file from anywhere either from bit project or from the web project and put this in inside this UI okay this will not be CJs this can only be Js okay and let's see uh we are not going to pass the source instead we are going to purge all the files of the root right because we don't have any nested folder inside this UI okay and then let's also create a style files so Styles slash index.css let me just copy all the Tailwind directives from globals.css let me just copy this and put it here and by the way guys I'll put the link of the source code in the description box so if anything goes wrong you can just refer to the source code okay save this cool we also need to create that alien config oh the Italian config is created we need to create the post post CSS config suppose CSS Dot config.js and copy the post CSS config file right paste it here everything looks good we just need to import the index.css file so let's go to index.tsx and here you can just import these so you don't need this import Star from react from diagram react this is gone in react 17. okay style slash index.css and now our UI Library can access the Tailwind as a standalone component but there's an issue if you see it's it's still not working oh by the way there's an issue and that is if you just go to package.json here you can see we have now referred the talent config package and now it's fine so just make sure to run yarn in the root and refresh the page and you can see that our button is still not working the reason is this package this UI package is not bundling the CSS yet so you need to add a bundler we need to add a build tool which will actually bundle the CSS every time something changed in the UI so for that we'll be using one bundler you can use roll up I'll be using TS up which is very minimal so just see the documentation of TS up simplest and fastest way to bundle JavaScript library okay so let's just install this or just open the terminal and go to the particular workspace and what is the workspace UI add as the depth dependency just add TS up okay meanwhile we can just go to UI and at the tsap config inside the UI you can create tsrp.com fig.js or you know what just create as TS and I am going to copy paste some of the configuration yeah it's just saying that hey to received the module just add the code splitting and then you know Minify external react and all this stuff just you know export as esm module you can just go through all this thing in the recommendation and then just go to package.json and we need to add some scripts package.json of UI okay so as you can see we don't have any deep script or build script E8 so let's add this okay let's add the build end Dev script so build will just run the TS up and Dave will just run TSR with a watch so watch means if anything gets changed in our UI library or in this UI folder it will be recompiled and rebuild the whole project okay with that we are also going to add some more oh some more configuration and that is we are going to add some path Alias some export Alias basically so by default the whole package will be bundled in the this folder right but we'll refer that this folder as a root folder so this is just an alias and then the index.css file will also be created inside the list but I want to edius this to the styles.css okay so that we can easily you know import the styles.css file and then side effects means don't not reset the CSS files okay cool uh let's do it now if you just oh make sure to run yarn in the root okay and now just if now if you go to yarn and now if you go to yarn workspace UI add-on build it should build our project and look at this it has created a list folder inside this this folder we have this index.css which is referred as tell me the Styles or css right so now if you just go to web oh this web and go to underscore app.tsx you can import the CSS file of this UI right you might have seen this you know this format in a lot of third grade libraries so just import which just gives you the Styles file as a standalone file so UI slash Styles dot CSS right and now if you go to 3000 well 2000 refresh the page the button is not weight working why let me just restart the server for one second I created this processor config.js inside the Styles it should be inside the root okay let me just rebuild the project again the UI project only and now the index.css you can see it has created all the styles cool uh now if you just go to localhost 3000 and refresh the page and look at desired button is working right let me just change something okay close the editor and by the way when you run Ian Dave it will just go to UI slash package.json and there is this you know this is either package.json there's this Dev script so this will run just this will just run the dev script so anytime if we change anything if you notice the terminal it will rebuild the project so just go to button and add something like you know border border four border color gray something save this and see it has created this new package don't worry about this error this error you can just ignore that okay refresh this and look at this we have this border okay nice but one second our bite project is still not using our UI library right so let's use that so for that just go to this beat uh inside the package.json of heat of this beat project first of all let's install the UI Library not install just refer to the local package that's it okay now it's been referred and now if you just go to inside the source inside the app.tsx import ant from UI right and now let's render the button okay the button the CSS button will not work until and unless we import the CSS file so for that we can just go to the root or we can just import here for now simple dot up not DOT slash UI slash Styles dot CSS let me just run iron and look at this our read project is also working with this UI Library so what we have done we have just created this UI Library as a standard on package now this UI is not dependent upon the parent app either paint app used alien CSS or not it does not really matter it can use as a separate Tailwind CSS component library right and now let's just spin off a storybook app okay now it's time to add the storybook for the UI component library now the storybook actually needs a builder so we'll be use the feed Builder to spin up the storybook server so for that uh just go to your root I'm from root just CD to apps okay here we are just going to create a v tab again okay the name of the project is a story beat UI dock I don't know like whatever and then just select the react and I'll be using typescript and that's it so cd2 story bit UI Dock and here let's initialize the storybook so npx Storybook in it let it run and by the way guys I hope you know what the storybook and all so I'll not explain what a storybook and why is it used I'll just you know use the UI library inside a storybook it's ready so just CD back to root and run yarn okay and then use yarn workspace to navigate to story beat UI Dock and then just run the storybook command okay this will run the storybook app and by the way guys if you just go to package.json of oh of this of this beat storybook project if you just go to package.json you can see that we have this Scripts they build preview storybook build storybook so we have just run the storybook which will run the storybook server input 6006. okay let's see we have got some errors but you can just ignore that okay local news 6006. and see we have this storybook setup we have this button but this button is actually the button of the storybook so we are going to delete this button okay so let's do it just go inside the source okay so just go inside the story beat UI dock the folder inside the source we have the stories so you can just see this button here just go to button.stories.tsx and here this button is imported from the local so you're not going to use this button instead we are going to use the button of UI okay uh and then remove the RX we don't need this RX okay and then we don't need the secondary large small we don't have the variance yet and now let's see as if is the page let's go to button and we can see we already have the good button but this is not a good practice guys because we have not added the UI as the dependency inside the storybook so for that just go to package.json again and insert the dependency just add the UI and refer to the local package and you might also notice that hey our styles are not working the reason is we have not import Styles yet so just go to a preview file of this storybook oops this inside this dot storybook inside this preview.c.js we just need to import the Styles input dots sorry UI slash styles.css that's it just save this and refresh the page the storybook is implemented we have created Italian package we have created two apps only the feed one is the next Js oh anything else yeah yep covered a lot of good things like how to bundle uh you know Tailwind component how to bundle a storybook using wheat and all these stuff so I hope this video makes sense I hope this video was helpful for you guys and if you think if you have learned something from this video please like the video and subscribe to our Channel I'll keep adding more advanced level front-end videos so see you in the next video bye oh by the way I'll add the source code in the description box if anything goes wrong in your project you can just refer to a source code okay now bye

Channel: Backbench Coder

Views: 14,472

Keywords: Shared UI library with ts-up, turborepo, monorepo, turborepo tutorial, monorepo using turborepo, typescript, monorepo vs multiple repo microservices, monorepo vs polyrepo, monorepo git, monorepo vs multi, monorepo vs polyrepo microservices, monorepo vs polyrepo pros and cons, monorepo vs multi repo google, monorepo git submodules, monorepo turborepo next js vite storybook, turborepo using storybook, bundle js and css tailwind using tsup, monorepo beginners, advanced frontend

Id: exCTI9nOc-E

Length: 36min 48sec (2208 seconds)

Published: Sun Apr 23 2023