Share Code Between a Library and Applications Inside a Monorepo
We already have a utils package that outputs JavaScript. If we want to use that package inside any of our applications, in our case, blog or dashboard, we would have to install it first.
Man: [0:00] Let's install the monorepo-utils/package as a dependency inside the monorepo dashboard project, and inside the monorepo/blog project.
[0:14] If we take a look at the package.json file inside the blog, we'll see that we are using the monorepo-utils version 1. The same is true for the dashboard project. We are using monorepo-utils in version 1.
[0:30] Now that we have installed the monorepo-utils package inside the dashboard, we can use it in our application. Let's import copyright from monorepo-utils, and we are going to use it here next to Vite and React.
[0:51] Let's do this copyright. We save the page and we see that this has changed. We will do the same for the blog. Let's open the blog pages and then let's open this index.tsx. Let's do the same thing.
[1:10] Welcome to Next.js, let's change this to copyright. This code will allow to import these for us. Let's take a look at the application. Let's reload the page, and we'll see that it says, egghead.io.
[1:31] Let's go to libs and change index.tsx. Let's uppercase the first letter. As you can see, we can see the change here. It is also reflected here.
[1:45] Also, please note that we are importing copyright from @monorepo-utils. We are not using relative paths here, like these styles.
[1:56] We are using the name of the package that we have inside the utils package, package.json file, and this is the name that we are using in dashboard, blog to import the utils package.
[2:12] To recap, we already have a utils package that outputs JavaScript. If we want to use that package inside any of our applications, in this case, blog or dashboard, we would have to install it first.
Hey @Michael! I’d double check a few things:
- Do you have the “workspaces” property set up correctly in the root package.json
- Do you have the correct names in each one of your packagess/apps? Check the “name” property in each one of your package.json files.
- You can inspect the package-lock.json file to confirm that all the names for your packages are OK
Thanks Alejandro. I double checked and they seem all good to me. I followed your course and created a project to follow along. Here is the commit which I manually added to the package.json to both apps/blog and apps/dashboard instead of run npm install @monorepo/utils --save -w @monorepo/blog -w @monorepo/dashboard. This works as I can now import and use copyright from the shared libs/utils in both projects. Ideally I was hoping to be able to run the npm install like you demonstrated in the course.
I had the same experience but the work around is fine.
@Michael @Jason I had the same experience before but after upgrade Node version to v18 I can install the libs using npm install as in the video.
The "View code on Github" button doesn't bring me to the code in the video.
The "View code on Github" button doesn't bring me to the code in the video.
The github code brings you to the finished code of the course. To find the exact code in this lesson, you'll need to go back a few commits. I believe this is the exact commit for this lesson: https://github.com/alejandronanez/turborepo-egghead/commit/c9f4042d3f9ca3bdf0dee8ebe73375fb727554cd
Wow. Amazing how fast and smooth this works. Even on a desktop where I expect speed, I'm impressed the TS build and hmr update in both running apps happens faster than I can blink.
What did you do to stop
npm installa local package from reaching out to the npm registry? The commandnpm install @monorepo/utils --save -w @monorepo/blog -w @monorepo/dashboardgives me an error E404 because obviously the @monorepo/utils is not a published package.