Tooling overview (npm scripts, bundlers)

Here is a tooling overview – npm scripts, local dev servers, and bundlers at a practical level. You can learn JavaScript with plain files; this is what changes when a project outgrows them.

package.json and npm scripts

{
  "name": "shop-ui",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "node --test"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

npm install reads dependencies. npm run dev runs the script named dev. Scripts are the project command menu – use them instead of memorising long CLI flags.

Why a dev server

Module imports, API proxies, and live reload expect HTTP. Vite, webpack-dev-server, and similar serve your source on localhost with sensible defaults. Opening index.html from disk stops being enough once imports and fetch paths multiply.

What bundlers do

• Bundle many modules into fewer files for production.
• Transform modern syntax for older browsers if you target them.
• Tree-shake unused exports.
• Handle non-JS assets – CSS, images – depending on setup.

Vite dev uses native ESM; production build rolls up optimised files. Webpack is older but everywhere in existing codebases. You do not need to master config on day one – start from a template and change one thing at a time.

Environment variables

// Vite exposes import.meta.env.VITE_API_URL
const base = import.meta.env.VITE_API_URL ?? '/api';

Never put secrets in front-end env vars – they ship to the browser. Public API base URLs are fine.

Linting and formatting

ESLint catches common mistakes; Prettier formats consistently. Many editors run them on save. Add them when a project has more than one contributor or you keep arguing with yourself about semicolons.

Next: mini project – build an interactive UI (tabs, modal, sortable list) without a framework.