← Back to React Course | Chapter 1: Environment Setup & Tooling | Lesson 9 of 10

Understanding npm Scripts

npm scripts are like labeled buttons on a remote control -- press one and it runs a specific job for your project.

In this page:

  1. What the scripts Section Does
  2. Common Scripts You'll Use
  3. Adding Your Own Script
Syntax
markup 
{
  "scripts": {
    "scriptName": "command"
  }
}

npm run scriptName

What the scripts Section Does

The scripts section of package.json defines named shortcuts for common commands, like "start": "vite" or "build": "vite build", so you type npm run build instead of the full underlying command.

Note: Run npm run (with no script name) to list every available script in the current project.
Warning: npm start and npm run start both work as a special case, but most other custom scripts need the explicit run keyword: npm run build, not npm build.

Example: Listing and Running npm Scripts

bash 
$ npm run
Lifecycle scripts included in my-app:
  dev
    vite
  build
    vite build
  preview
    vite preview

$ npm run build
vite v5.0.0 building for production...
✓ 34 modules transformed.
dist/index.html
dist/assets/index-4f3a2b1c.js

⚠️ Run this in your own terminal or Node.js environment.

Common Scripts You'll Use

Nearly every React project ships with a dev/start script (runs the local dev server), a build script (creates the production bundle), and often a test script (runs the test suite).

Note: Check package.json's scripts section first when joining an unfamiliar project -- it tells you exactly how to run it.
Warning: Running npm run build when you meant to start the dev server will not open a live preview -- it just writes files to a dist/ or build/ folder and exits.

Example: Common Scripts You'll Use

bash 
npm run dev    # local dev server
npm run build  # production bundle
npm test       # run test suite

⚠️ Run this in your own terminal or Node.js environment.

Adding Your Own Script

You can add a custom entry to the scripts section yourself, like "lint": "eslint src", and then run it the same way with npm run lint.

Note: Custom script names can be anything -- they're just labels mapped to a shell command.
Warning: A custom script name that collides with a built-in npm command name can behave unexpectedly -- keep names distinct and descriptive.

Example: Adding Your Own Script

bash 
// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src"
  }
}

$ npm run lint
> [email protected] lint
> eslint src

src/App.jsx
  12:7  warning  'count' is assigned a value but never used  no-unused-vars

⚠️ Run this in your own terminal or Node.js environment.

Related Topics

npm vs yarn vs pnpm · Installing Node.js and npm · Your First Component · VS Code Setup for React

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Running a custom script without the run keyword (works for start/test but not custom names).
  2. Not checking the scripts section of package.json before assuming a command exists.
  3. Overwriting a built-in script name (like start) without realizing it changes default behavior.
Chapter Summary
  • npm scripts are shortcuts defined in the scripts section of package.json.
  • npm start and npm test can be run without the word run; custom scripts need npm run <name>.
  • Common React scripts include start (dev server), build (production bundle), and test.
  • You can add your own custom scripts for tasks like linting or formatting.
Browser Support

Not applicable -- npm scripts run in the terminal, not the browser.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Your First Component Next Lesson → VS Code Setup for React

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.