Angular project with monorepo architecture using Nx workspace

What is Monorepo architecture?

• Monorepo architecture, short for “monolithic repository architecture,” is an approach to software development where multiple projects are stored in single repository.
• Storing all the code in one place making it easier to share and manage the code across project.

Advantages of monorepo architecture?

• Code reusability: We can easily share code between projects and maintain consistent code across the organisation and also it will reduce code duplication.
• Easy build and deployments: All the code is stored in one repository so that we can reduce the complexity of build and deployment process.
• Easy refactoring: Its easier to refactor code across the project because all the code is stored in one place.

Challanges of monorepo architecture?

• Increased complexity: Maintain all the code at one place increase complexity when projects source code grows.
• Code conflicts: When multiple developers are working on the same code base some times will get code conflicts, it can be challanging to resolve conflicts.

When and where monorepo architecture can be used?

• Large Organisations: Monorepos can be particularly useful for large organizations that have many teams working on different projects. By storing all code in one place, it’s easier for developers to share code and collaborate across teams.
• Shared Code: If your organization has a lot of shared code between projects, a monorepo can be a good choice. Instead of duplicating code across multiple repositories, you can store all the shared code in one place, making it easier to maintain and update.
• Consistent code: If you need to maintain consistency across multiple projects, a monorepo can help. By storing all code in one place, it’s easier to enforce coding standards and ensure that all projects are using the same libraries and frameworks.
• Rapid development: If your organization needs to move quickly and iterate on code frequently, a monorepo can be a good choice. By storing all code in one place, it’s easier to make changes across multiple projects at once.

Demo

Eg: Let us take use case like one organisation need two different front-end applications 1. user portal 2. admin portal, Both apps have some common features authentication and some other modules.

In this scenario we can use monorepo architcture and the advantages are:

• We can use one repository for both user and admin portal
• Share common code modules like authentication etc..
• We can generate build and deploy code easily using CI/CD process
• Reduce code duplication and reuse code efficiently
• We can share assets etc.

Lets start…

1. Create nx workspace and project.

2. Open project in VS code and install dev dependency angular

3. Create apps admin portal and user portal using nx console

4. Configure apps run commands in package.json file

5. Run admin portal and user portal code in terminal using below commands.

npm run angular-admin-portal
npm run angular-user-portal

6. Admin portal is running http://localhost:4200

7. User portal is running http://localhost:4201

8. Now Authentication is common for both apps, so create auth library and share code to both apps.

9. Created sample authentication functionality using ngRx state management.

10. We need to import auth module library in admin portal app so that we can use authentication in admin portal.

11. Also import auth module library in user portal.

12. Now you can see admin portal Login:

13. User portal login:

In above we are using same auth library in both apps, if you want to do any modifications in authentication you can simply do it in auth library it will automatically reflect in both apps.

In conclusion, Monorepo architecture gives more flexibility to build multiple apps in single repository.

Source code :

GitHub - rambabupadimi/angular-mono-repo

Thanks for reading :)