4e:I[753780,["$7","$8","$9","$a","$26","$27","$28"],"default"] 50:I[55935,["$7","$8","$9","$a","$26","$27","$28"],"default"] 51:I[19689,["$7","$8","$9","$a","$26","$27","$28"],"default"] 52:I[485653,["$7","$8","$9","$a","$26","$27","$28"],"default"] 53:I[494017,["$7","$8","$9","$a","$26","$27","$28"],"default"] 54:I[72364,["$7","$8","$9","$a","$26","$27","$28"],"default"] 46:["$","h1",null,{"className":"text-4xl md:text-5xl font-bold leading-tight mb-6","children":"Monorepo Shared Package use Part-03"}] 47:["$","div",null,{"className":"flex flex-wrap items-center gap-6 text-sm text-muted-foreground border-b pb-6","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar w-4 h-4","aria-hidden":"true","children":[["$","path","1cmpym",{"d":"M8 2v4"}],["$","path","4m81vk",{"d":"M16 2v4"}],["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}],["$","path","8toen8",{"d":"M3 10h18"}],"$undefined"]}],["$","time",null,{"dateTime":"2026-05-25T10:51:22.514Z","children":"May 25, 2026, 10:51 AM"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-clock w-4 h-4","aria-hidden":"true","children":[["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],["$","path","mmk7yg",{"d":"M12 6v6l4 2"}],"$undefined"]}],["$","span",null,{"children":"7 min read"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-eye w-4 h-4","aria-hidden":"true","children":[["$","path","1nclc0",{"d":"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["$","circle","1v7zrd",{"cx":"12","cy":"12","r":"3"}],"$undefined"]}],["$","span",null,{"children":[122," views"]}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-heart w-4 h-4","aria-hidden":"true","children":[["$","path","mvr1a0",{"d":"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}],"$undefined"]}],["$","span",null,{"children":[0," likes"]}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-message-circle w-4 h-4","aria-hidden":"true","children":[["$","path","1sd12s",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],"$undefined"]}],["$","span",null,{"children":[0," comments"]}]]}]]}] 4f:T323a,# 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। 48:[["$","$L2a",null,{}],["$","div",null,{"children":[["$","div",null,{"className":"flex items-center gap-2 mb-4","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-book-open h-5 w-5 text-blue-600","aria-hidden":"true","children":[["$","path","1akyts",{"d":"M12 7v14"}],["$","path","ruj8y",{"d":"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"}],"$undefined"]}],["$","h3",null,{"className":"font-semibold text-lg","children":"Content"}]]}],["$","div",null,{"className":"prose prose-neutral dark:prose-invert max-w-none","children":["$","$L4e",null,{"content":"$4f"}]}]]}]] 49:["$","$L50",null,{"title":"Monorepo Shared Package use Part-03","slug":"monorepo-shared-package-use-part-03"}] 4a:["$","div",null,{"className":"my-10","children":["$","$L51",null,{"variant":"blog"}]}] 4b:["$","div",null,{"className":"border-y py-6 mb-10 flex flex-wrap items-center gap-4","children":[["$","$L52",null,{"blogId":"6a1429aa5905e92f1936fe50","initialCount":0,"slug":"monorepo-shared-package-use-part-03"}],["$","button",null,{"className":"inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border hover:bg-accent/10 transition-colors","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-message-circle w-5 h-5","aria-hidden":"true","children":[["$","path","1sd12s",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],"$undefined"]}],"Comment"]}]]}] 4c:["$","$L53",null,{"initialCommentsCount":0,"initialLikesCount":0,"slug":"monorepo-shared-package-use-part-03"}] 4d:["$","div",null,{"className":"mt-20","children":["$","$L54",null,{"relatedBlogs":[]}]}]

Blog

Monorepo Shared Package use Part-03

Content

Enjoyed this article?

Comments