Nestjs react monorepo


  • Senior Full-Stack Developer
  • Setting up a monorepo with Lerna for a TypeScript project
  • Nx Monorepo Build System
  • Managing Your Typescript Monorepo With Lerna and Codefresh
  • [Tech Blog] Introduction to NX and Monorepos
  • Senior Full-Stack Developer

    I work as a Front-end Developer for the AnyLogi team. A Quick introduction to Nx and Monorepos Nx is a framework that allows you to architect, test, and build your project at any scale with the most popular modern Front-end frameworks like React and Angular, and Back-end ones like NestJs or Express. To make this possible, Nx comes shipped with a large toolset that simplifies your Monorepo management. If you are unfamiliar with Monorepo, it is basically a version-controlled code repository that holds many projects and libraries.

    The Monorepo approach has several benefits over a common one. Here are a few: Shared code — It is already possible with properly fragmented repositories to share common logic across the whole company, organization, or project. Monorepo makes it even easier to improve the DRY ness of your code as we can not just reuse common patterns, components, and types across different front-end libraries but between Front-end and Back-end as well.

    Standardization — It is easier to standardize code and tooling across the teams. You can impose branch policies to keep your main branch clean, limit access to specific branches, enforce naming guidelines, include code reviewers, and enforce best practices while sharing the same linter and prettier configurations on multiple projects and libraries in your repository.

    Release management — You can handle all your release pipelines once without having to set up over-complicated deployment sequences across repositories using a clear and defined flow that every team can follow and avoiding the deployment knowledge within each team.

    Easier refactoring and dependencies — Direct access to all micro-services makes refactoring the code in a Monorepo and changing the overall code structure much quicker than moving code between repositories.

    By updating the dependencies on the same repository it is easier to avoid version conflicts between libraries. But why use Nx, and not just create a simple angular or react workspace? What sets Nx apart is the very large toolset that it brings to the table, helping you across all the facets of building your Monorepo. Here are some of the useful features of Nx : Cached and Custom Operations — Nx will allow you to define and cache operations avoiding the same code being built multiple times.

    When making changes to a library, you can automatically execute operations like building, testing, linting… on affected projects, greatly reducing build times or pipeline executions. Cross framework components — Another great feature coming with Nx is the possibility to build micro Front-ends and share the same component across React and Angular applications. You will code your component logic once, and use it as is in your project.

    Additionally, all projects and libraries will be created with testing tools like Cypress, Storybook, and Jest. Easy to manage dependencies — Nx also extends some eslint rules to allow you to carefully decouple and isolate your library and dependencies. To have a quick glimpse of your project structure, you can generate a dependencies graph of the workspace. A Configurable CLI — Nx comes with a robust CLI that can be configured to work with different tools and even different languages providing commands to operate and manage all the chunks of your codebase.

    Metadata-driven — Everything in Nx comes with metadata to enable tool-ability. The default values, validations, auto-completion, and other settings are all defined in a schema, instead of in code. You can also use the Nx Editor Plugin and change his configuration with those files. Since the application requires connection to multiple WMS with different guidelines and requirements, we decided to make the logic decoupled as much as possible.

    This would also come in handy since our app consists of a variety of user types with different permissions and functionality. In previous projects I worked on, the basic approach to handle such cases was to create an Angular directive hiding or showing some UI elements, with conditions in code for calling or not some API. But such an approach makes scalability very difficult. The more User Roles added, the more conditions and logic were added to the FE making it hard to maintain and test the multiple cases.

    Another issue we faced was when creating customized user roles functionality and experiences. In some cases, we wanted error messages for the admins to be more detailed than for users. In other, we would show advanced steps or fields for admins while simplifying the same process to users.

    All those changes would add additional conditions and fragment our application in parts that were not working together in harmony. With Anylogi we decided to follow the Monorepo approach. Instead of having a single project with a hard-to-grasp logic and conditions all over the place, or multiple repositories that would need to work as one, we built a single Monorepo with Nx to handle our various projects and libraries.

    It makes things quicker and easier when sharing common logic, modules, and features across our workspace while maintaining the ability to easily customize the experience of a specific user type. We created 3 projects based on our user roles requirements, and desired experience.

    We separated some common components used in those 3 projects like the headers, logins pages, etc.. Finally, We separated our feature logic into various feature libraries, that way, it would be simple to add or remove functionality when needed. Thanks to Nx cached operations, we can modify a single Front-end app and deploy it independently of the others, or modify a library, rebuild the dependencies and deploy only that library-affected apps.

    One thing we missed and might add later is the addition of our NestJS gateway to this mono repository. Right now, our Back-end Gateway is existing on a different repository, which creates some code duplication but it would work all the same if not better if we added it in our Monorepo.

    We are going to use angular, but you are free to set up React or View. You will also be prompted to use Nx Cloud, I will not go over it in this blog, but you can find more information on the Nx website Nx Cloud You can test the project by navigating in the workspace and launch the project those names are the ones you set previously : cd.

    By default, this will result in an angular module named like the library. But Nx will also add additional configuration in your workspace, the most important part being the following. If you go to the tsconfig. Anything exported in this file will be sharable across your workspace. We created a component the same way we usually do and it is already declared in the library module.

    I will create a simple text header. Conclusion There is a lot more you can set up on NX to make your project easier to manage and we only scratched the surface. I hope this short blog post gives you enough information to understand the basics and the possible applications of such a tool for your future project. I hope to go more in detail in a future blog post and showcase much more functionality. Until then, have a great one!

    Setting up a monorepo with Lerna for a TypeScript project

    Which means we should add it on top level package. Alongside TypeScript we will install type declarations for Node. Preparing build script As we mentioned before, Lerna is intended to be used with Node.

    We will need to add additional configuration to make that work with TypeScript. As this is a demo project, we will assume that we will have a few modules: patient, doctor and scheduler. Creating packages To create packages we are going to use thelerna create terminal command from the root of our project.

    Thelerna create doctorcommand will guide us through the creation of a new package. The name of the package is important. The result should be: As we are using TypeScript for all packages, we will have one common tsconfig. Our tsconfig. We also need to register tsc script in each individual package. The result should be: We added simple logic in each. We can test our setup by running: lerna run tsc The command above will run the tsc script in all created packages: If all goes well, we will compile TypeScript files from the src folder into lib folder in each package.

    If we take a look at package. GIT We will create a Github repository for this project and push all of the code there. Publishing Our goal is to publish all packages under the same NPM scope organization. We created a public free organization at npmjs. If all goes well, we will see message at the end: lerna success published 3 packages. We successfully called exported classes from our packages.

    Lerna commands There are a couple of Lerna commands worth mentioning: lerna add Adds npm dependency to all or specific package within a project lerna bootstrap Install all dependency from all packages within a project Links.

    Nx Monorepo Build System

    If you are unfamiliar with Monorepo, it is basically a version-controlled code repository that holds many projects and libraries. The Monorepo approach has several benefits over a common one. Here are a few: Shared code — It is already possible with properly fragmented repositories to share common logic across the whole company, organization, or project.

    Managing Your Typescript Monorepo With Lerna and Codefresh

    Monorepo makes it even easier to improve the DRY ness of your code as we can not just reuse common patterns, components, and types across different front-end libraries but between Front-end and Back-end as well. Standardization — It is easier to standardize code and tooling across the teams. You can impose branch policies to keep your main branch clean, limit access to specific branches, enforce naming guidelines, include code reviewers, and enforce best practices while sharing the same linter and prettier configurations on multiple projects and libraries in your repository.

    Release management — You can handle all your release pipelines once without having to set up over-complicated deployment sequences across repositories using a clear and defined flow that every team can follow and avoiding the deployment knowledge within each team. Easier refactoring and dependencies — Direct access to all micro-services makes refactoring the code in a Monorepo and changing the overall code structure much quicker than moving code between repositories. By updating the dependencies on the same repository it is easier to avoid version conflicts between libraries.

    But why use Nx, and not just create a simple angular or react workspace? What sets Nx apart is the very large toolset that it brings to the table, helping you across all the facets of building your Monorepo.

    Here are some of the useful features of Nx : Cached and Custom Operations — Nx will allow you to define and cache operations avoiding the same code being built multiple times. When making changes to a library, you can automatically execute operations like building, testing, linting… on affected projects, greatly reducing build times or pipeline executions.

    Cross framework components — Another great feature coming with Nx is the possibility to build micro Front-ends and share the same component across React and Angular applications. You will code your component logic once, and use it as is in your project. Additionally, all projects and libraries will be created with testing tools like Cypress, Storybook, and Jest. Easy to manage dependencies — Nx also extends some eslint rules to allow you to carefully decouple and isolate your library and dependencies.

    To have a quick glimpse of your project structure, you can generate a dependencies graph of the workspace. A Configurable CLI — Nx comes with a robust CLI that can be configured to work with different tools and even different languages providing commands to operate and manage all the chunks of your codebase.

    Metadata-driven — Everything in Nx comes with metadata to enable tool-ability. The default values, validations, auto-completion, and other settings are all defined in a schema, instead of in code. You can also use the Nx Editor Plugin and change his configuration with those files.

    Since the application requires connection to multiple WMS with different guidelines and requirements, we decided to make the logic decoupled as much as possible. This would also come in handy since our app consists of a variety of user types with different permissions and functionality.

    In previous projects I worked on, the basic approach to handle such cases was to create an Angular directive hiding or showing some UI elements, with conditions in code for calling or not some API. But such an approach makes scalability very difficult.

    The more User Roles added, the more conditions and logic were added to the FE making it hard to maintain and test the multiple cases. Thelerna create doctorcommand will guide us through the creation of a new package. The name of the package is important. The result should be: As we are using TypeScript for all packages, we will have one common tsconfig.

    [Tech Blog] Introduction to NX and Monorepos

    Our tsconfig. We also need to register tsc script in each individual package. The result should be: We added simple logic in each. We can test our setup by running: lerna run tsc The command above will run the tsc script in all created packages: If all goes well, we will compile TypeScript files from the src folder into lib folder in each package.

    If we take a look at package. GIT We will create a Github repository for this project and push all of the code there. Publishing Our goal is to publish all packages under the same NPM scope organization.


    thoughts on “Nestjs react monorepo

    1. I can look for the reference to a site with the information on a theme interesting you.

    2. Just that is necessary. An interesting theme, I will participate. I know, that together we can come to a right answer.

    Leave a Reply

    Your email address will not be published. Required fields are marked *