Npm workspaces dependencies8/17/2023 Same for the dashboard and same for the utils. Yes, the app's package-lock.json file has changed. Now, let's run git status to see what has changed. We could install Lodash across all the packages in the monorepo by adding the -ws flag. If we run git status, we'll see that we have modified the package.json file inside the utils package. Let's check out the package.json file inside the utils folder. In this case, we want to install Lodash inside the utils package. Once the above dependencies are installed, create a common tsconfig.json file that will be extended by all the other packages of our app.Instructor: We would install an npm package inside a package of a monorepo by running npm install, then the name of the package. Now, in order to use Typescript in our project, we need to install a few dependencies at the root level. This command will do the following things:Ĭreate a package.json file if it is not already present and add lerna as a dev dependency.Ĭreate and configure a new lerna.json file.Ĭonfigure npm workspaces inside package.json.Ĭreate a packages directory that will contain all our monorepo packages. Then, move inside your newly created directory and initialize a Lerna workspace. Let's start off by creating a new directory at your desired location. Project Overviewįor the sake of this article, our monorepo will have two packages:Ĭommon: A shared library that can be used by multiple packages.Ĭlient: A basic React app that will consume the common package and will render the components on UI. Other than that, some basic knowledge of Javascript/Typescript and React will help in understanding the code that we are going to write. To follow along, you must have Node installed in your system which I am assuming that you would already have. Lerna is being used by many different teams including but not limited to: You can check the complete list of Lerna features here. Simply run npx nx graph and it will launch a project visualization graph on your browser. Lerna uses Nx to help visualize the workspace graph. Visualize the workspace: When the workspace becomes very huge it is common for a new developer to face difficulty in understanding the hierarchy of the workspace and understand how different packages are linked together. For example, Let's say you have 3 packages inside your monorepo and you want to run the test script for all of them, with Lerna all you have to do is just run npx lerna run test command from the root of your project and it will run the test script inside each of your packages (You must have defined the test script in package.json for all the projects respectively in order to make this work properly). Running tasks within multiple packages: Lerna gives us an out-of-the-box solution to run tasks inside multiple packages together using lerna run command. Lerna has some great in-built features which make managing monorepos surprisingly easier. Lerna can rescue us in this situation by doing the heavy lifting of managing the tasks in different packages, versioning, code deployment, etc. Monorepos can have tens if not hundreds of packages, and managing all of them together can become very difficult. Lerna is fast, widely used, and battle tested. To use monorepos well, you need a good monorepo tool, and Lerna is exactly that. If you are interested in setting up a monorepo with Vite, Pnpm, and Typescript you can check out my previous blog here. In this article, we will see how we can set up a monorepo with Lerna and Npm workspaces. Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository. Lerna is a powerful tool that can be used to manage and publish monorepos in Javascript/Typescript projects. Monorepos lets you manage multiple repositories into one single repository but managing and publishing them can be very tedious as the repositories grow.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |