𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗪𝗵𝗲𝗻 𝗬𝗼𝘂 𝗥𝘂𝗻 𝗡𝗽𝗺 𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝘀?
You hit enter on an npm command. Your project builds. It feels like magic.
It is not magic. It is a series of network requests, code parsing, and file optimization.
Stop running commands blindly. Understand the engine instead.
Here is what happens behind the 6 core commands you use every day.
- npm install
This command reads your package.json file. It contacts a cloud registry to find the right versions of your tools.
- It downloads packages from the registry.
- It creates the node_modules folder.
- It builds a dependency tree.
- It updates package-lock.json to record exact versions.
- npm run format:check
This is a verification step. It checks if your code follows your style rules without changing anything.
- It builds a virtual layout of your files.
- It compares your files against rules like Prettier.
- It flags errors if your spacing or syntax is wrong.
To fix these errors, run npm run format. This command uses Prettier to rewrite your files to the correct style.
- npm run lint
Think of this as a spellchecker for your code. ESLint looks for errors that break your logic.
- It finds syntax errors.
- It identifies unused variables.
- It detects missing imports.
- It flags incorrect React Hook usage.
- npm run build
This command prepares your app for the real world. It creates a dist folder.
- It uses a bundler to perform tree shaking. This deletes code you imported but never used.
- It performs minification. This strips whitespace and renames variables to save bytes.
- It processes CSS and assets.
- It outputs optimized static files ready for a server.
- npm run dev
This starts your local development server. If you use Vite, it uses Native ES Modules.
- It compiles files only when your browser asks for them.
- It uses WebSockets for Hot Module Replacement (HMR).
- It swaps edited code in your browser instantly without a full page refresh.
- npm run preview
Use this to double-check your work before you deploy. This command ignores your source code. It only looks at your dist folder.
- It simulates how your app behaves on Vercel or AWS.
- It serves your production build on a local server.
The terminal is not a black box. When you understand your tools, you debug faster.
What command changed your workflow once you learned how it worked? Tell me below.