Frontend Academy · पाठ

Turborepo के साथ मोनोरेपो सेटअप

एक ही रिपॉज़िटरी में कई ऐप और साझा पैकेज व्यवस्थित करें, Turbo पाइपलाइन परिभाषित करें, और केवल बदली हुई चीज़ों को फिर से बनाने के लिए बिल्ड कैश करें।

पाठ 2, कुल 4 में से14 चरण

Turborepo के साथ मोनोरेपो सेटअप, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

मोनोरेपो क्या है

एक ऐसी Git रिपॉज़िटरी, जिसमें कई प्रोजेक्ट (ऐप और लाइब्रेरी) रहते हैं और वे कोड साझा करते हैं। उदाहरण: एक ही रिपॉज़िटरी में वेब ऐप + मोबाइल ऐप + साझा UI लाइब्रेरी + साझा उपयोगिताएँ। कोड साझा करना आसान, विभिन्न हिस्सों में एक साथ बदलाव करना सरल और एकल CI कार्य-प्रवाह।

Turborepo क्यों

Turborepo JavaScript मोनोरेपो के लिए उच्च-प्रदर्शन बिल्ड सिस्टम है। यह कार्यों के परिणामों को कैश करता है, पैकेज में समानांतर रूप से काम करता है और केवल बदले हुए हिस्सों को फिर से बनाता है। इसे Vercel ने बनाया है।

Turborepo सेट अप करना

आधिकारिक स्टार्टर का उपयोग करें।

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

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

वर्कस्पेस वाला package.json

रूट package.json workspaces घोषित करता है — npm/yarn/pnpm उन्हें इस तरह सिमलिंक करते हैं कि ऐप पैकेज को नाम से इम्पोर्ट कर सकें।

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json — कार्य-प्रवाह

कार्य (बिल्ड, लिंट, परीक्षण, डेवलपमेंट) और पैकेज के बीच उनकी निर्भरताएँ परिभाषित करें।

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

dependsOn की व्याख्या

^build का अर्थ है: इस पैकेज को बनाने से पहले, इसकी सभी वर्कस्पेस निर्भरताएँ बनाएँ। इसलिए यदि app/web, packages/ui पर निर्भर है, तो ui पहले बनेगा।

कार्य चलाना

पूरे मोनोरेपो में कोई कार्य चलाएँ। Turbo टोपोलॉजिकल क्रम में समानांतरता के साथ चलता है।

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

परिणामों को कैश करना

Turbo इनपुट (स्रोत फ़ाइलें + निर्भरताएँ + पर्यावरण) का हैश बनाकर परिणामों को कैश करता है। बिना बदलाव के दोबारा चलाने पर यह तुरंत पूरा होता है — Turbo दोबारा कार्य किए बिना कैश किया हुआ परिणाम फिर से प्रस्तुत करता है।

दूरस्थ कैशिंग

कैश को किसी दूरस्थ स्थान (Vercel Remote Cache, स्व-होस्टेड) पर भेजें, ताकि CI मशीनें और टीम के साथी उसे साझा कर सकें — पहला डेवलपर बिल्ड की लागत उठाता है, बाकी सभी को कैश हिट मिलता है।

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

--filter से फ़िल्टर करना

किसी कार्य को केवल मेल खाते पैकेज के लिए चलाएँ।

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

आंतरिक पैकेज

packages/ में मौजूद पैकेज एक-दूसरे को नाम से इम्पोर्ट करते हैं। उन्हें निर्भरताओं में "@repo/ui": "*" के रूप में संदर्भित करें (pnpm के साथ: workspace:*)।

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "*",
    "@repo/utils": "*"
  }
}

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

CI के सुझाव

CI में turbo run build --filter=...[origin/main] का उपयोग करके मुख्य शाखा के बाद से केवल बदले हुए हिस्सों को बनाएँ। दूरस्थ कैश के साथ, अपरिवर्तित पैकेज के बिल्ड कई मिनट से घटकर कुछ सेकंड के रह जाते हैं।

त्वरित जाँच

Turbo कार्य की dependsOn ऐरे में ^build प्रविष्टि का क्या अर्थ है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Turborepo

JavaScript मोनोरेपो सिस्टम: workspaces वाली apps/ + packages/ संरचना। turbo.json कार्य और dependsOn संबंध परिभाषित करता है। ^build = पहले निर्भरताएँ बनाएँ। हैश-आधारित स्थानीय कैश दोहराए जाने वाले काम को तुरंत पूरा करता है। दूरस्थ कैश टीम और CI के बीच कैश हिट साझा करता है। --filter उपसमूहों को लक्षित करता है। तेज़ PR CI के लिए बदलाव के बाद से फ़िल्टर करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Turborepo के साथ मोनोरेपो सेटअप” पाठ निःशुल्क है?

हाँ—“Turborepo के साथ मोनोरेपो सेटअप” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Turborepo के साथ मोनोरेपो सेटअप” में मैं क्या सीखूँगा?

एक ही रिपॉज़िटरी में कई ऐप और साझा पैकेज व्यवस्थित करें, Turbo पाइपलाइन परिभाषित करें, और केवल बदली हुई चीज़ों को फिर से बनाने के लिए बिल्ड कैश करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Turborepo के साथ मोनोरेपो सेटअप” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

एटॉमिक डिज़ाइन: एटम, मॉलिक्यूल, ऑर्गैनिज़्म
Turborepo के साथ मोनोरेपो सेटअप
माइक्रो-फ्रंटएंड: मॉड्यूल फ़ेडरेशन
फ़ीचर-आधारित फ़ोल्डर संरचना

← Frontend Academy पर वापस जाएँ