Repository files navigation

ToDos project example

This project was generated usingNx (v14.5.10)

• ToDos examples

  • How To Build a React To-Do App with React Hooks | DigitalOcean

  • Build a To-Do application Using Django and React | Scotch.io

ℹ️  use the node.js v16 LTS

• test a monorepository structure in a more entreprise scenario

• Nx

• Project creation commands (steps)

• 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 runnx serve api and in another one, you runnx serve frontend

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

  • followed some ideas fromUsing Nx at Enterprises

• 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 thesrc/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 thesrc/ folder in the what that you want to access and change the{project_root_folder}/tsconfig.json thepaths 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 directorydist/app/app-name

• Running the frontend and backend together, based on the followingtweet

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