Understanding Monorepos and implementing it.
Tags: lerna, nx, git, monorepo
Published: 2022-07-08 09:14:32

---
title: Understanding Monorepos and implementing it.
published: true
date: 2022-04-22 05:56:04 UTC
tags: lerna,nx,git,monorepo
canonical_url: https://enappd.com/blog/understanding-monorepos/190/
---

![](https://cdn-images-1.medium.com/max/1024/1*npNptLEbsf7nU6K7MYCY6Q.png)

In this tutorial, we will understand **what Monorepos are?** and **how to make a monorepo**. We are not going to discuss various monorepo management software in this blog, and just leave this blog as an introduction to the term.

Now you must be wondering **_what is this mono repo?_**  **_why this is used?_**  **_How this can be helpful in development and deployment?_** We will cover each and every query related to monorepo.

> When we say ‘repo’ we are considering a repository of code. Like a GitHub repo

### What is Monorepos?

**_Monorepos_** are the combined repository of different entities of the project/company. You must be familiar with multi repos (i.e. Single Repos for each entity of the project), these combined multi repos under a single repo can be called monorepo.

Monorepos are sometimes hard to handle but due to a single point of dependencies these mono repo help to contribute more to the projects and generate common codes.

### Why Monorepos should be used?

If you have any project containing an Android app, iOS app, and dashboard then managing all of them together will be difficult. All these entities will have different repos, will have their separate dependencies, and will be deployed separately. So to manage such cases properly, monorepos are introduced. All of the project entities are under a single repository. Maintaining single repo have the following advantage:-

1. **Single Source of Code:-** As different components of projects are under a single repository. So mono repo is the single source of code — which can be shared among the collaborators easily.
2. **Consistency:-** Monorepos maintains the code quality standards. Quality of complete repo is maintained as developers can get ideas of coding standards from another subproject. Also common config files for _Linting_ and other clean code mechanisms.
3. **Easier management of dependencies:-** All modules required by the different sub-projects are maintained under a single repo, we can reuse the same library in many projects. Also updating the dependency in each project can be easier.
4. **Single Contribution:-** All developer contributes under a single repository and it would help the developer to contribute more.
5. **Identical Coding/Directory style:-** This helps to achieve good code quality. Coding style can be identified as a developer can access other projects also.
6. **Improve cross-team collaboration:-** Here In this several developers can contribute to different projects. Developers can fix bugs for each other as the code base is the same for all.

The above points lead to good collaboration and code can be easily shared, so monorepos have the advantage in some cases. Many of the Big Tech Giants have the mono repos like Google, Microsoft, and many others.

### When Monorepos should not be used?

Sometimes monorepo is like a blessing but sometimes it is a curse 😂 . In some cases handling monorepos becomes complex as the repository size becomes larger, then it's hard to manage.

1. **Affected Master Branch:-** If in case the master branch breaks, then it's hard to manage the project. It can destroy the project and lead to a state where we have to go for some alternative.
2. **Hard to Understand CodeBase:-** It's sometimes hard to understand the code base for new developers, as all the projects are under a single repository.
3. **A larger amount of data:-** Adding all the projects under a single repository will tremendously increase the size of the repo. This may affect the processing speed, build times and also affects the cost of storage.
4. **Code Reviewing:-** Large number of pull requests and code reviews generated by each project could affect other project developers.
5. **Exposure of Code:-** Monorepos contains all the projects under a single repository. If two teams are working on different projects (Under the same repo) and want to hide their code — they can’t. This could not be achieved in monorepos.

### How to Create Monorepos?

To implement monorepos, we simply have to move the different project repos under one project folder. In this tutorial, we will take two different projects like 1) React-Native and 2) Ionic Project. Here you can have multiple projects with different languages/technologies. The project structure will look like below: -

![](https://cdn-images-1.medium.com/max/959/1*9mHRO82aIzz0JsoV1INBEg.png)

These two projects further have their own project structure. like the first project is **IONIC** Framework project and the second is React-Native Project. Let's consider both are part of the single Business Project.

Now to add this monorepo to _Github_, we need to run some git commands. But you must have _Git_ installed in your system. (if already installed it's Great, if not go to [_Git Downloads_](https://git-scm.com/downloads)). Now run the below command to initialize the _Git_ in your local project.

```
$ git init
```

Now to add this monorepo to Github, we need to create the repository in [_Github.com_](https://github.com/). Once you have created the repository, you can run the below command.

```
$ git add .
$ git commit -m "Monorepo commit"
$ git remote add origin <your_repo_url>
$ git push origin master
```

Now you will see that your monorepo contains both of your projects. Developers can contribute to any of the projects and can keep the Coding style the same for a complete Business project.

### Is that all?

No, monorepos concepts are evolving and many software are coming for managing the monorepos. [Lerna](https://lerna.js.org/) and [Nx](https://nx.dev/) are very popular these days. This kind of software manage monorepos in many ways :

- You can explore the code structure properly
- You can only build/test from what is affected in code
- You can manage dependency management

We will learn about these in upcoming blogs, this blog just serves as an introduction to the monorepos trend.

### Conclusion

Now you know enough about monorepos. You can decide if you want to use the monorepos for your Project implementation or not. According to me if your project needs many similar codebases which can have similar dependencies, then you must try the monorepos. They are easy to maintain and improve the developers' contribution.

### Next Steps

If you liked this blog, you will also find the following blogs interesting and helpful. Feel free to ask any questions in the comment section

#### Ionic Capacitor

- **Basic**  — [Geolocation](https://enappd.com/blog/use-geolocation-geocoding-and-reverse-geocoding-in-ionic-capacitor/131) | [Barcode & QR code](https://enappd.com/blog/qr-code-and-barcode-scanning-with-ionic-capacitor/127) | [Facebook Login](https://enappd.com/blog/facebook-login-in-capacitor-apps-with-ionic-angular/128) (Angular) | [Facebook Login (React)](https://enappd.com/blog/facebook-login-in-ionic-react-capacitor-apps/118) | [Icon and Splash](https://enappd.com/blog/icon-splash-in-ionic-react-capacitor-apps/114) | [Camera & Photo Gallery](https://enappd.com/blog/camera-and-gallery-in-ionic-react-app-using-capacitor/110)
- **Advanced**  — [AdMob](https://enappd.com/blog/implement-admob-in-ionic-react-capacitor-apps/135) | [Local Notifications](https://enappd.com/blog/local-notifications-in-ionic-5-capacitor/132) | [Google Login](https://enappd.com/blog/google-login-in-ionic-react-capacitor-apps/122) | [Twitter Login](https://enappd.com/blog/twitter-login-in-ionic-react-capacitor-app/121) | [Games using Phaser](https://enappd.com/blog/html5-games-in-ionic-capacitor-using-phaser/115) | [Play music](https://enappd.com/blog/play-music-in-ionic-capacitor-apps/112) | [Push Notifications](https://enappd.com/blog/firebase-push-notification-in-ionic-react-capacitor/111)

#### Ionic Cordova

- [Taxi Booking App example with Ionic, Node, Express and MySQL](https://enappd.com/blog/ionic-app-with-nodejs-express-mysql-sequelize-taxi-app/160)
- Ionic Payment Gateways — [Stripe with Firebase](https://enappd.com/blog/integrate-stripe-payment-gateway-in-ionic-5-apps-and-pwa-using-firebase/158) | [Stripe with NodeJS](https://enappd.com/blog/ionic-5-stripe-payment-integration-firebase-cloud-functions-vs-node-express-based-server/159) | [PayPal](https://enappd.com/blog/paypal-integration-in-ionic-apps-and-pwa/142) | [Apple Pay](https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21) | [RazorPay](https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20)
- Ionic Charts with — [Google Charts](https://enappd.com/blog/ionic-4-charts-using-google-charts/66)| [HighCharts](https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60) | [d3.js](https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54) | [Chart.js](https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52)
- Ionic Authentications — [Via Email](https://enappd.com/blog/firebase-email-authentication-in-ionic-apps/153) | [Anonymous](https://enappd.com/blog/implement-anonymous-login-in-ionic-apps-with-firebase/154) | [Facebook](https://enappd.com/blog/facebook-login-in-ionic-apps-using-firebase/150) | [Google](https://enappd.com/blog/implement-google-login-in-ionic-apps-using-firebase/147) | [Twitter](https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24)
- Ionic Features — [Geolocation](https://enappd.com/blog/ionic-5-complete-guide-on-geolocation/141)| [QR Code reader](https://enappd.com/blog/ionic-complete-guide-barcode-qrcode-scan/140) | [Pedometer](https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15)| [Signature](https://enappd.com/blog/implement-signature-pad-in-ionic-apps/145) Pad | [Background Geolocation](https://enappd.com/blog/using-background-geolocation-in-ionic-angular-apps/165)
- Media in Ionic — [Audio](https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48) | [Video](https://enappd.com/blog/adding-video-player-in-ionic-4-app/64) | [Image Picker](https://enappd.com/blog/camera-and-image-picker-in-ionic-apps/148) | [Image Cropper](https://enappd.com/blog/how-to-add-image-cropper-in-ionic-apps/149)
- Ionic Essentials — [Native Storage](https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59) | [Translations](https://enappd.com/blog/how-to-translate-in-ionic-internationalization-and-localization/143) | [RTL](https://enappd.com/blog/how-to-use-rtl-right-to-left-in-ionic-apps-pwa/152) | [Sentry Error Monitoring](https://enappd.com/blog/using-sentry-error-monitoring-with-ionic-angular-applications/164)
- Ionic messaging — [Firebase Push](https://enappd.com/blog/how-to-implement-firebase-push-notifications-in-ionic-apps/157) | [Reading SMS](https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42) | [Local Notifications](https://enappd.com/blog/local-notifications-in-ionic-5-capacitor/132)
- Ionic with Firebase — [Basics](https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23) | [Hosting and DB](https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58) | [Cloud functions](https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32) | [Deploy App to Firebase](https://enappd.com/blog/github-actions-deploying-ionic-angular-app-to-firebase-hosting/146) | [Firebase simulator](https://enappd.com/blog/how-to-use-firebase-emulators-with-ionic-angular-applications/163)
- Unit Testing in Ionic — [Part 1](https://enappd.com/blog/beginners-guide-to-ionic-angular-unit-testing-part-1/151) | [Mocks & Spies](https://enappd.com/blog/beginners-guide-to-ionic-angular-unit-testing-part-2-mocks-and-spies/155)| [Async Testing](https://enappd.com/blog/beginners-guide-to-ionic-angular-unit-testing-async-testing/156)

### Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using [Ionic 5 React Full App in Capacitor](https://store.enappd.com/product/ionic-react-full-app-capacitor/)

![Ionic 5 React Full App in Capacitor from Enappd](https://cdn-images-1.medium.com/max/760/1*G3yOFVX4oABx9MhUy-3kng.png)

### Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular **Capacitor app** , you can make your next awesome app using [Capacitor Full App](https://store.enappd.com/product/capacitor-full-app-with-ionic-angular/)

![Capacitor Full App with huge number of layouts and features](https://cdn-images-1.medium.com/max/736/0*UwSHcofTMStMnzAX.png)

### Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using [Ionic 5 Full App](https://store.enappd.com/product/ionic-full-app)

![Ionic Full App with huge number of layouts and features](https://cdn-images-1.medium.com/max/700/0*1ArpKyhiDHZnevwB.jpeg)

* * *