DEV Community

Apperside
Apperside

Posted on

Creating a web3 DApp with a NX Monorepo - 2 of 5: Create the core library

This is the third episode of a series about the work I've done to create a web3 DApp in a NX monorepo.

Check the previous articles to have a better context understanding.

BALUNI CORE

Creating the project

Once we have created the previous 2 projects with the contracts, we can start building the core library of our DApp.
This library will need to expose an "api" to consumers to allow them to perform common operations.

We will start by adding a new library to our monorepo

npx nx g @nx/js:lib baluni-core
Enter fullscreen mode Exit fullscreen mode

Main goal ⚽

One of the mail goal here is to provide a good developer experience by offering a well organized set of import paths.
At the moment, the actual project is used like this:

import something from "baluni/dist/some/path
Enter fullscreen mode Exit fullscreen mode

Note the dist piece in the import path, is so ugly!

Image description

We want instead to import things in a nicer way

import something from "baluni/feature1"
import somethingElse from "baluni/feature2"
// and so on
Enter fullscreen mode Exit fullscreen mode

Image description

Importing the code

This is the original project's main code structure

Image description

I have to say my friend, quite messy, but I forgive you

Image description

Since digging in the code is not in the scope of this article, the goal was to bring in the monorepo the things as they are now.

So here I just did 2 things:

  • I copy/pasted core and api folders under the new library's src folder
  • copied all the dependencies from package.json the the library's package.json and prevented the hoisting as we did previously

This is the new library structure:

Image description

After importing the dependencies and the code (this project has no assets) I tried to build the project but I had to fix some typescript configurations that NX has set by default.

The first one was related to the fact that we are importing json files (the contracts).

Image description

I fixed this by setting "resolveJsonModule":true in the root tsconfig.base.json, typescript also made me set "esModuleInterop":true

Image description

With this in place, I was able to use this kind of import in baluni-core

import factoryAbi from 'baluni-contracts/artifacts/contracts/orchestators/BaluniV1AgentFactory.sol/BaluniV1AgentFactory.json'
Enter fullscreen mode Exit fullscreen mode

After fixing that the project built successfully, let's see the output:

Image description

as we can see, this output contains the src folder, which makes it impossible to use the import as we wish.

Image description

Organizing import paths

As I said previously, we want to provide good developer experience by proving clear an well organized import paths.
Moreover, I'd like to do it without modifying the existing code.

By analyzing the actual used imports from outside, I decided to provide this imports

  • baluni-core: should export everything from the core folder
  • baluni-core/api: should export everything from api folder
  • baluni-core/utils: should export everything from core/utils folder
  • baluni-core/types: should export everything from core/types

In order to do that, we first need to add this to baluni-core's package.json

"exports": {
    ".": "./index.js",
    "./types": "./src/core/types/index.js",
    "./api": "./src/api/index.js",
    "./utils": "./src/core/utils/index.js"
  },
Enter fullscreen mode Exit fullscreen mode

This is the final package.json

Image description

it will define additional entry points for our library as we wish.

Now we need to instruct NX to output the content of the source src folder to dist/packages/baluni-core instead of dist/packages/baluni-core/src

to make this we need to edit project.json:

Image description

After I had set the flag "rootDir": "packages/baluni-core/src", the build output was changed to this:

Image description

Image description

Now we have the proper build output so also this package is ready to be deployed on npm.

On the next articles we'll se how to create a cli, a backend and a NextJS app using this library.

You are very welcome to leave a comment, I will be happy to answer to all your questions.

Top comments (0)