Shared library in yarn workspaces

Introduction

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 admin and 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.

Adding a library

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 appsdirectory,

cd apps
yarn create vite lib --template react

Our lib folder would look something like this now

The next step is to update our dependencies by running yarn install from the root of our workspace.

Adding components to our library

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 src and index.html and add our own.

First, we'll add an entry file called index.js in 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.

Our project should look like this now.

Adding a button component

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 Button in components directory, which would contain three files. Button.jsx, Button.css and an index.js.
Let's add the contents of each of these files

Button.jsx

Button.css

index.js

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

src/components/index.js

The next step is to export the components from our src.
src/index.js

This would export all our exports from components directory. If we add more components, all of them would be exported from here.

Our lib folder should look like this now

Finetuning Vite config

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 vite.config.js

We also need to add some options to our lib's package.json.

The peerDependencies option tells the bundler not to add these dependencies in our final bundle.
The main, module and exports options are needed for the application's bundler to figure out where the files are for umd and esm formats.

Great! Let's now move on to using library in our apps.

Using our library in apps

Adding a local library as a dependency is as simple as adding any other dependency.

yarn workspace admin add lib@0.1.0

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 package.json in lib.

Another way is to simply add lib: 0.1.0 entry to the dependencies section of package.json in admin.

Testing it out

We are now in a position to use our Button component from lib. We'll do that in App.jsx in admin

admin/src/App.js

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

package.json

Awesome! We're almost done. Only thing left to do is to check our admin app.

yarn start:admin

If we open http://localhost:3000 on our browser, we can see our Button component in red color as per our type prop.

We can repeat the same process to use the library in any other application in the workspace.

Conclusion

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

Cheers!

Comments

[JuanGaVS]

Hi,

Great article, I had a couple of days looking for something like this,

I got your code from the github repository and everything works wells running it with
yarn start:admin

but when I try to build the images with docker-compose build I'm getting this error:

 > [yarn-worspace-docker-master_admin build 8/8] RUN yarn build:admin:
#0 1.587 yarn run v1.22.5
#0 1.615 $ yarn build:lib && yarn workspace admin build
#0 1.770 $ yarn workspace lib build
#0 1.933 error Unknown workspace "lib".

Could you help me to identify what is wrong?

Thanks.

[Shimbarks]

Thanks for the article!

I followed your steps and it works, but the CSS isn't being loaded.
Any idea on how to fix that?