How to create a Monorepo

Meet the Mono Monkeys – Masters of Efficiency! 🐒

Just like how a troop of mono monkeys work together seamlessly, gathering resources, sharing tasks, and creating a well-organized system, monorepos do the same for developers. In the world of coding, a monorepo is like a monkey's tree - everything you need is in one place.

A monorepo lets you manage multiple apps within a single codebase, streamlining collaboration, reducing duplication, and fostering efficiency, just like how monkeys work in groups for the common good. It’s all about simplifying the process, making the development journey as smooth as swinging through the trees.

Let’s dive into the world of monorepos and have a closer look at TurboRepo, where organization meets efficiency, just like the swift and clever mono monkeys!

Why Use a Monorepo?

Monorepos offer great advantages, especially as more companies and clients seek cross-platform applications for web and mobile In a lot of cases the documentation is handled in another place then the normal webside. This improves SEO and maintains a clear logical separation of concerns

Also if you work in a development team it can be ease the process of CI/CD or bring advantages building frontend and backend in one repository sharing the same versions for each release.

So there are following advantages:

• Shared Code & Dependencies – Easily reuse components and utilities across multiple apps.
• Consistent Tooling – Standardize styling, linting, formatting, and testing across projects.
• Faster Development – Speeding up builds and improve developer experience with optimized caching.

Always consider that creating a monorepo adds more complexity to your project. You need more time for configuration and the setup. Ask yourself these three questions bevfore starting to build:

• Does the monorepo add business value to my project?
• Do I need to share code between different applications?
• Does the implementation of the monorepo add speed and ease of integration to my application?

If you can answer all these questions with yes you should build a monorepo.

For me the use case is of monorepos is to create a react-native app in web and also transplie the components in web. If you are using react-native and a styling libary that supports both platforms like tamagui, I would highly recommend to at least give it a try.

In future we will see the whole react space envolve with technologies that work on the edge of the User, meaning being available everywhere in the users digital environment. This brings a lot of complexity to the web developement space since the user becomes more comfortable and sorts app with less native support out. Since the developement with both platforms gets more easy you should consider using both worlds and get familiar with the future.

But this also falls into the aspect of the business value add. Does your user receive value if he uses the app on both platforms? This will be the key questions Web Devs need to ask in future.

Getting Started with TurboRepo

Now I want to have a closer look at TurboRepo. TurboRepo is a build system for JavaScript and TypeScript monorepos. Follow these steps to set up your own:

1️⃣ Install TurboRepo

First, make sure you have Node.js installed. Then, create a new monorepo through your CLI:

2️⃣ Add Your Apps & Packages

Now the magic happens. The overall structure of the monorepo is that in &quotpackages&quot you can locate your own packages and import them into the apps of your &quotapps&quot folder.

In the standard configuration there is a docs app and a web app as examples. Feel free to configure the frameworks you want to use on your own. As an example I will create a web and a api application here. Inside your apps/ folder, you can create multiple projects, which will be your applications:

Then, initialize each project:

Afterwards add the missing packages you need for your own application. The biggest advantage of monorepos is to share code. This is done in the packages part. This packages get automatically created and show you the possibilities in what you can do:

3️⃣ Configure TurboRepo

Now you can create different pipelines that are run as scripts. This highly depends on your project structure and settings. Modify the turbo.json file to define your monorepo structure:

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "lint": {},
    "test": {}
  }
}

4️⃣ Run Turbo Commands

You can now build and test your apps efficiently:

This was just a small example of creating a TurboRepo. They also provide a lot of templates you can use with your favorite tools. To see more details on how to configure and maximize the experience, check their TurboRepo documentation. Are your interested in my specific template with next.js, expo and supabase. Just give me a hint!

Final Thoughts

Monorepos simplify project management, improve efficiency, and reduce redundant code. TurboRepo makes handling monorepos even smoother with its caching and task optimization features for the react space.

As I made clear for the the business value add is the most important part in using technologies so always ask the questions of chapter 2.

I'll be diving deeper into monorepo strategies, CI/CD integration, and best practices in future posts—so stay tuned and ask questions if you have any! 🚀

Got questions? Drop a comment or reach out. Happy coding!