Have you ever hit Enter on an npm command and wondered whats actually happening under the hoods?
When you're diving into modern web development, commands like :

npm install

or

npm run dev

1. npm install
This command reads project package json file and install all the dependency listed here:
npm reads your package json, contacts a massive cloud registry, resolves version conflicts and builds a complex dependemcy tree. Crucially, it creates a package-lock.json.

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "vite": "^7.0.0",
    "eslint": "^9.0.0",
    "prettier": "^3.0.0"
  }
}

All these dependency are installed by just running a single command:

npm install

What it does:

1. Download all required packages from the npm registry.
2. Create a node_module/ folder containing those packages.
3. Create or update package-lock.json to record the exact versions installed.

4. Make project tool like vite, esliny and pretier available to npm scripts.

5. npm run format:check
   This command fixes your tabs and spaces.
   format:check builds a temporary virtual layout of your files based on your style rules (like prettier) and flags discrepancies. When you drop the :check and run** npm run format:** it actively intercepts the files AST strips away your custom spacing and rewrites the files perfectly to your disk.

If everything is correctly formatted:

Checking formatting...
All matched files use Prettier code style!

if some files are not formatted:

Checking formatting...
[warn] src/App.jsx
[warn] src/components/Navbar.jsx
[warn] Code style issues found in 2 files.

How to fix the formatting issues run this command:

npm run format

It executes this command:

prettier . --write`

`plaintext
This automattically rewrites files to match the required formatting styles. This command simply check a verification step that checks whether your code is properly formatted without changing anything.

In a nutshell this is what hapends behind the command:

1. Runs the script defined in your project.json
2. Prettier is a code formatter
3. It scans all supported files in the current project(the current directory).
4. It checks whether the files follow the formatting rules.
5. It does not modify the files.

3. npm run lint

A spellchecker for code errors.
Tools like ESLint don't just read code like text. They convert your entire codebase into an Abstract Syntax Tree(AST).
AST - is a digital architectural map of your logic. It then tests strict rules against this map to catch breaking bugs before your code ever touches a browser.

ESLint analyzes your code and looks for:

• syntax errors
• Unused variables
• Missing imports
• Incorrect React Hooks usage
• Potential bugs
• Violation of the project's coding standards

Suppose you have:

`
function App() {
const message = "Hello"; // never used

return

;
}
`plaintext
Then you run this command:

`
npm run lint
`plaintext
It might produce something like this:

`
src/App.jsx
2:9 error 'message' is assigned a value but never used no-unused-vars

✖ 1 problem
`plaintext

1. npm run build This creates a "dist" folder. This is heavy lifting. A bundler to perform Tee shaking. Tree lifting is deleting code you imported but never used Minification - Stripping whitespace and changing variable names like userProfile to a to save bytes and spits out optimized production-ready statics assets.

It runs the script defined in your package.json

`
"build": "vite build"
`shell
so npm executes:

`
vite build
`plaintext
What it does:

1. It creates a** production-ready version** of your React application.
2. During the build process, Vite:
3. Bundles your JavaScript files
4. Processes React components
5. Optimizes and minifies code.
6. Process CSS and assets
7. Generates static files that can be deployed to a server.

Before build your project structure looks like this :

`
frontend/
├── src/
├── public/
├── package.json
├── vite.config.js
`plaintext

The after npm build a new dist/ folder is created:

`
frontend/
├── dist/
│ ├── assets/
│ ├── index.html
│ └── ...
├── src/
├── public/
`plaintext

The dist folder contains the files you would deploy to a web server output should be :

`
vite v8.x.x building for production...
✓ 45 modules transformed
✓ built in 2.1s
`plaintext

5. npm run dev

It starts a local website.
Modern tools (like vite) boot up a local development server utilizing *Native ES Modules *

Instead of waiting to bundle your whole app upfront, it compiles files on the fly only when your browser requests them. It also opens a persistent WebSocket connection for Hot Module Replacement(HMR), swaping out edited code instantly without refreshing the page.

It starts vite's development serve, which lets you run and host your react application locally.
When it successfully starts:

`

frontend@0.0.0 dev
vite

VITE v8.0.12 ready in 500 ms

➜ Local: http://localhost:5173/
➜ Network: http://192.168.1.10:5173/
`plaintext

You can the open by clicking

`
http://localhost:5173/

`plaintext

then follow the link to the browser or copy it to your browser.

Benefits during development
Hot Reloading (HMR): Changes appear instanly without refreshing the page.
Fast startup
Shows error directly in the terminal and browser.
Makes it easy to test UI changes.

6. npm run preview

Double-checking your work.
Beginners often test only in dev mode. npm run preview **completely ignores your source code.
It boots up a bare-bones local server to serve only the compiled, optimized assets in your dist **folder, perfectly simulating how your app will behave when deployed to Vercel, Netlify, or AWS.

It starts a local server that serves the production build from the dist/ folder.
This let's you test the application exactly as it would after deployment.

Works flow:

`
npm run build

`shell

this creates:

`
dist/
├── assets/
├── index.html
└── ...
`plaintext

1. Preview the build:

`
npm run preview
`shell

`

frontend@0.0.0 preview
vite preview

➜ Local: http://localhost:4173/
`

1. Open the URL in your browser to test the production version.

The Takeaway: The terminal isn't a black box. The better you understand the tools in your toolchain, the faster you can debug when things inevitably go sideways.

What’s one command or concept that completely changed how you code once you learned how it worked under the hood? Let me know below!