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.
- Apps: It contains mono projects, like web/backend apps, each app will contain code related to the respected service.
- 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 akaisomorphism
, somelibs
will not share code betweenapps
specially withcore 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!
Top comments (0)