FE7: The modern frontend toolkit
What build tools do
🎯You'll be able to
Explain what a build tool does with your code and read its output.
🏠The everyday picture
A printing press takes a writer's manuscript, sets the type, arranges the pages and binds them into a book readers can use. A build tool takes the code you write and turns it into files browsers can load quickly.
📘What it really is
- A build tool does several jobs:
- runs a development server with hot module replacement (changes appear instantly without losing page state);
- transforms code browsers don't understand directly: JSX, TypeScript, modern CSS;
- bundles many files into fewer, split by route (FE5);
- optimises for production: minifying, tree shaking, hashed file names (FE5 Lesson 5);
-
handles assets: images, fonts, CSS.
-
Vite: fast development server using the browser's native modules, with a production bundler underneath. Common for new React, Vue and Svelte projects.
-
Webpack: older, very configurable, still used in many large existing apps.
- Framework builds: Next.js and Nuxt include their own build set-up; you configure them rather than a bundler directly.
- Know the commands:
npm run dev(development),npm run build(production files),npm run preview(test the production build locally). Bugs can appear only in production builds, so test the build before releasing.
📝A worked example
Kirana Express's admin tool was on an old Webpack set-up:
| Measure | Old Webpack config | After moving to Vite |
|---|---|---|
| Dev server start | 48 s | 1.5 s |
| Change to visible update | 4–6 s | Under 0.5 s |
| Config file | 310 lines, written by someone who left | 25 lines |
| Production bundle | Similar size | Similar size |
The team checked the production build with npm run preview and a full click-through before switching.
🌍Where it's used
- Every frontend project, visible or hidden behind a framework.
- Migrations from older tools.
- Performance work, where build settings control splitting and minifying.
📝Case scenario
An app works perfectly with npm run dev, but the deployed version shows a blank page. The browser console says a file isn't found:
the production build expects to be served from the site root, but it's deployed under /admin/. Setting the build's base path to
/admin/ and testing with npm run preview fixes it.
🖱️Try it
Create a new Vite + React + TypeScript project. Time the dev server start and a change appearing, then run npm run build, look at the
files in dist/, and serve them with npm run preview.
⚠️Common mistakes
- Editing files in the build output. Sign: your change disappears on the next build. Fix: edit the source files only.
- Ignoring build warnings. Sign: a warning about a large chunk becomes a slow page. Fix: read warnings and act on size ones.
🛠️For your project
The starter kit builds with Next.js (npm run build); its output lists each page's JavaScript size, which you'll compare in Project 3.
✅Quick check
What is hot module replacement?
Show the answer
Updating changed code in the running page instantly, without a full reload or losing state.
Why test the production build before releasing?
Show the answer
Some bugs appear only after production transforms and paths, not in the development server.