Startup
1 month

Monorepo Application Structure with Nx

Diagram of the monorepo application structure

Services

Front-End Development
Back-End Development
Web App Development

Tech Stack

Cypress
Angular
TypeScript
Docker
NodeJS
Express
JavaScript
Nx
GitHub Actions

Team

2
Developers
1
Tech Leader

Challenge

This was an internal project. The client was Unvoid itself.

Our challenge was on two fronts:

  1. We had many repositories per project, and splitting the project into multiple parts introduced unnecessary complexity for onboarding and maintenance;
  2. We had functionalities in a repository that could be applied in another repository for the same project, but we didn't have a good way to share code besides copy and pasting.

The goal was to explore modern codebase structures that would improve our Developer Experience (DX) and, of course, our productivity.

Also, the new codebase structure would have to seamlessly integrate with our tech stack, which is mainly Angular, TypeScript, Cypress, NodeJS, Express, GitHub Actions, and Docker.

Solutions

To address these challenges, the project team proposed to implement a monorepo application structure with Nx.

This structure allows developers to manage multiple applications, libraries, and shared code in a single repository. Nx is a set of tools and libraries that helps in building scalable and maintainable applications.

The first step was to create a new repository using Nx. We then migrated all the existing applications and libraries to this new repository. This helped reduce code duplication and made it easier to manage dependencies.

We also created a set of reusable libraries that could be shared across all the applications. These libraries included common functionalities such as authentication, logging, and error handling. This reduced the development time and ensured consistency across all the applications.

We used Nx to manage the build and deployment process. Nx provides a set of commands to build and test the applications and libraries. It also integrates with popular CI/CD tools such as Jenkins, Travis CI, and GitHub Actions.

Key results

1

Overall faster development and deployment of applications.

2

Reduced risk of errors with project-wide shared code.

3

Transparent integration with our tech stack.

4

Faster CI runs with Nx cache optimizations.

5

Streamlined build and deployment process.

6

Reduced effort for application maintenance and deployment.

7

Efficient, cost-effective, and highly scalable codebase structure.

···

Want to know what we can do for your project?

Book a call

More case studies

Screenshot of the package.json file with Angular dependencies on version 15
Startup
Codebase Upgrade: 26 Technologies Upgraded in 2 Months

Data analytics startup had a tech debt in their frontend dependencies and needed help to bring the application to the latest versions.

Read case study
Diagram of the server-side rendering with internationalization
Startup
Multi Language Web Learning Platform Optimized for SEO

Lucas Paganini is expert in Angular development and teaches about Angular and software development through videos and articles. He wanted a personal website.

Read case study
See all cases
© 2024 UNVOID. All Rights Reserved.