Wie man ein Monorepo erstellt

February 3, 2025

Wie man ein Monorepo erstellt image

Skalierbare Architekturen mit Monorepos

Die effiziente Verwaltung moderner Softwareprojekte erfordert eine Struktur, die mit den Anforderungen wächst und gleichzeitig die Komplexität reduziert. Ein Monorepo ermöglicht es, mehrere Applikationen innerhalb einer einzigen Codebasis zu verwalten. Dies optimiert die Zusammenarbeit und reduziert Redundanz, indem Logik über verschiedene Plattformen hinweg geteilt wird. Anstatt isolierte Silos zu pflegen, schaffen wir ein zentralisiertes System, das die Konsistenz zwischen Web und Mobile sicherstellt. Wir betrachten im Folgenden TurboRepo als Werkzeug, um diese Effizienz durch intelligentes Caching und optimierte Workflows in die Praxis umzusetzen.

Warum ein Monorepo verwenden?

Monorepos bieten große Vorteile, insbesondere da immer mehr Unternehmen und Kunden plattformübergreifende Anwendungen für Web und Mobilgeräte suchen. In vielen Fällen wird die Dokumentation an einem anderen Ort als die normale Webseite gehandhabt. Dies verbessert die Suchmaschinenoptimierung (SEO) und sorgt für eine klare, logische Trennung der Belange.

Auch wenn Sie in einem Entwicklungsteam arbeiten, kann dies den CI/CD-Prozess erleichtern oder Vorteile beim Erstellen von Frontend und Backend in einem Repository bringen, indem dieselben Versionen für jede Veröffentlichung geteilt werden.

Folgende Vorteile ergeben sich also:

  • Geteilter Code & Abhängigkeiten – Komponenten und Hilfsprogramme können einfach über mehrere Apps hinweg wiederverwendet werden.
  • Einheitliche Tools – Standardisierung von Styling, Linting, Formatierung und Tests über alle Projekte hinweg.
  • Schnellere Entwicklung – Beschleunigung von Builds und Verbesserung der Entwicklererfahrung durch optimiertes Caching.

Beachten Sie immer, dass das Erstellen eines Monorepos Ihr Projekt komplexer macht. Sie benötigen mehr Zeit für die Konfiguration und das Setup. Stellen Sie sich diese drei Fragen, bevor Sie mit dem Bau beginnen:

Wichtige Fragen:

  • Fügt das Monorepo meinem Projekt einen geschäftlichen Mehrwert hinzu?
  • Muss ich Code zwischen verschiedenen Anwendungen teilen?
  • Fügt die Implementierung des Monorepos meiner Anwendung Geschwindigkeit und eine einfache Integration hinzu?

Wenn Sie alle diese Fragen mit Ja beantworten können, sollten Sie ein Monorepo erstellen.

Für mich besteht der Anwendungsfall von Monorepos darin, eine React Native-App für das Web zu erstellen und die Komponenten auch im Web zu transpilieren. Wenn Sie React Native und eine Styling-Bibliothek verwenden, die beide Plattformen unterstützt, wie zum Beispiel Tamagui, würde ich dringend empfehlen, es zumindest auszuprobieren.

In Zukunft werden wir sehen, wie sich der gesamte React-Bereich mit Technologien entwickelt, die an der Grenze zum Benutzer arbeiten, d.h. überall in der digitalen Umgebung des Benutzers verfügbar sind. Dies bringt eine Menge Komplexität in den Bereich der Webentwicklung, da der Benutzer bequemer wird und Apps mit weniger nativer Unterstützung aussortiert. Da die Entwicklung mit beiden Plattformen einfacher wird, sollten Sie in Erwägung ziehen, beide Welten zu nutzen und sich mit der Zukunft vertraut zu machen.

Dies fällt jedoch auch unter den Aspekt des geschäftlichen Mehrwerts. Erhält Ihr Benutzer einen Mehrwert, wenn er die App auf beiden Plattformen verwendet? Dies wird die Schlüsselfrage sein, die sich Webentwickler in Zukunft stellen müssen.

Erste Schritte mit TurboRepo

Jetzt möchte ich einen genaueren Blick auf TurboRepo werfen. TurboRepo ist ein Build-System für JavaScript- und TypeScript-Monorepos. Befolgen Sie diese Schritte, um Ihr eigenes einzurichten:

1️⃣ TurboRepo installieren

Stellen Sie zunächst sicher, dass Node.js installiert ist. Erstellen Sie dann über Ihre CLI ein neues Monorepo:

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

2️⃣ Ihre Apps & Pakete hinzufügen

Jetzt passiert die Magie. Die Gesamtstruktur des Monorepos ist, dass Sie in „packages" Ihre eigenen Pakete lokalisieren und in die Apps Ihres „apps"-Ordners importieren können.

In der Standardkonfiguration gibt es eine Docs-App und eine Web-App als Beispiele. Sie können die Frameworks, die Sie verwenden möchten, selbst konfigurieren. Als Beispiel werde ich hier eine Web- und eine API-Anwendung erstellen. Erstellen Sie in Ihrem Ordner apps/ mehrere Projekte, die Ihre Anwendungen sein werden:

mkdir apps/web apps/api

Initialisieren Sie dann jedes Projekt:

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

Fügen Sie danach die fehlenden Pakete hinzu, die Sie für Ihre eigene Anwendung benötigen. Der größte Vorteil von Monorepos ist die Möglichkeit, Code zu teilen. Dies geschieht im packages-Teil. Diese Pakete werden automatisch erstellt und zeigen Ihnen die Möglichkeiten, was Sie tun können:

  • packages/ui → Für Ihre UI-Komponenten
  • packages/eslint-config → Zum Linting des gesamten Repositorys
  • packages/typescript-config → Für TypeScript-Konfiguration

3️⃣ TurboRepo konfigurieren

Jetzt können Sie verschiedene Pipelines erstellen, die als Skripte ausgeführt werden. Dies hängt stark von Ihrer Projektstruktur und Ihren Einstellungen ab. Ändern Sie die Datei turbo.json, um Ihre Monorepo-Struktur zu definieren:

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

4️⃣ Turbo-Befehle ausführen

Sie können Ihre Apps jetzt effizient erstellen und testen:

turbo run build
turbo run lint

Dies war nur ein kleines Beispiel für die Erstellung eines TurboRepos. Sie bieten auch viele Vorlagen an, die Sie mit Ihren Lieblingstools verwenden können. Um weitere Details zur Konfiguration und Maximierung der Erfahrung zu erfahren, lesen Sie die TurboRepo-Dokumentation. Haben Sie Interesse an meiner spezifischen Vorlage mit Next.js, Expo und Supabase? Geben Sie mir einfach Bescheid!

Letzte Gedanken

Monorepos vereinfachen die Projektverwaltung, verbessern die Effizienz und reduzieren redundanten Code. TurboRepo macht die Handhabung von Monorepos mit seinen Caching- und Aufgabenoptimierungsfunktionen für den React-Bereich noch reibungsloser.

Wie ich klargestellt habe, ist der geschäftliche Mehrwert der wichtigste Teil bei der Verwendung von Technologien, also stellen Sie immer die Fragen aus Kapitel 2.

In zukünftigen Beiträgen werde ich tiefer in Monorepo-Strategien, CI/CD-Integration und Best Practices eintauchen, also bleiben Sie dran und stellen Sie Fragen, wenn Sie welche haben! 🚀

Haben Sie Fragen? Hinterlassen Sie einen Kommentar oder melden Sie sich. Viel Spaß beim Programmieren!

Mit KI übersetzt