How to create a Monorepo

Scalable architectures with monorepos

Efficiently managing modern software projects requires a structure that grows with requirements while reducing complexity. A monorepo makes it possible to manage multiple applications within a single code base. This optimizes collaboration and reduces redundancy by sharing logic across different platforms. Instead of maintaining isolated silos, we create a centralized system that ensures consistency between web and mobile. In the following, we consider TurboRepo as a tool to put this efficiency into practice through intelligent caching and optimized workflows.

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:

npx create-turbo@latest my-monorepo
cd my-monorepo

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:

mkdir apps/web apps/api

Then, initialize each project:

cd apps/web && npm init -y
cd ../api && npm init -y

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:

- packages/ui -> For your UI components
- packages/eslint-config -> For linting the whole repository
- packages/typescript-config

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:

turbo run build
turbo run lint

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!