No BS TS #32 - Monorepos with NX

welcome to episode 32 of no bsts where we take a look at typescript in monorepos so let's start off by talking about what a monorepo is well a monorepo is a set of js or ts packages that exist within a single git repository now why would you want to do that well we want to have lots of small packages so we can get optimal reuse out of our code and kind of stick everything together in a modular way but the problem becomes version change cascades so if you change a low level package which is dependent on by a bunch of packages then you've got to bump all their versions and kind of get a cascade and if so if all of those are in different repos then that becomes a version management problem and you've got to go pr a bunch of different repos to get just one small thing done so mono repos fix that i use a monorepo at my job we go and build both an electron application and a next.js web server with a common set of core components in a shared set of packages and it's great now i wanted to show you how to do this but there is a lot of setup when it comes to getting this right for typescript the nice thing is there is this nx.dev this nx system which makes it all really easy so let's try it out so the first thing i'm going to do is copy this mpx create nx workspace and i'm going to take that into my terminal go into no bsts and i am going to paste that in there and then give it the name blue collar coder mono rebo and now it's asking me whether i want to initialize this either as an empty monorepo with nothing in it i'm actually going to opt for doing a react app in there i'm going to call that my app and they've asked me some basic questions and no and now it's going to install and this is actually going to take a while so i'm going to clip this out and i'll see you on the other side when we bring up vs code okay it's done i'm going to go now into that bcc mono repo directory and bring up vs code and we can have a look around we have apps and libs and so libraries which is libs there's nothing in it we have no shared components yet but we do have our my app that was created and it's basically just a typescript react application that's got some nice placeholder in it so let's go and bring that up in the terminal and to do that all i need to do is just say yarn start now if you have multiple applications it's going to go and fire up all those this is also going to monitor any library code to see if that changes it's really a great system i'm i'm really really really impressed with nx all right so i'm going to go find the url here and see that it's listing listening awesome very cool okay so this is a nice page it gives us a little handy helper hint here where if you've got nx installed globally and i do you can create a library of components using this command so i'm going to copy that command and then create another terminal and at the top level then do nx which means which is the nx system g for generate and then this is the template so it's a react library and i'm going to call this my comps so it's going to be the components for this application now if we go over here into libs now we've got a my comps in there very cool right okay so it's actually got a component in there already but i want to go and add my own custom component so i'm going to do nx g and then same sort of thing nrwl react and then component and then give it the name of my component so carousel and then give it the project i want to in the my comps project and should it be exported sure yes i would think so okay cool so now we've got a carousel in there and i can say hi from my carousel so this is my custom carousel component very cool now how do i go and use this well this is part of the greatness of this nx system i don't actually have to do any hard linking between these things i just need to import it it will automatically detect that and create the dependency for me so i go over here to app and then i say import from and i do at bcc mono which is the namespace and my comps now i can say that i want to bring in the carousel holy moly okay so now let me go and get rid of that and i'll take out all the main here don't really need that but i want to put in my carousel carousel very cool now is it working maybe maybe not let's see okay so it can't find it yet so we need we do need to reboot the server which i think is fine so let's go back over here to node stop the server and then restart it totally worth paying the price on that you only have to do it once to go and create that connection so all right let's and it's that fast look hi from my carousel and this is picking up all the types i'm telling you i actually created the monorepo for my work it is not simple to get typescript working in a mono repo and get it done reliably and this does it for you in minutes it's fantastic okay so one more thing i want to show is around the dependency graph it's really cool so i can do n x dep dash graph and it'll give me a dependency graph and show me how all of my applications consume all of my libraries so the ede application or end-to-end testing application consumes my app and my app in turn consumes my components how cool is that that is actually really hard information to get in large complex systems that's actually really huge so let's do just one more thing let's try out storybook because that's another thing you kind of want to do in these mono reposes you want to be able to advertise to other developers hey you should use this component and here's properties and all that sort of stuff and storybook is a fantastic system for doing that so let's see how we can put storybook into our app go to the storybook page and again we'll use this yarn to add the storybook and that's the nx essentially plug-in around storybook storybook's its own thing but they made it easy to integrate using this nx storybook which is awesome okay that took a bit but it was worth the wait so next we want to do is generate a storybook for that component library so i'm going to copy this paste it in there and say that i want it on the my comps project and then no on the test but true on the auto generation of the stories all right and then finally let's actually run it so we're going to do nx run and then the project name and then colon the storybook so let's go over here nx run my comps storybook that's going to bring up storybook on the my components project okay and now i've got our url let's click on that and we've got our storybook for our carousel how awesome so is all of this live is this connecting together let's try it out okay so i go back over here to our libs and i say live update question mark question mark question mark i'll hit save i'll hit refresh on that so it's a refresh but i think that's fine and now over on my app bang it's live updating how easy is that it is phenomenally easy to put together a monorepo for typescript using nx like this all right well i hope you liked the video and if you did be sure to hit that like button and leave some comments in the comment section youtube is really big on comments and that would help out this channel a lot if you left some comments of course in the meantime feel free to subscribe if you haven't already and click on that bell button and be notified the next time a new no bsts video arrives

Channel: Jack Herrington

Views: 2,819

Keywords: No BS TS 32 Monorepos with NX, no bs ts, monorepos with NX, Typescript Monorepos with NX, typescript react nx, typescript in monorepos, Typescript in MonoRepos, react components library with NX, Typescript in Monorepos with NX, introduction to NX, NX, Monorepos with NX, NX Dependency Graph, React StoryBooks Integration, typescript monorepos, TypeScript Monorepos with NX, Typescript shared component with NX, Typescript Monorepo with NX, Typescript React Monorepo

Id: Bw_tmWEaaIU

Length: 9min 19sec (559 seconds)

Published: Thu Jun 10 2021