Building and Using Shared Repositories in React with PNPM
We are going create a shared library using React and TypeScript.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The Art of Enterprise Monorepos with Nx and pnpm course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The Art of Enterprise Monorepos with Nx and pnpm, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 01:03] Welcome to module 3, Shared Reposteries. In this module, we will be exploring the concept of Shared Reposteries. We'll be learning how to create a shared library inside NX, export it, and use it in the React application we created in the last module. In the first lesson, we will create a shared UI library. Let's create a small shared React UI library called Shared UI inside the package folder. So let's change our data into the packages folder. And here let's create a small React UI library called Shared UI. So let's create the directory for it. Change into that directory. And here we can initialize the pnpm. So this command has created this package.json file. We can change the...
[01:04 - 01:19] Now here we will make it a private module because we are not opening this up to the public. We'll keep the name as Shared UI. Now let's create a button component.
[01:20 - 01:34] In our button component, we are going to use React. So let's import React library. We can use our filter command.
[01:35 - 01:58] And we will import the React library. Now when you look at the dependencies, you can see the React library here. So in order to build this library, we will use TypeScript. So we can import TypeScript package as well.
[01:59 - 02:14] We'll add TypeScript as a dev dependency. Now TypeScript has been added. Now let's create a TS config file.
[02:15 - 02:44] I will paste in this snippet for our TypeScript configuration. So in here, we will build our shared React component library and the output directory will be... we will target this. We will pass in children and on-click handlers.
[02:45 - 03:17] And we will export this button. Now in order to export all our components, we will create an index file. We will also change our button component to a TypeScript file.
[03:18 - 03:34] And inside our index.t as well, we will export our button. Great. Now we can try and build our library.
[03:35 - 04:01] But before that, we will go to the package.json file and we will add the build command. So first, we will need to get rid of whatever the builds that has been there previously. So we will remove any the disk file and we run the TypeScript compiler.
[04:02 - 05:07] Just like this. We have to make sure that main is pointing to the build, which is the list folder. Now let's try and build this. Let's say pnpm, filter, change UI, and then we will run the build command. It throws an error saying, I cannot find the name map. Do you need to change your target library? In order to fix this, we will have to import the types from TypeScript. So pnpm data. Type UI. Types node. We will install this other day old dependency.
[05:08 - 05:30] Now it's installed. Let's try and build our shared UI library again. Looks like it was successful and you could see the transpiled packages in here.