কাজের পরিবেশ — Node, npm, Vite, ESLint, Prettier আর project-এর গঠন

১ · কাজের পরিবেশ কেন আগে গোছাতে হয়

একটি রেস্তোরাঁর রান্নাঘর ভাবুন। রান্না শুরুর আগে বাবুর্চি চুলা জ্বালান, মসলা হাতের কাছে রাখেন, ছুরি ধার দেন। এই গোছানোকে কেউ রান্না বলে না, কিন্তু এটি না হলে দুপুরের ভিড়ে সব ভেঙে পড়ে। সফটওয়্যারে এই গোছানো ব্যবস্থাটির নাম কাজের পরিবেশ (development environment).

গত চারটি পর্বে আপনি “বাজারঘর”-এর মানচিত্র দেখেছেন। এই পর্বে প্রথমবার আসল ফাইল তৈরি হবে। এখানকার প্রতিটি আউটপুট একটি সত্যিকারের run থেকে নেওয়া। যেখানে কিছু ভাঙল, সেটিও লুকানো হয়নি, কারণ আপনিও ঠিক সেখানেই আটকাবেন।

২ · Node-এর version — LTS বেছে নিন, একাধিক version সামলান

প্রথম সিদ্ধান্ত হলো Node-এর কোন version বসাবেন। Node-এর দুই ধরনের প্রকাশ থাকে: নতুন বৈশিষ্ট্যের ধারা, আর LTS (Long-Term Support), যা অনেক দিন নিরাপত্তা আপডেট পায়। কাজের project-এ LTS নিন। nodejs.org-এর “previous releases” পাতায় ১ নভেম্বর ২০২৬ তারিখে v26, v24 আর v22 LTS হিসেবে আছে, v20 ইতিমধ্যে EOL (End of Life, আর আপডেট আসে না)। এই তালিকা বদলায়, তাই নতুন project শুরুর সময় পাতাটি দেখে নিন।

টুলেরও নিজের চাহিদা থাকে। Vite কী চায়, সেটি মুখস্থ না করে সরাসরি জিজ্ঞেস করা যায়:

$ node -v
v24.15.0
$ npm -v
11.12.1
$ npm view vite engines
{ node: '^20.19.0 || >=22.12.0' }

সত্যিকারের run · Windows 10, Node 24.15.0, npm 11.12.1

আপনি যদি পুরোনো project-এ Node 18 আর নতুন project-এ Node 24 চান, তখন লাগে একটি version manager. এটি একই কম্পিউটারে কয়েকটি Node পাশাপাশি রাখে। Linux আর macOS-এ প্রচলিত nvm; Windows-এর জন্য আছে আলাদা একটি project, nvm-windows, যার কমান্ড মিললেও আচরণ হুবহু এক নয়। fnm আর Volta-ও ব্যবহৃত হয়।

# উদাহরণ — এই পর্বের machine-এ nvm বসানো ছিল না, তাই এটি চালানো হয়নি
# Linux / macOS (nvm)
nvm install --lts
nvm use --lts
echo "24" > .nvmrc      # project-এর version লিখে রাখা
nvm use                # .nvmrc পড়ে সেই version নেয়

# Windows (nvm-windows) — আগের Node installer সরিয়ে বসানোই নিরাপদ
nvm install lts
nvm use 24.15.0

৩ · প্রথম project — npm create থেকে প্রথম পাতা

এবার “বাজারঘর”-এর দোকানের সামনের অংশ, মানে frontend, শুরু করি। Scaffold মানে কাজের প্রাথমিক কাঠামো, যেমন বাড়ি বানানোর আগে বাঁশের ভারা বাঁধা।

npm create vite@latest bazarghar-web -- --template react-ts --no-interactive
cd bazarghar-web
npm install
npm run dev

মাঝের -- খেয়াল করুন। এর পরের অংশ npm নিজে পড়ে না, সোজা create-vite টুলের হাতে দেয়। প্রশ্নোত্তরের ধাপ চাইলে --no-interactive বাদ দিলেই হবে। চারটি কমান্ডের ভেতরে কী ঘটে, ধাপে ধাপে দেখুন। এখানকার প্রতিটি লেখা আসল run থেকে নেওয়া, শুধু লম্বা অংশ ছাঁটা।

create-vite v9.3.3
◇  Scaffolding project in ~/bazarghar-web...
└  Done. Now run:
  cd bazarghar-web
  npm install
  npm run dev

added 28 packages, and audited 29 packages in 32s
9 packages are looking for funding
found 0 vulnerabilities

  VITE v8.3.5  ready in 172 ms
  ➜  Local:   http://127.0.0.1:5173/

<script type="module" src="/@vite/client"></script>
…
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

// ফাইল .tsx, কিন্তু উত্তর আসে JavaScript হয়ে
import "/src/index.css";
import App from "/src/App.tsx";
// react আসে আগে থেকে প্রস্তুত করা ফাইল থেকে
/node_modules/.vite/deps/react.js

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

কোন ফাইলের কী কাজ

টেমপ্লেট থেকে ১৮টি ফাইল এসেছে। মুখস্থ নয়, শুধু জেনে রাখুন কোন সমস্যায় কোথায় যাবেন।

৪ · dev, build আর preview — তিন মোড, বাস্তব সংখ্যা

চায়ের দোকানে চা বানানোর সময় আর পার্সেল বাঁধার সময় কাজের ধরন আলাদা। সফটওয়্যারেও তাই।

$ npm run build

> bazarghar-web@0.0.0 build
> tsc -b && vite build

vite v8.3.5 building client environment for production...
transforming...
✓ 20 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/react-CHdo91hT.svg    4.12 kB │ gzip:  2.06 kB
dist/assets/vite-BF8QNONU.svg     8.70 kB │ gzip:  1.60 kB
dist/assets/hero-CLDdwZDr.png    13.05 kB
dist/assets/index-D64VDMd1.css    4.10 kB │ gzip:  1.47 kB
dist/assets/index-GpEN3EET.js   222.44 kB │ gzip: 69.28 kB

✓ built in 101ms

সত্যিকারের run · Vite 8.3.5, React 19.3.1 · একটি স্থানীয় run-এর সংখ্যা, সাধারণ ফল নয়

এই আউটপুট পড়তে জানা একটি আসল দক্ষতা। ফাইলের নামের GpEN3EET অংশটি বিষয়বস্তু থেকে তৈরি hash. কোড বদলালে নামও বদলায়, তাই browser পুরোনো cache নিয়ে বিভ্রান্ত হয় না। একটু পরে আমরা কোড বদলালে নাম সত্যিই বদলে যাওয়া দেখব।

$ npm run preview
  ➜  Local:   http://127.0.0.1:4173/

GET / → 200 text/html
<script type="module" crossorigin src="/assets/index-GpEN3EET.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D64VDMd1.css">

সত্যিকারের run · build-এর পরে

Dev আর preview-এর HTML মিলিয়ে দেখুন। Dev-এ ছিল /src/main.tsx, এখানে একটি মাত্র hash-ওয়ালা ফাইল। Dev-এ চললেই শেষ নয়; পাঠানোর আগে build আর preview চালান, কারণ দুটি পথ আলাদা।

একটি বিষয় পরিষ্কার করে নিই। dist/ ফোল্ডারে শুধু সাধারণ HTML, CSS আর JavaScript ফাইল আছে। এদের চালাতে Node লাগে না; যেকোনো static hosting থেকেই পরিবেশন করা যায়। তাই এই ফোল্ডারে API বা database-এর কোনো কাজ চলে না। সেই কাজের জন্য আলাদা server লাগবে, যা অংশ ৮-এ সাজানো হবে। কোথায় চালাবেন, সেই আলোচনা পর্ব ৮২-তে।

৫ · package.json, semver আর lockfile — হিসাবের খাতা

মুদি দোকানের কথা ভাবুন। ফর্দে লেখা “এক কেজি মিনিকেট চাল, যেকোনো ভালো ব্র্যান্ড”। এটি package.json. আর মেমোতে লেখা “অমুক ব্র্যান্ড, লট ২৭, ৮০ টাকা”। এটি lockfile. ফর্দ আপনার ইচ্ছা, মেমো যা সত্যিই এসেছে।

{
  "name": "bazarghar-web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.3.1",
    "react-dom": "^19.3.1"
  },
  "devDependencies": {
    "@types/node": "^24.19.2",
    "@types/react": "^19.3.0",
    "@types/react-dom": "^19.3.0",
    "@vitejs/plugin-react": "^6.1.2",
    "oxlint": "^1.89.0",
    "typescript": "~7.0.2",
    "vite": "^8.3.5"
  }
}

• private: true: ভুল করে npm-এ প্রকাশ হওয়া আটকায়।
• type: "module": এই project-এর .js ফাইল ES module হিসেবে পড়া হবে।
• scripts: npm run dev এই তালিকা থেকে কমান্ড নেয়। node_modules/.bin নিজে থেকেই পথে যুক্ত হয়, তাই vite global ভাবে বসাতে হয় না।

dependencies বনাম devDependencies: প্রথমটি অ্যাপ চলতে লাগে, দ্বিতীয়টি শুধু বানাতে বা পরীক্ষা করতে। Server-এ এর সরাসরি ফল আছে: npm ci --omit=dev ESLint-এর মতো টুল বাদ দিয়ে হালকা install করে। Frontend-এ পার্থক্যটি কিছুটা নিয়মের ব্যাপার, কারণ bundle-এ শুধু সেই কোডই ঢোকে যা import হয়েছে।

npm install ভেতরে কী করে

package.json       react: ^19.3.1
package-lock.json  নেই (নতুন project)

react ^19.3.1 → চলবে >=19.3.1 <20.0.0
নতুনতম যা মেলে → 19.3.1
react-এর নিজের dependency-ও একইভাবে…

resolved  .../react/-/react-19.3.1.tgz
integrity sha512-QNhWdt7nrgVWWQG58…
ফাইলের hash মিললে তবেই গ্রহণ

node_modules/react/
node_modules/vite/
node_modules/.bin/vite   ← npm run dev এটিই খোঁজে
added 28 packages

"node_modules/react": {
  "version": "19.3.1",
  "resolved": "https://registry.npmjs.org/…",
  "integrity": "sha512-…"
}
found 0 vulnerabilities

Semver range — কোন version চলবে

Semver মানে MAJOR.MINOR.PATCH নিয়মের নম্বর। Range-এর সিদ্ধান্তটি ধাপে ধাপে দেখুন।

এবার একটি ছোট package.json parse করে একই নিয়ম কোডে চালিয়ে দেখুন। আসল npm-এর নিজস্ব semver library আরও অনেক কিছু সামলায়; এটি শুধু ^ আর ~-এর হিসাব।

const pkg = JSON.parse(`{
  "name": "bazarghar-web",
  "dependencies": { "react": "^19.3.1", "bazar-ui": "^0.8.2" },
  "devDependencies": { "typescript": "~6.0.2" }
}`);
const registry = {
  react: ["19.3.0", "19.3.1", "19.4.0", "20.0.0"],
  "bazar-ui": ["0.8.1", "0.8.2", "0.8.9", "0.9.0"],
  typescript: ["6.0.1", "6.0.3", "6.1.0", "7.0.2"],
};
const num = (v) => v.split(".").map(Number);
function cmp(a, b) {
  for (let i = 0; i < 3; i++) if (a[i] !== b[i]) return a[i] - b[i];
  return 0;
}
function upper(range) {
  const [major, minor, patch] = num(range.slice(1));
  if (range[0] === "~") return [major, minor + 1, 0];
  if (major > 0) return [major + 1, 0, 0];
  if (minor > 0) return [0, minor + 1, 0];
  return [0, 0, patch + 1];
}
function matches(range, version) {
  const x = num(version);
  return cmp(x, num(range.slice(1))) >= 0 && cmp(x, upper(range)) < 0;
}
const all = { ...pkg.dependencies, ...pkg.devDependencies };
for (const [name, range] of Object.entries(all)) {
  const ok = registry[name].filter((v) => matches(range, v));
  console.log(`${name} ${range}  =>  >=${range.slice(1)} <${upper(range).join(".")}`);
  for (const v of registry[name]) {
    console.log(`   ${v.padEnd(7)} ${matches(range, v) ? "yes" : "no"}`);
  }
  console.log(`   install picks: ${ok.at(-1)}`);
}

Lockfile কেন commit করবেন

রাফি মার্চে project বানিয়েছে, মিতু সেপ্টেম্বরে যোগ দিয়েছে। মাঝে নতুন version এসেছে। নিচের খেলনা data-তে দুজনের গাছ মিলিয়ে দেখুন।

// toy registry: what is published on two dates
const registry = {
  march: { "bazar-ui": ["1.2.0", "1.2.5"], "taka-format": ["2.0.0"] },
  september: { "bazar-ui": ["1.2.0", "1.2.5", "1.4.0"], "taka-format": ["2.0.0", "2.1.0"] },
};
const ranges = { "bazar-ui": "^1.2.0", "taka-format": "^2.0.0" };

// no lockfile: take the newest published version (all fit the range here)
function resolveFresh(month) {
  const tree = {};
  for (const name of Object.keys(ranges)) tree[name] = registry[month][name].at(-1);
  return tree;
}
// with a lockfile: take exactly what is written, if it still exists
function installFromLock(lock, month) {
  const tree = {};
  for (const [name, version] of Object.entries(lock)) {
    if (!registry[month][name].includes(version)) throw new Error(`${name}@${version} missing`);
    tree[name] = version;
  }
  return tree;
}
const show = (who, tree) => console.log(who.padEnd(26), JSON.stringify(tree));

const lock = resolveFresh("march");
show("Rafi, march (writes lock)", lock);
show("Mitu, september, no lock", resolveFresh("september"));
show("Mitu, september, with lock", installFromLock(lock, "september"));
const same = JSON.stringify(lock) === JSON.stringify(installFromLock(lock, "september"));
console.log("same tree as Rafi with lock:", same);
console.log("same tree as Rafi without lock:", JSON.stringify(lock) === JSON.stringify(resolveFresh("september")));

আসল টুলে একই আচরণ পরখ করা হয়েছে। Package ms-এর registry-তে 2.1.3 আছে, কিন্তু lockfile-এ 2.0.0 লেখা, আর range ^2.0.0:

$ npm install         → ms@2.0.0   (lockfile বহাল)
$ npm ci              → ms@2.0.0
$ npm update          → ms@2.1.3   (range-এর ভেতরে নতুনতম)
package.json-এ তখনো:  "ms": "^2.0.0"

সত্যিকারের run · npm 11.12.1 · লাইনগুলো সংক্ষেপ করে সাজানো

npm ci হলো স্বয়ংক্রিয় ব্যবস্থার (CI) জন্য কড়া সংস্করণ। npm-এর docs অনুযায়ী এটি lockfile বাধ্যতামূলক রাখে, node_modules মুছে শুরু করে, আর package.json বা lockfile কখনো লেখে না। দুটির অমিল হলে থেমে যায়। আমরা ইচ্ছা করে অমিল বানালাম:

$ npm pkg set dependencies.react="^18.0.0"
$ npm ci
npm error code EUSAGE
npm error `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm error Invalid: lock file's react@19.3.1 does not satisfy react@18.3.1

সত্যিকারের run · সংক্ষেপিত

৬ · ESLint আর Prettier — একটি আসল ভাঙন ও একটি আসল বাগ

Linter অর্থ খোঁজে: “এই কোডে বাগ থাকতে পারে।” Formatter চেহারা ঠিক করে: space, quote, লাইন ভাঙা। প্রুফরিডার আর লে-আউট শিল্পীর মতো দুটি আলাদা কাজ।

প্রথম চমক: নতুন Vite টেমপ্লেটে ESLint নেই। এর lint script চালায় Oxlint, একটি Rust-এ লেখা দ্রুত linter. অনেক পুরোনো টিউটোরিয়াল আর AI এখনো eslint.config.js থাকার কথা বলে। টেমপ্লেট বদলায়, তাই নিজের ফোল্ডারে যা আছে সেটিই সত্য। এই কোর্সে আমরা ESLint নিচ্ছি, কারণ এর plugin জগৎ বিশাল আর React Hook-এর নিয়ম পর্ব ১৩-১৪-এ কাজে লাগবে। Oxlint বেছে নেওয়াও একটি যুক্তিসঙ্গত সিদ্ধান্ত।

ভাঙন: ERESOLVE

ESLint বসাতে গিয়েই থামতে হলো:

$ npm install -D eslint @eslint/js typescript-eslint eslint-plugin-react-hooks eslint-config-prettier globals prettier
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: bazarghar-web@0.0.0
npm error Found: typescript@7.0.2
npm error node_modules/typescript
npm error   dev typescript@"~7.0.2" from the root project
npm error
npm error Could not resolve dependency:
npm error peer typescript@">=4.8.4 <6.1.0" from typescript-eslint@8.72.1
npm error node_modules/typescript-eslint
npm error   dev typescript-eslint@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.

সত্যিকারের run · নভেম্বর ২০২৬

পড়লে পুরোটাই পরিষ্কার। Peer dependency মানে “আমি চলব, যদি আপনার project-এ এই package-এর এই version থাকে।” typescript-eslint চায় TypeScript 6.1-এর নিচে, টেমপ্লেট দিয়েছে 7.0.2. Error মেসেজ নিজেই --force-এর কথা বলে, কিন্তু একই বাক্যে “incorrect (and potentially broken)”-ও বলে। ঠিক পথ হলো দুই দিকের চাহিদা মেলানো:

$ npm install -D typescript@~6.0
$ npm install -D eslint @eslint/js typescript-eslint eslint-plugin-react-hooks eslint-config-prettier globals prettier
$ npm ls --depth=0
+-- typescript-eslint@8.72.1
+-- typescript@6.0.3
$ npm run build
✓ built in 93ms

সত্যিকারের run · সংক্ষেপিত · bundle-এর আকার TypeScript 7-এর run-এর সঙ্গে হুবহু এক

Peer dependency-র এই দ্বন্দ্ব দেখতে ভয়ের, কিন্তু আসলে এটি একটি উপকারী থামা। npm install-এর সময়ই জানিয়ে দিল, নইলে হয়তো lint চালানোর সময় অদ্ভুত error আসত, আর কারণ খুঁজতে অনেক সময় লাগত। টেমপ্লেটের সব কিছু নতুনতম হলেও সেগুলো আপনার যোগ করা টুলের সঙ্গে মিলবে, এমন কোনো নিশ্চয়তা নেই।

আপনি পড়ার সময় এই range বদলে যেতে পারে। সিদ্ধান্তের আগে একবার দেখে নিন: npm view typescript-eslint peerDependencies. শিক্ষাটি version-এর নয়, পদ্ধতির: error পড়ুন, কে কী চায় বের করুন, তারপর মেলান।

নিয়মের ফাইল

ESLint 9 থেকে ডিফল্ট কনফিগ হলো flat config, একটি eslint.config.js ফাইল। ESLint 10.14-এ শুধু পুরোনো .eslintrc.json রেখে চালিয়ে দেখা হয়েছে; সে বলেছে ESLint couldn't find an eslint.config.* file.

import js from '@eslint/js'
import prettier from 'eslint-config-prettier'
import reactHooks from 'eslint-plugin-react-hooks'
import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import tseslint from 'typescript-eslint'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      prettier, // সবার শেষে: চেহারার নিয়মগুলো বন্ধ করে
    ],
    languageOptions: { globals: globals.browser },
  },
])

{
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto"
}

npm pkg set scripts.lint="eslint ."
npm pkg set scripts.format="prettier --write src"
npm pkg set scripts.format:check="prettier --check src"
npm uninstall oxlint

আসল বাগ: পুরোনো দাম

“বাজারঘর”-এর একটি component পণ্যের দাম আনে। এটি compile হয়, পাতাও ঠিক দেখায়। কিন্তু ব্যবহারকারী অন্য পণ্যে গেলে দাম আগের পণ্যেরই থেকে যায়। useEffect-এর বিস্তারিত পর্ব ১৩-এ আসবে; এখন শুধু জানুন, শেষের [] মানে কাজটি মাত্র একবার চলবে।

import { useEffect, useState } from 'react'

export function PriceTag({ productId }: { productId: number }) {
  const [price, setPrice] = useState<number | null>(null)
  useEffect(() => {
      fetch(`/api/products/${productId}`)
        .then(res => res.json())
        .then(data => setPrice(data.price))
  }, [])
  let label = price ?? "..."
  return <span>৳ {label}</span>
}

$ npm run lint

src/PriceTag.tsx
   9:6  warning  React Hook useEffect has a missing dependency: 'productId'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  10:7  error    'label' is never reassigned. Use 'const' instead  prefer-const

✖ 2 problems (1 error, 1 warning)
  1 error and 0 warnings potentially fixable with the `--fix` option.

$ npm run format:check
[warn] src/PriceTag.tsx
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

সত্যিকারের run · ESLint 10.14.0, Prettier 3.9.10

সতর্কবার্তাটি পড়ুন: লাইন ৯, productId তালিকায় নেই। এটিই সেই পুরোনো দামের বাগ। মজার ব্যাপার, আসল বাগটি warning, আর শুধু স্টাইল-ধরনের prefer-const হলো error. তাই শব্দ দেখে গুরুত্ব বিচার করবেন না; warning-ও পড়ুন। দুই লাইন ঠিক করে Prettier চালাই:

  }, [productId])             // আগে: []
  const label = price ?? '...' // আগে: let, আর ডাবল কোট

$ npm run lint                (কোনো আউটপুট নেই, exit code 0)
$ npm run format
src/App.tsx 38ms (unchanged)
src/PriceTag.tsx 8ms
$ npm run format:check
All matched files use Prettier code style!

সত্যিকারের run · সংক্ষেপিত

npm audit — ১২টি moderate, এখন কী করবেন

ESLint যোগ করার পরে install বলল 12 moderate severity vulnerabilities. নতুনরা এখানে ঘাবড়ে যান। npm audit আপনার গাছ মিলিয়ে দেখে জানা সমস্যার তালিকার সঙ্গে। রিপোর্টটি পড়ি:

$ npm audit
minimatch  <11.0.1
Severity: moderate
minimatch has potential denial of service via globparts amplification
fix available via `npm audit fix --force`
Will install eslint@4.0.0, which is a breaking change
…
12 moderate severity vulnerabilities

$ npm audit --omit=dev
found 0 vulnerabilities

সত্যিকারের run · নভেম্বর ২০২৬ · সংক্ষেপিত · পরে এই ফল বদলাতে পারে

লাল লাইনটি দেখুন। --force আপনার ESLint 10 নামিয়ে এনে বসাতে চাইছে 4.0.0, ফলে পুরো নতুন কনফিগই ভাঙবে। আর ১২টি সংখ্যা ১২টি আলাদা বিপদ নয়: একটি উৎস, minimatch, বাকিগুলো তার ওপর নির্ভরশীল বলে গোনা হয়েছে। সব dev টুলে; --omit=dev-এ শূন্য। সিদ্ধান্তের ধারা এমন:

• সমস্যাটি কোন package-এ? dependencies-এ, না শুধু dev টুলে?
• আক্রমণের পথ কী? এখানে অবিশ্বস্ত ইনপুট কি সত্যিই সেই কোডে পৌঁছায়?
• নিরাপদ সমাধান আছে? থাকলে npm audit fix (force ছাড়া), অথবা upstream-এর নতুন version-এর অপেক্ষা।
• Production dependency-তে high বা critical হলে বিষয়টি জরুরি। তখনই ঠিক করুন।

গভীর আলোচনা আছে Supply chain security পর্বে, আর পর্ব ৫০-এর নিরাপত্তা তালিকায় এটি আবার আসবে।

৭ · .env ফাইল আর VITE_ — দোকানের সাইনবোর্ডে সিন্দুকের চাবি নয়

.env ফাইল কোডের বাইরে config রাখে: API-র ঠিকানা, feature-এর সুইচ। Vite চারটি নাম চেনে: .env, .env.local, .env.[mode] আর .env.[mode].local. নির্দিষ্ট mode-এর ফাইল সাধারণ ফাইলের ওপরে অগ্রাধিকার পায়, আর .local ফাইল version control-এ যায় না। ফাইল বদলালে dev server আবার চালু করতে হয়।

নিয়ম: শুধু VITE_ দিয়ে শুরু হওয়া নাম কোড থেকে পড়া যায়, import.meta.env দিয়ে। অনেকে ভাবেন prefix মানে সুরক্ষা। উল্টো। এই prefix মানে “এটি browser-এ পাঠানো যাবে”। পরীক্ষা করে দেখি (মানগুলো ভুয়া):

VITE_API_URL=http://127.0.0.1:3000
VITE_PAYMENT_SECRET=example-secret-LEAK
DB_PASSWORD=example-db-password

export const apiUrl = import.meta.env.VITE_API_URL
export const leaked = import.meta.env.VITE_PAYMENT_SECRET
export const dbPass = import.meta.env.DB_PASSWORD
console.log(apiUrl, leaked, dbPass, import.meta.env.MODE)

$ npm run build
dist/assets/index-mVoF8jVC.js   222.52 kB │ gzip: 69.34 kB

$ grep -l 'example-secret-LEAK' dist/assets/*.js | wc -l
1
$ grep -l 'example-db-password' dist/assets/*.js | wc -l
0

bundle-এর ভেতরের অংশ:
console.log(`http://127.0.0.1:3000`,`example-secret-LEAK`,void 0,`production`)

সত্যিকারের run · Vite 8.3.5

ফলাফল স্পষ্ট। VITE_PAYMENT_SECRET-এর মান সাধারণ লেখা হিসেবে JavaScript ফাইলে বসে গেছে। যে কেউ পাতা খুলে দেখতে পারবেন। DB_PASSWORD হয়ে গেছে void 0, মানে undefined. আর দেখুন, কোড বদলাতেই ফাইলের নাম GpEN3EET থেকে mVoF8jVC হয়েছে।

৮ · “বাজারঘর”-এর গঠন — client, server আর workspace

রেস্তোরাঁয় ওয়েটার আর রান্নাঘর আলাদা, কিন্তু একই বাড়িতে। “বাজারঘর”-ও তাই। পুরো কোর্সে আমরা এই গঠন ধরে এগোব: client/-এ React, server/-এ Node API. দুটি আলাদা package.json, কারণ প্রয়োজন আলাদা। নিচে একটি কাঠামো চালিয়ে দেখুন।

cd "$(mktemp -d)"
mkdir -p bazarghar/client/src bazarghar/client/public
mkdir -p bazarghar/server/src bazarghar/shared
cd bazarghar
touch package.json package-lock.json .gitignore
touch client/package.json client/vite.config.ts client/index.html
touch client/.env.example client/.env.local
touch client/src/main.tsx client/src/App.tsx client/public/favicon.svg
touch server/package.json server/.env server/src/index.ts
touch shared/package.json shared/index.ts

echo "--- tree ---"
find . -mindepth 1 | LC_ALL=C sort | sed -e 's|^\./||' -e 's|[^/]*/|   |g'

printf '%s\n' node_modules dist '.env' '*.local' > .gitignore
echo "--- must never be shared ---"
find . -type f \( -name '.env' -o -name '*.local' \) | LC_ALL=C sort
echo "--- files: $(find . -type f | wc -l), package.json files: $(find . -name package.json | wc -l) ---"

Workspace: এক ছাদের নিচে কয়েকটি package

Monorepo মানে একই repository-তে কয়েকটি project. npm-এর workspaces তাদের জোড়া দেয়। আসল সুবিধা shared/: একই কোড client আর server দুই জায়গায় চলে। ছোট একটি সত্যিকারের উদাহরণ:

{
  "name": "bazarghar",
  "private": true,
  "workspaces": ["client", "server", "shared"],
  "scripts": {
    "dev:client": "npm run dev -w client",
    "dev:server": "npm run dev -w server",
    "build": "npm run build --workspaces --if-present"
  }
}

export function formatTaka(amount) {
  return `৳${amount.toLocaleString('en-IN')}`
}

import { createServer } from 'node:http'
import { formatTaka } from '@bazarghar/shared'

const server = createServer((req, res) => {
  res.setHeader('content-type', 'application/json')
  res.end(JSON.stringify({ path: req.url, price: formatTaka(125000) }))
})
server.listen(3000, '127.0.0.1', () => {
  console.log('server: http://127.0.0.1:3000')
})

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: { '/api': 'http://127.0.0.1:3000' },
  },
})

$ npm install
$ npm ls --depth=0
bazarghar@ ~/bazarghar
+-- @bazarghar/client@0.0.0 -> .\client
| +-- @bazarghar/shared@0.1.0 deduped -> .\shared
| +-- react@19.3.1
| `-- vite@8.3.5  … আরও
+-- @bazarghar/server@0.1.0 -> .\server
| `-- @bazarghar/shared@0.1.0 deduped -> .\shared
`-- @bazarghar/shared@0.1.0 -> .\shared

lockfile: ১টি · node_modules ফোল্ডার: ১টি (root-এ)

GET http://127.0.0.1:5173/api/products/7 → 200  (client-এর dev port-এ)
{"path":"/api/products/7","price":"৳1,25,000"}

সত্যিকারের run · সংক্ষেপিত · দুই server শুধু 127.0.0.1-এ চলেছে

-> .\shared তীরটি বলছে, npm package কপি করেনি; একটি সংযোগ (symlink) বানিয়েছে। shared/-এ কিছু বদলালে দুই দিকেই সঙ্গে সঙ্গে পাওয়া যায়। আর শেষ লাইনে দাম এসেছে লাখের কমা-সহ, ৳1,25,000, সেটি en-IN locale-এর ফল।

৯ · VS Code, debugging আর Windows-এর সাধারণ সমস্যা

VS Code

দরকারি extension মাত্র কয়েকটি: ESLint, Prettier, আর একটি error এক লাইনে দেখানোর extension (যেমন Error Lens) চাইলে। পরে Prisma বা Tailwind-এর extension যোগ হবে। বেশি extension মানে ধীর editor. দলের জন্য সুপারিশ .vscode/extensions.json-এ রাখা যায়; টেমপ্লেটের .gitignore-ও এই একটি ফাইল ছাড় দিয়েছে।

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }
}

Debugging — console.log-এর পরের ধাপ

Browser-এর কোডের জন্য DevTools (F12). Console-এ error, Network-এ প্রতিটি অনুরোধের status ও সময়, Sources-এ breakpoint. Dev-এ source map-এর কারণে আপনি অনুবাদ করা কোড নয়, নিজের .tsx দেখেন। React-এর জন্য আলাদা React DevTools extension আছে।

Server-এর কোডের জন্য Node-এর inspector. নিচের হিসাবে বাগ আছে: চাল ৮০ টাকা × ২ + ডাল ১২০ টাকা = ২৮০ টাকা হওয়ার কথা, কিন্তু প্রোগ্রাম বলে total 200. এটি একটি আসল debugger session.

1const items = [2  { name: 'চাল', price: 80, qty: 2 },3  { name: 'ডাল', price: 120, qty: 1 },4]5let total = 06for (let i = 0; i < items.length; i++) {7  total += items[i].price8}9console.log('total', total)

চারটি কমান্ড দিয়েই শুরু করা যায়:

node inspect cart.js                 # terminal-এই debugger
node --inspect index.js              # চলতে থাকবে, DevTools যুক্ত হবে
node --inspect-brk index.js          # প্রথম লাইনেই থেমে অপেক্ষা
# Chrome-এ chrome://inspect খুলে "inspect" চাপুন

$ node --inspect=127.0.0.1:9229 wait.js
Debugger listening on ws://127.0.0.1:9229/2c711c26-1322-4cbc-b262-7a941959512a
For help, see: https://nodejs.org/en/docs/inspector

সত্যিকারের run · Node 24.15.0

Inspector-কে 127.0.0.1-এর বাইরে খুলবেন না। এই port-এ যুক্ত হতে পারলে যে কেউ আপনার process-এ কোড চালাতে পারবেন। VS Code-এ JavaScript Debug Terminal খুলে কমান্ড চালালে debugger নিজে থেকে যুক্ত হয়।

Windows-এ যেখানে আটকান

আমাদের অনেক পাঠকের ল্যাপটপে Windows. নিচের প্রথম দুটি সমস্যা আমরা এই run-এই পেয়েছি।

ফোল্ডারের নাম: "R&D shop"
$ npm run build
'D' is not recognized as an internal or external command,
operable program or batch file.
Error: Cannot find module '…\typescript\bin\tsc'

একই server দুবার চালালে
Error: listen EADDRINUSE: address already in use 127.0.0.1:3000

Vite নিজে পরের port নেয়, খেয়াল না করলে বিভ্রান্তি হয়
Port 5173 is in use, trying another one...
  ➜  Local:   http://127.0.0.1:5174/

সত্যিকারের run · Windows 10 · &-ওয়ালা ফোল্ডারে npm ci সফল, build ব্যর্থ

শেষ চারটি সারি পরিচিত সমস্যা, এই run-এ দেখা নয়। স্পেস-ওয়ালা ফোল্ডার আর বাংলা নামের ফোল্ডার (বাজার ঘর) দুটোতেই build সফল হয়েছে, তবে সেটি একটি মাত্র পরীক্ষা। সবার জন্য নিরাপদ অভ্যাস হলো ছোট, ইংরেজি, চিহ্ন ছাড়া পথ। লাইন শেষের অক্ষরের (CRLF ও LF) কারণে Prettier সব ফাইলে অভিযোগ করলে "endOfLine": "auto" কাজে লাগে, যেটি আমরা ওপরে রেখেছি।

১০ · AI-এর যুগে কাজের পরিবেশ

সেটআপের কাজে AI সবচেয়ে বেশি ভুল করে, কারণ এখানে সবকিছু দ্রুত বদলায়। এই পর্বেই দেখলেন: টেমপ্লেটে ESLint নেই, TypeScript-এর major version-এ ভাঙন, পুরোনো config ফাইল চলে না। AI-এর শেখা তথ্য অনেক সময় এর চেয়ে পুরোনো। AI-কে আপনার ফোল্ডারের সত্য জানান, স্মৃতির ওপর ছেড়ে দেবেন না।

AI-এর সেটআপ হাতে পেলে — যাচাইয়ের চেকলিস্ট

• Version মিলিয়েছি: কমান্ড আমার নিজের installed version-এর docs-এর সঙ্গে মেলে
• প্রতিটি নতুন package-এর নাম npm view দিয়ে দেখেছি, দরকার আছে কি না ভেবেছি
• npm run lint, npm run build আর npm run preview নিজে চালিয়েছি
• package.json আর lockfile-এর diff পড়েছি; অচেনা কিছু নেই
• dist/-এ secret খুঁজেছি, আর .env ভাগ হচ্ছে না নিশ্চিত করেছি
• AI-কে কোনো আসল password, token বা key দিইনি