The Nx Node/React Stack part 2 - Libraries

Now we have an environment, we need to start building our project, but nx will split the codebase into apps & libs let's make our understanding around both.

1. Apps: It contains mono projects, like web/backend apps, each app will contain code related to the respected service.
2. Library: The shared code code and types between apps, or it could be the logic container to a specific domain. ex: you may add a package for redux slices where it will share the slices across the micro frontends, or you can add classes that will be used across backend and frontend this will help teams to mutate one class across the domain, rather than having one class one the server and one on the browser aka isomorphism, some libs will not share code between apps specially with core lib where it will host the business logic of a domain.

Each lib/app is a monorepo by itself

We need to install next & node where they will generate our ui and server apps/libs

add the following prop into nx.json from root dir

"workspaceLayout": {
    "appsDir": "apps",
    "libsDir": "libs"
  },

make sure that you have apps/libs dirs, if not run:

mkdir ./apps
mkdir ./libs

Now let's install the nx generators

npm i @nx/node @nx/next --save-dev

Now we will generate shared-types lib:

nx g lib `shared-types`

now choose @nx/node package because we want shared-types lib to be served on both ends it needs to be on node esm standards, you may get mistaken and related @nx/node to cjs but it is not, nx is following the standards which makes it easier to share code.

In the next section we will start setting up the next app!