Project Setup With Mono Repo - Angular Architecture

Problem

 
While building an enterprise-level application, it is hard to manage:
  1. The building blocks of the application
  2. Maintaining the reusable components like custom libraries, and upgrading them over time
  3. Different sections, which can be considered as additional modules for the application which can be created as a sub-projects of the application, like blogs.application.com, about.application.com
I have personally felt that every enterprise-level application requires lots of reusable components (library) to be developed, and that can also be published over GitHub/NPM to the community (public or private repo, based on the use case or requirement) so that others also can use it.
 

Solution

 
Angular provides a way to set up one workspace with multiple projects and libraries sharing the same dependencies across all projects.
 
Benefits of using Mono Repo approach,
  1. No need to worry about handling multiple project dependencies.
  2. A feature-rich component can be created as a library and can be used by other modules.
  3. Additional projects also can be deployed separately
  4. The custom libraries are easy to maintain
  5. Upgrading from one version of angular to another.
Note
I am not talking about creating a shared component or merging feature related components, services, models in a module or creating a wrapper-components for the third party plugins. Those things can be handled at the application level.
 
In this article what I am covering is:
  1. Creating a workspace
  2. Adding a subproject
  3. Publishing the main project
  4. Publishing the subproject as standalone.
  5. Adding a library
  6. Removing subproject/library from workspace
Prerequisites
  1. Node Installed
  2. Angular CLI installed
Note
Angular CLI version, which I am using.
 
 
Let’s start,
 
Step 1 - Create an angular app
 
ng new angular-enterprise-app-setup
 
And run it [see the current stage of application on Github, here].
 
ng serve
 
Step 2
 
Now our workspace is ready.
 
Imagine, the company publishes articles about their product and they want a project to be developed to publish their articles (suppose blogs).
 
Let’s create a subproject called blog inside the workspace.
 
ng generate application blog
 
Note
You need to execute the above command inside your workspace
 
 
A new folder called projects has been added and inside it, a blog folder has been created which contains our blog project 
 
 
See the changeset
 
To run the blog application
 
ng serve --project blog
 
Note
  1. Adding a project to the same workspace updates the angular.json file [see the changeset]
  2. Project blog can be deployed as standalone and can be merged into the main application
  3. If you wish to run both the application at the same time, you can use --port in angular cli as

    ng serve --project=blog --port=4201
Step 3
 
ng build --prod
 
This will create an application folder inside the dist folder and can be deployed from there.
 
Step 4
 
Deploying subproject (blog) as standalone
 
ng build --project blog --prod
 
The will create a blog folder inside the dist folder and can be deployed from there.
 
Step 5
 
Let’s suppose we need a library that can help us view any kind of article.
 
This library can be used in the blog project, or it can be published as a package and consume by other projects within the organization or can be published as an open-source project over Github.
 
Adding a library to the workspace,
 
ng generate library article-viewer
 
 
See the changeset
 
Note
Adding the library project to an existing workspace, causes changes in angular.json, package-lock.json, and package.json.
 
Step 6

Removing application/library from an existing workspace.
 
As of now, there is no such feature available in Angular CLI.
 
But it can be performed manually.
 
https://github.com/nrwl/nx/issues/333
 
 
Please comment below, if you want me to develop the project even further with the below features,
  • Using article-library into the blog project
  • Merging blog project into the angular-enterprise-app-setup project
  • Hosting blog project as a standalone application on Heroku
  • Publishing article-library as a package using Github Package Registry over NPM


Similar Articles