Monorepo Lerna Project Setup - React and Node.js Application | Multiple JavaScript Packages

hey guys welcome back to another video and in today's video i will share how to set up react and node.js application into a single repository or we say a mono repo architecture using learner it's a quite popular tool to manage multiple javascript packages i am sharing this with you as i am recently working on a project which is using a monorepo approach and we are using learner to manage the project so if this sounds interesting then watch the video till the end also make sure you subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] all right guys so before we start doing the setup let me give you an overview of what i have in this video so a multi-repo means for each package you have a separate repository let's take an example of a create react app or a node.js project it gives you a complete package with node modules and package.json on the other hand the monorepo means that you have a multiple javascript packages in one single repository these packages can be react node angular app which has one main package.json file and one node modules which is shared among the packages i already have a video on a mono repo setup using yarn workspaces if you are interested then check the card above i will also add the link in the description below so let's see what tools we will need to do this setup we will be using learner as a managing tool and npm as a package manager let's take a look on the project structure that we will be doing in this video so we are going to have a learner monorepo directory inside that we are going to have the node modules which will be a common directory for all the dependencies we have for the different projects then we are going to have the packages folder which will contain a web client and a server api the web client will be a react app a front end which we will create using the create react app and the server api will be the backend which will be the node.js and then we are having a package.json file and the learner.json file which will manage the multiple packages let's talk a little bit about what is this learner so a learner is a library that provides tooling to manage multiple repository structure inside a single repository using learner we can run npm scripts in multiple packages learner helps us to hoist all the package dependencies into the root level node modules with learner and multiple packages it's easy to share code between packages alright so now we have some idea about the learner and monorepo let's jump into the visual studio code and do the project setup all right guys so i already have the directory learner monorepo and inside that i have already created the react application so you can create the react application using npx create react app and the name of your application so for me it was the web client and after creating the react application uh if you want to check your nodejs and the npm you can simply do node hyphen v and you can get your node version and for npm you can do the npm hyphen v so i already have the node and everything installed the next thing we will do is we are going to install the learner so to install the learner you can use npm install hyphen d as a dev dependency and i can say learner and hit enter so it is going to take some time so let me get back in some time all right so our learner dependency is installed and it has created a node module folders which contain all the dependencies the next thing we need to do is let me clear the console so i'm going to clear the console and next thing we will do is we are going to initialize the learner in our project so to initialize the learner we can use npx learner init and hit enter so this is going to initialize the learner and it's going to give us the learner.json file so the initialization is done and it has given us a packet json so let's go to the package.json we can see the name is root of the folder and it's prompting me that uh i don't have a git ignore file uh so let me add the git ignore file so that uh it will ignore the node modules so i said yes and now it created a get ignore file all right so we were in the package json and inside the package.json we can actually give the version here so let me give a version of 1.0.0 all right and let's go to the learner json so inside the learner we have two things one is the version so let's give the same version so i'm going to change this to one and we have a packages directory where we will have all our packages the react application and our node application so what i'm going to do now i have the packages now i'm going to move my web client which is the react application inside this packages folder so i'm just going to drag and drop it in the packages and i will click on move so this is going to move my web client into my packages folder all right so now we have moved our web client into our packages folder so we have the front-end application now let's initiate the back-end application the node.js application so for that what i'm going to do i'm going to go into the packages directory and inside the packages directory i'm going to create a directory called server api all right and then let's go to the server api and inside the server api i'm just going to clear the console i'm going to write npm init hyphen hyphen yes and this is going to initialize the package.json file so let's have the package.json file all right so now i have the package.json file in my server api so if i expand this then i can see that i have a web client and i have a server api inside the server api now we have the package.json file and in this package.json file what we are going to do we are going to create an index.js so let's create an index.js all right and inside the index.js we need to have some dependencies uh for writing our node application the express server and the body parser so let's install that so i'm going to write npm install express and body parser all right and let's wait for the installation all right so our body parser and express is installed now we can write some code in our index.js so let me write some uh basic code so i'm going to create an express constant that will be equals to require and this will become express then i'm going to write a constant of quote that will be equals to process dot env dot port and we are going to give a port of 5000 i made a mistake here so let me change this to env all right and let's do a list on the port so for that i'm gonna have a port and i'm gonna have the error and this will be an arrow function and if there is an error then i'm gonna do a console.log and i'm gonna add a backtick that will be an error and it's going to have a error dot message all right and if not then we are going to have an else and this else will have a console.log and here we are going to have a listening on quote so it's a it's a basic code of the uh just having a node server and then we are going to create a small api so let me create a small api a get api so that we can see something so app app.get and the path will be slash and it goes to take a request and a response then we are just going to have a response dot send and let's send i am a backend server all right so we have created the index.js file note server all right so currently we see that we have a different node modules for each of the web client and for the server apis and with the help of learner we want that we need to have all the dependencies in our root level node modules which is this one so for that what we are going to do let me clear the console and we are going to use as npx learner clean hyphen y this is going to clean all the currently installed dependencies so let's hit it and let's wait for the command to get execute all right so our learner clean command is run successfully so we can see that what actually happened when we run the learner clean it actually removes the node modules from the server api and it removed the node modules from web client and this is what we wanted because we wanted that we have a common node module where we have all the dependencies and now if we go to the server api and the web client we will see that we don't have the node modules but all the dependencies are already added in the package json and these dependencies and these dependencies should be available in the node module so we need to run one more command and that will be npx learner bootstrap and we are going to add a hoist flag so this hoist flag will first check the dependencies that are required for these projects from the package.json and it's going to install all those dependencies in the root module so let's hit enter and it's going to take a while so we are going to take a pause here again all right so now all our dependencies have been hosted to the root level so if we see what actually happened is that it's bootstrapping two packages we have two packages one is the web client other one is the server api then it's installing the hosted dependencies into the root node modules so now this node module contains all the dependencies which are required by the web client and the server api so what we are going to do is we are going to go to the package json and we will add some scripts here so i am going to add here as start and this start will have node index.js and let me remove the text here as well i'm going to do eco testing node server all right and for the other one so i made a mistake here oh okay and for the other one the web client so if we go to the package.json file here and here also i'm going to make some small change so here for the test i will remove this and for the sake of simplicity i'm going to add testing react app and now the last thing we need to do is we need to run the learner commands through which we can use these npm scripts so what we will do we will go to the main packet.json and here we are going to add some scripts so i'm going to add here scripts and these scripts will contain the first one will be the start so when i hit the start i need learner run start all right and the other one will be the test so when i hit test it should be learner run test other one i will do a new version which these are the offerings from the learner which learner helps us so for this i'm going to do a learner version hyphen hyphen conventional comments and this will become yes and the last one i'm going to do a diff and this will be the learner div all right so these are the scripts and now let's give a try that i want to run the npm test on all my packages so to run the npm test i don't need to go to each of the packages and run the command individually npm run test so this is going to run the test cases of both the packages so the scripts which are included in both package packages package json so it's going to run on both so let's hit and let's see all right so now if we see it then what happened when we run the npm run test it actually run the npm scripts in the server api and from the server api we got that eco testing node server so this is the testing node server and then it also ran the test in the web client which is the eco testing react app testing the react app so that's where learner helps us to manage the multiple packages with a single package.json file now if i want to start my both packages the react app and the server api i just need to do npm run start and learner will take care of it it's going to start both the applications so now it's running the start command in both the packages so it's saying that executing command in two packages all right so now both our application is started and let's go to the browser so if i hit localhost 3000 then i can see that it's application is started the react application and if i go to the local host and i make it as 5000 then you will see that i have my node application also started so this is how with a single run command you can start both your application and this is not limited to the start of the application you can also run the other npm scripts like test eject and it will run in all the packages so if i go back here and if i terminate this so if i go to the main package.json file and here i can actually add a scope flag so i only want the web client so now if i actually do the let me clear the console and if i actually do the npm run test then this is sorry so i will add this on the run statement so i'm going to add it here and if i do npm run test then the test scripts will only be executed in the web client and if i want to change this so if i can also give more value so if i want to have it in both so i'm going to give a server and i'm going to add the api but right now i only have two so if you want to add more you can actually add it from here and if you remove the scope flag then it's going to run the npm scripts in all of the packages so now you can see here that learner run test scope is the web client so it is only filtering out the web client and executing the command in only one package there are more commands which you can use the new version which actually helps us to have a new version whenever you want to release the build into production uh even i am learning about the conventional commits once i have a good command on it i'm going to make a content on the conventional commit with learner and you can also do the run diff which is actually going to give you the difference of your hinges so you can find all these commands on the learner official website so let's go to the learner official website so if i go here and if you type learner then so this is the official website and this one link is the git repository so on the official website you can see the documentation and here you can see all the commands that are really helpful which we have used in this video so you can do the learner innate you know the bootstrap and then we can actually publish the packages so the learner def command learner run and learn our change so all these commands are available and you can also see the github repository i'm going to add the links in the description so that you can have it for the reference there is one more use case of the learner that what we can do in the server and the web client if we want to have a common module then we can create a common module and then that module can be used as a dependency in the web client and the server client so i haven't covered that in this part but i'm going to cover that i'm going to make a new video on it where i will have a one more package which will be the common package and we are going to use that common package in our web client the react application and in our note application so that's how you can actually do the learner setup for your mono wrapper application where you have a full stack application contains the react and the node.js so i hope you like the video a thumbs up is appreciated also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one you can also connect with me via facebook or twitter i'm going to add links in the description below and thank you thanks for watching

Channel: Dipesh Malvia

Views: 12,664

Rating: 4.8837771 out of 5

Keywords: Multiple JavaScript Packages, node js, mern stack, react, javascript, yarn workspaces vs lerna, monorepo, react monorepo lerna, programming, web development

Id: j0FiMekdeOs

Length: 18min 2sec (1082 seconds)

Published: Tue Feb 02 2021