Share Code Between a Library and Applications Inside a Monorepo

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.