Write Once, Run Anywhere: The Amazing Benefits of Monorepos
Write Once, Run Anywhere: The Amazing Benefits of Monorepos
In the ever-evolving realm of software development, monorepos, or monolithic repositories, have risen as a game-changing solution for managing diverse projects within a unified version control system. Distinct from conventional polyrepos (multiple repositories) and monoliths (single, large repositories), monorepos present a unique set of advantages and challenges that profoundly influence development workflows.
TechloSet Solutions specializes in developing and maintaining monorepos for web and mobile applications. Our team of experts can help you leverage the power of monorepos to streamline your development process and enhance code quality. Learn more about our services and contact us today to get started.
What is a Monorepo?
A monorepo stands as a centralized version control repository that consolidates multiple projects or applications within a single directory. Unlike polyrepos, which involve managing separate repositories, and monoliths, which house all code in a single repository, monorepos strike a balance between organization and code sharing.
Advantages of Monorepos
At the forefront of monorepo advantages is the seamless sharing and reuse of code across different projects. This promotes consistency, accelerates development cycles, and ensures that updates to shared components propagate effortlessly throughout the entire codebase.
Monorepos simplify dependency tracking, ensuring consistent versions across projects. Centralized dependency management minimizes version conflicts, providing a stable foundation for applications.
Monorepos facilitate comprehensive testing across multiple projects within a unified environment. This holistic testing approach helps identify and address potential issues early in the development process, enhancing overall code quality and reliability.
Streamlining integration and deployment processes is a key benefit of monorepos. With all projects housed in a single repository, automated workflows, such as those provided by GitHub Actions, can be applied uniformly across the entire codebase.
Challenges of Monorepos
Managing a growing codebase within a monorepo can become challenging. Ensuring scalability requires careful consideration of tools and strategies to maintain organization and performance.
Large codebases may experience slower build and test times. Optimizing performance becomes crucial to maintaining developer productivity and efficient CI/CD pipelines.
Specialized tools are necessary to manage the complexity of a monorepo effectively. A well-thought-out tooling strategy is essential for mitigating challenges and enhancing development workflows.
Effective collaboration between development teams is crucial to avoid conflicts and ensure a smooth development experience. Coordinating efforts becomes increasingly important as the number of contributors grows.
The primary objective of this tutorial is to guide developers through the process of setting up and utilizing a monorepo for a web development project. The example project, implemented with React, Next.js, and GraphQL, serves as a practical illustration of the discussed concepts.
Monorepo Tools and Concepts
Common Tools and Concepts
Git: Ensures version control and collaboration by tracking changes and managing branches effectively.
Yarn: Manages dependencies consistently, providing a centralized solution for package installations.
Babel: Transpiles code to ensure compatibility across different packages, promoting a seamless development experience.
ESLint: Enforces coding standards and catches potential issues early in the development cycle, enhancing overall code quality.
Vercel: Provides automated publishing and deployment capabilities, streamlining the development process.
Solito: Enables code sharing across platforms, ensuring a consistent user experience.
Creating a Simple Monorepo
Setting Up and Using Tools
The tutorial below guides you all through the process of setting up a monorepo structure from initialization to phase. The example project is implemented with React, Next.js, React Native and Solito, and serves as a practical illustration of the discussed concepts.
It is kind of tiresome to create a monorepo from scratch. So, we will use a tool called Solito to initialize our monorepo. Solito is a CLI tool that helps you to create a monorepo with a single command. It also helps you to add new packages to your monorepo. To install Solito, run the following command in your terminal we also created a template for you to use, you can clone it and start the project.
git clone https://github.com/techloset/solito-monorepo-template
or install it via yarn
npx create-solito-app@latest -t with-expo-router
Building, Running, and Testing with Yarn
Utilize the capabilities of Yarn to facilitate the development process by independently building, running, and testing each package. This approach ensures a well-organized development workflow while maintaining the autonomy of individual packages.
1. Install Dependencies
2. Run Next.js Locally
For local development with Next.js, execute the following command:
This internally runs
3. Run Expo Locally
Navigate to the Expo package directory for local development:
Build the development client on your device or simulator using either of the following:
After building the development client, return to the root of the monorepo and run:
Publishing and Deployment
The final stages of the tutorial encompass the use of Vercel for automated publishing and deployment. These steps establish a systematic and reliable approach to managing changes and deploying applications within the monorepo.
Build Android App for Expo
Navigate to the Android directory within the Expo app and execute:
Deploy Web App with Vercel
Utilize Vercel for seamless web deployment with minimal configuration. To deploy the web app, follow these steps:
- Push your code to GitHub.
- Assuming you have a Vercel account, log in to Vercel dashboard, and click on
- Select your GitHub repository.
Next.jsas your framework.
- Leave the rest of the settings as default and click on
Deploy Web App with Firebase
Assuming you are in your root Next.js app directory, we can deploy our app to Firebase by following these steps:
- Create a Firebase project.
- Install Firebase CLI.
- Select your preferred Firebase project and settings.
- Do not forget to select firebase public directory as
- Add the following to your
"export": "next export"
run following to build and then export your Next.js app
yarn build && yarn export
it will create a
out directory in your
- Run the following command to deploy your app:
Voila! Your first Nextjs monorepo app is deployed.
These steps ensure a streamlined development and deployment process, enhancing the efficiency and reliability of your monorepo setup.
| |-- expo
| | |-- app
| | |-- (files for iOS and Android)
| |-- next
| |-- app
| |-- (files for Next.js app)
|-- (files shared across apps)
| |-- (feature-specific files)
|-- (provider files, including no-ops for Web)
You can add other folders inside of
packages/ if you know what you're doing and have a good reason to.
- Ensure that all projects within the monorepo use consistent tooling. This includes version control systems (e.g., Git), package managers (e.g., Yarn or npm), and coding standards. Consistency minimizes friction between projects and streamlines development workflows.
- Leverage the advantages of a monorepo by encouraging code reuse. Identify common functionalities or components that can be shared across projects, promoting modularity and reducing duplication of code.
- Use tools like Manypkg to validate dependencies across packages. Dependency validation helps catch issues early, ensuring that all packages within the monorepo use compatible versions of dependencies.
Versioning and Changesets:
- Implement a versioning strategy for packages within the monorepo. Tools like Changesets make it easier to manage version bumps and generate changelogs. Consistent versioning aids in tracking changes and maintaining compatibility.
- Consider incorporating TypeScript for enhanced type safety. Strong typing reduces the likelihood of runtime errors and provides better developer tooling, making it easier to understand and maintain the codebase.
- Implement automated testing for all projects within the monorepo. CI/CD pipelines should include comprehensive test suites to catch issues early in the development process. This ensures code reliability and facilitates continuous integration.
- Structure your monorepo in a modular fashion. Divide the codebase into logical packages or modules, each responsible for a specific functionality. This modular approach enhances maintainability and makes it easier for developers to understand and contribute to the codebase.
Continuous Integration and Deployment (CI/CD):
- Establish CI/CD pipelines to automate the build, test, and deployment processes. CI/CD ensures that changes are validated and deployed consistently, reducing manual intervention and the likelihood of deployment errors.
Monorepo Explained: A website providing an overview of monorepos, their usefulness, and the tools to build them. It compares features and advantages of different monorepo tools.
Monorepo - Wikipedia: An article offering a brief history and definition of monorepos, examples of companies and projects using them, and discussions on benefits and challenges.
Solito with Fernando Rojo: A podcast with Founder of Solito explaining how learning React Native produced the idea for Solito, how Solito lets you use the same code in a React website as a React Native website.
Monorepos offer a potent solution for managing multiple projects within a single repository. The example project, implemented with React, React Native, and Next.js, demonstrates the practical application of monorepo principles and tools. The tutorial guides developers through the process of setting up and utilizing a monorepo for a web development project, highlighting the advantages and challenges of this approach.