# Monorepo Shared Package ব্যবহার ## 📚 Blog Series 🔗 [Part-01: Monorepo কী এবং কেন ব্যবহার করবেন](https://www.ismailjosim.com/blogs/monorepo) 🔗 [Part-02: Turborepo and pnpm Workspace](https://www.ismailjosim.com/blogs/turborepo-and-pnpm-workspace-setup-part-02) Monorepo শেখার সবচেয়ে practical moment হলো যখন আপনি একটি shared package তৈরি করেন এবং সেটা অন্য app থেকে import করেন। তখন বোঝা যায়, monorepo শুধু folder structure না; এটা real code sharing workflow। এই article-এ আমরা আপনার project ধরে দেখব `@repo/ui`, `@myapp/utils`, `apps/blog`, `apps/web`, এবং `apps/api` কীভাবে একসাথে কাজ করে। ## আগে Real Scenario ধরুন `apps/web` এবং `apps/blog` দুই জায়গাতেই একই button দরকার। সাধারণ approach হলে আপনি দুই app-এ আলাদা button বানাতেন। কিন্তু পরে button update করলে দুই জায়গায় change করতে হতো। Monorepo approach হলো button একবার `packages/ui`-তে রাখুন। তারপর web/blog app সেই shared package থেকে import করুক। এই flow-টাই: ```text packages/ui/Button ↓ apps/web apps/blog ``` একইভাবে utility function: ```text packages/utils ↓ apps/web apps/api apps/blog ``` ## Shared Package কী Shared package হলো monorepo-এর local package, যা অন্য workspace app dependency হিসেবে ব্যবহার করতে পারে। এটা npm package-এর মতো `package.json` metadata ব্যবহার করে, কিন্তু local workspace-এর ভেতরে থাকে। Public npm registry-তে publish করা বাধ্যতামূলক না। আপনার project-এ ভালো example: ```text packages/ui -> @repo/ui packages/utils -> @myapp/utils ``` `@repo/ui` থেকে component import করা যায়। `@myapp/utils` থেকে helper function import করা যায়। ## Package Name কেন Important Shared package-এর import name আসে package-এর `package.json` থেকে। আপনার `packages/utils/package.json`: ```json { "name": "@myapp/utils", "version": "1.0.0", "main": "./src/index.ts", "types": "./src/index.ts", "exports": { ".": { "import": "./src/index.ts", "require": "./src/index.ts", "default": "./src/index.ts" } } } ``` এখানে `"name": "@myapp/utils"` থাকার কারণে অন্য app থেকে import করা যায়: ```ts import { formatDate } from '@myapp/utils' ``` একটা nuance আছে। এই package এখন TypeScript source সরাসরি export করছে। আপনার app tooling যদি TypeScript source handle করতে পারে, তাহলে local workspace-এ এটা কাজ করবে। কিন্তু npm registry-তে publish করার মতো package বানাতে চাইলে সাধারণত আগে JavaScript build output এবং type declaration generate করা হয়। ## @repo/ui Blog App-এ কীভাবে ব্যবহার হচ্ছে আপনার `apps/blog/package.json`-এ আছে: ```json { "dependencies": { "@repo/ui": "workspace:*", "react": "^19.2.6", "react-dom": "^19.2.6" } } ``` `workspace:*` মানে pnpm local workspace থেকে matching package resolve করবে। Registry থেকে `@repo/ui` download করবে না। তারপর `apps/blog/src/App.tsx`: ```tsx import { Button } from '@repo/ui/button' const App = () => { return (

Welcome to the Blog

) } export default App ``` এখানে blog app নিজে Vite React app, কিন্তু button আসছে `packages/ui` থেকে। এই এক example-ই monorepo shared package বোঝার জন্য যথেষ্ট পরিষ্কার। ## New Shared Package Add করার Step ধরুন আপনি `utils` package add করছেন। Flow এমন: 1. `packages/utils` folder তৈরি করুন 2. `package.json`-এ package name দিন 3. `src/index.ts` থেকে function export করুন 4. যে app ব্যবহার করবে, তার dependency-তে add করুন 5. root থেকে `pnpm install` চালান 6. app থেকে import করে use করুন Example utility: ```ts export function formatDate(date: Date): string { return date.toLocaleDateString() } export function slugify(text: string): string { return text.toLowerCase().replace(/\s+/g, '-') } ``` App dependency: ```json { "dependencies": { "@myapp/utils": "workspace:*" } } ``` তারপর import: ```ts import { slugify } from '@myapp/utils' ``` নতুন package add করার পর `pnpm install` জরুরি, কারণ এতে lockfile এবং workspace links refresh হয়। ## node_modules এ Package দেখায় কেন নতুনদের একটা confusion হলো, package তো `packages/ui` folder-এ আছে, তাহলে app-এর `node_modules/@repo/ui`-তে কেন দেখা যাচ্ছে? কারণ pnpm local package-কে app dependency হিসেবে resolve করে। Source copy-paste না করে link/reference তৈরি করে। pnpm internally store, hard link, symlink ব্যবহার করে efficient dependency management করে। Beginner হিসেবে এতটুকু মনে রাখলেই হবে: ```text packages/ui = actual shared package apps/blog/node_modules/@repo/ui = app থেকে access করার reference ``` তাই shared package update করলে app সেই package import করতে পারে, যদি dependency এবং export path ঠিক থাকে। ## API App এর Role Monorepo শুধু frontend-এর জন্য না। আপনার `apps/api` হলো Express API server: ```json { "name": "@myapp/api", "scripts": { "dev": "ts-node-dev --respawn --transpile-only src/index.ts", "build": "tsc", "start": "node dist/index.js" } } ``` API source: ```ts app.get('/health', (req, res) => { res.status(200).json({ status: 'ok', timestamp: new Date().toISOString(), uptime: process.uptime(), memoryUsage: process.memoryUsage(), }) }) ``` এই API app চাইলে ভবিষ্যতে `@myapp/utils` ব্যবহার করতে পারে। যেমন date formatting, validation schema বা shared type দরকার হলে `packages/utils` বা নতুন `packages/types` package add করা যায়। ## Build করার আগে কী Check করবেন Monorepo-তে কাজ করার পর build চালানো ভালো: ```bash pnpm run build ``` এই command root script থেকে `turbo run build` চালায়। Turborepo যেসব workspace package/app-এ `build` script আছে সেগুলো run করে। Build করলে ধরা পড়তে পারে: - TypeScript error - wrong import path - missing workspace dependency - framework build issue - package export mismatch আপনার current `turbo.json`-এ `outputs` শুধু `.next/**` দেওয়া আছে। তাই Next.js app-এর cache scope পরিষ্কার। Vite blog বা Express API-এর `dist/**` cache করতে চাইলে `build.outputs`-এ `dist/**` add করা দরকার হতে পারে। ## Hydration Warning নিয়ে Note আপনার screenshot-এ Next.js hydration mismatch warning দেখা গেছে। এটা monorepo setup problem না। Server-rendered HTML এবং client-rendered HTML match না করলে এমন warning আসে। Common কারণ: - render-এর ভেতরে `Date.now()` - render-এর ভেতরে `Math.random()` - server/client condition mismatch - browser extension HTML modify করা - locale-based date formatting mismatch তাই hydration warning দেখলে monorepo ভাঙা ধরে নেওয়া যাবে না। Related component inspect করতে হবে। ## Deployment কীভাবে ভাববেন Monorepo deploy করার সময় পুরো repo একসাথে deploy করতেই হবে এমন না। আপনি app ধরে deploy করবেন। Example: | App | Possible deploy target | | --- | --- | | `apps/web` | Vercel | | `apps/docs` | Vercel | | `apps/blog` | static hosting/Vercel | | `apps/api` | Render/Railway/Fly.io | যদি app shared package ব্যবহার করে, তাহলে deploy platform যেন workspace install করতে পারে সেটা নিশ্চিত করতে হবে। Example command idea: ```text Project path: apps/api Build command: pnpm --filter @myapp/api build Start command: pnpm --filter @myapp/api start ``` Next.js app: ```text Project path: apps/web Build command: pnpm --filter web build ``` Platform অনুযায়ী exact setting differ করতে পারে। Vercel monorepo অনেক সময় auto-detect করে, Render-এ root/project path ও build command আলাদা করে set করতে হতে পারে। ## Practical Checklist Shared package কাজ না করলে এই checklist দেখুন: - package-এর `name` ঠিক আছে? - app-এর `dependencies`-তে `workspace:*` আছে? - root থেকে `pnpm install` চালানো হয়েছে? - package `exports` import path-এর সাথে match করছে? - TypeScript source import করলে app tooling সেটা handle করছে? - `pnpm run build` দিয়ে error check করা হয়েছে? ## Common Mistakes | Mistake | Fix | | --- | --- | | package বানিয়ে dependency add না করা | app package.json-এ `workspace:*` add করুন | | pnpm install না দেওয়া | root থেকে `pnpm install` দিন | | package name ভুল | `packages/*/package.json` name check করুন | | import path ভুল | `exports` field check করুন | | সব app run করে confusion | `--filter` ব্যবহার করুন | ## Image Plan Feature image: - File: `images/monorepo-shared-package-feature.png` - Alt text: `monorepo shared package used by multiple apps` - Description: shared package থেকে web/blog/api app-এ dependency flow। Content image 1: - File: `images/monorepo-ui-package-import.png` - Alt text: `monorepo ui package import in blog app` - Description: `@repo/ui/button` import করে `apps/blog`-এ ব্যবহার। Content image 2: - File: `images/monorepo-build-cache-output.png` - Alt text: `monorepo turborepo build cache output` - Description: build output-এ `cache hit` ও `cache miss` দেখানো। ## Internal Links Monorepo-এর basic idea বুঝতে পড়ুন [Monorepo কী এবং কেন ব্যবহার করবেন](./01-monorepo-ki-ebong-keno.md)। Workspace ও task runner বুঝতে পড়ুন [Turborepo ও pnpm Workspace Setup](./02-turborepo-pnpm-workspace-setup.md)। ## External References Vercel-এ monorepo deploy নিয়ে জানতে [Vercel monorepo documentation](https://vercel.com/docs/monorepos) দেখতে পারেন। Render-এ monorepo service deploy করতে [Render monorepo documentation](https://render.com/docs/monorepo-support) helpful। ## Conclusion Monorepo-এর আসল usefulness আসে shared package থেকে। `@repo/ui` থেকে Button import করা, `@myapp/utils` থেকে utility function নেওয়া, আর root থেকে build/dev চালানো - এগুলোই practical workflow। আপনার project-এ frontend app, backend API, shared UI, shared utils এবং shared config সব আছে। তাই এই codebase দিয়ে monorepo শেখা শুধু theory না, একদম বাস্তব practice।

Blog

Monorepo Shared Package use Part-03

Content

Comments

Related Articles