Skip to content

ToDos app using the Nx (Extensible Dev Tools for Monorepos)

License

Notifications You must be signed in to change notification settings

erkobridee/nx-todos

Repository files navigation

NxTodos

ToDos project example

This project was generated using Nx (v14.5.10)

ℹ️  use the node.js v16 LTS

Goal

  • test a monorepository structure in a more entreprise scenario

Documentation

Project dependencies graph

nx dep-graph

Findings

  • Developing a project which contains an api and a frontend application, you need to have two terminals to run each project, for example, in one terminal you run nx serve api and in another one, you run nx serve frontend

  • It's really interesting breakdown the application into smaller libs, so we have better code isolation, the possibility to run tests on that code and also using the nx dep-graph have a better understanding of the project code and how the parts of the project relate to each other

  • The libraries created by the Nx CLI has a pre-defined code structure (more information about it here)

    • The main concept of a library adopted is to be a "Black Box", which what's exposed from the library is defined on the src/index.ts

    • It's possible to have more flexibility and expose the whole content from the library (that's really useful to define a UI components library). To do that, you need to reorganize the src/ folder in the what that you want to access and change the {project_root_folder}/tsconfig.json the paths configuration alias to be something like

{
  ...
  "paths": {
    ...
    "@namespace/ui-components/*": ["libs/ui-components/src/*"]
    ...
  }
  ...
}
  • When you run the build Nx CLI command, for example, nx build app-name that will generate the output of the build on the directory dist/app/app-name

  • Running the frontend and backend together, based on the following tweet

    • nx run-many --target=serve --projects=todos,api --parallel=true