DEV Community

Ibrahim Shamma
Ibrahim Shamma

Posted on • Edited on

The Nx Node/React Stack part 2 - Libraries

#react #node #nx

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"
  },
Enter fullscreen mode Exit fullscreen mode

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

mkdir ./apps
mkdir ./libs
Enter fullscreen mode Exit fullscreen mode

Now let's install the nx generators

npm i @nx/node @nx/next --save-dev
Enter fullscreen mode Exit fullscreen mode

Now we will generate shared-types lib:

nx g lib `shared-types`
Enter fullscreen mode Exit fullscreen mode

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.
@nx/node package

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

Top comments (0)