The Front-End Toolchain

Browsers run HTML, CSS and JavaScript, but professional projects are often written in TypeScript, framework components or Tailwind 5,202 classes, import hundreds of npm 2,036 packages, and expect the page to update the instant you save. A toolchain bridges the gap between the code you write and the files a browser downloads, and each stage has a section of this chapter.

The front-end toolchain, with the section that covers each stage

Node.js 2,131 runs almost all of these tools, even though your code will run in a browser: use an LTS release (Node.js 24 or 22 in September 2026). The package manager (npm, pnpm 69,400 , Yarn 11,798 or Bun 73,307 ) downloads libraries into node_modules and records exact versions in a lockfile. The dev server serves your source over HTTP, compiles each file on request and pushes changes into the open page without a full reload (hot module replacement). The bundler produces the production build: it follows imports, removes unused code, minifies, and lowers syntax to the browsers you target, which is where the Browserslist and Baseline settings of Standards Bodies come in. In the 2025 Stack Overflow Developer Survey, 56.8% of respondents had used npm extensively in the past year, 25.4% Vite 25,978 and 18.4% Webpack 3,824 .

The scripts block of package.json is where the stages meet. A typical Vite project wires them up like this, and you run each one with npm run <name>:

package.json scripts connecting a Vite project's toolchainJSON

{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint .",
    "format": "prettier --write .",
    "test": "vitest",
    "test:e2e": "playwright test"
  }
}

You do not need any of this to start. A folder with index.html, a stylesheet and <script type="module"> runs in every current browser, and import maps (Widely available since March 2023) let you import packages by name from a CDN without a build step. Add tools when a problem demands them: a bundler when requests or file sizes grow, TypeScript when the codebase outgrows your memory, tests when bugs return. The early chapters of this book use plain files, so you can follow them with nothing but an editor and a browser.

MENU