Recently, I wrote and article about setting up yarn workspaces and adding Docker support to it for orchestration.
You can read it here Docker setup for yarn workspaces
I thought we can extend this setup to include a library as well. Shared libraries are fairly common in any organisation, so we'll be adding a component library based on React to our workspace.
To go over our setup, we have an
apps folder where all our apps live in. We have two apps called
product. We are going to be adding a component library to this setup and this library will be used by both of our apps. Let's get started.
I'm going to be using Vite as our build tool. It has a nice cli which lets us scaffold an application easily.
To create a vite project in our
cd apps yarn create vite lib --template react
The next step is to update our dependencies by running
yarn install from the root of our workspace.
If we open the
src folder in
lib, we can see that it is an ideal setup for an application, not a library. So, we'll remove all the files from
index.html and add our own.
First, we'll add an entry file called
src. This will be the starting point file in our bundling process.
Next, we'll create a folder called
components which would house all our components, and add an
index.js file to it as well. We'll export all our component from this index file.
Great! We have our directory setup nailed down. We can finally start adding components. We can add a simple button component. I'm going to create a directory called
components directory, which would contain three files.
Button.css and an
Let's add the contents of each of these files
This is a very simple component with not a lot of emphasis on styling and attributes. You can customise this component to your liking.
We have a component exported from our
Button directory. We need to export this component from our
components directory as well. We'll add this export like this
This would export all our exports from
components directory. If we add more components, all of them would be exported from here.
Before we can start using our library in applications, we need to modify our
vite.config.js to let vite know this is a library and should be bundled as one.
The documentation for this can be found here
We'll be adding the following config to
peerDependencies option tells the bundler not to add these dependencies in our final bundle.
exports options are needed for the application's bundler to figure out where the files are for
Great! Let's now move on to using library in our apps.
Adding a local library as a dependency is as simple as adding any other dependency.
yarn workspace admin add firstname.lastname@example.org
This command would add
lib as a dependency to
admin. Notice we've mentioned the version of lib as well. This version must be the same as the
version property in
Another way is to simply add
lib: 0.1.0 entry to the
dependencies section of
package.json in admin.
We are now in a position to use our
Button component from lib. We'll do that in
App.jsx in admin
Next step is to alter our scripts in
package.json to make sure our library is compiled when we run our applications.
We'll add a few scripts to do this
Awesome! We're almost done. Only thing left to do is to check our admin app.
If we open
http://localhost:3000 on our browser, we can see our
Button component in red color as per our
We can repeat the same process to use the library in any other application in the workspace.
Awesome! We have a yarn workspace with two applications and a component library in React. We can extend this idea and even add multiple libraries into this workspace.
If you are interested in setting up a React-Typescrippt component library from scratch, check out my article here Component library setup with React, TypeScript and Rollup
The source code for this can be found here